কনস্ট্রেন্টলআউটে উপাদানগুলি কীভাবে কেন্দ্র করবেন


200

আমি ConstraintLayoutঅ্যাপ্লিকেশন বিন্যাস তৈরি করতে আমার অ্যাপ্লিকেশনটিতে ব্যবহার করছি । আমি এমন একটি স্ক্রিন তৈরি করার চেষ্টা করছি যেখানে এটির একটি হওয়া উচিত EditTextএবং Buttonএটি কেন্দ্রে Buttonথাকা উচিত এবং EditTextকেবলমাত্র 16dp এর সাথে মার্জিন টপ এর নীচে থাকা উচিত ।

এখানে আমার লেআউট এবং স্ক্রিনশটটি এখন কেমন দেখাচ্ছে।

activity_authenticate_content.xml

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    tools:context="com.icici.iciciappathon.login.AuthenticationActivity">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/client_id_input_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/login_client_id"
            android:inputType="textEmailAddress" />

    </android.support.design.widget.TextInputLayout>

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/authenticate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/login_auth"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/client_id_input_layout"
        app:layout_constraintRight_toRightOf="@id/client_id_input_layout"
        app:layout_constraintTop_toTopOf="@id/client_id_input_layout" />

</android.support.constraint.ConstraintLayout>

এখানে চিত্র বর্ণনা লিখুন

উত্তর:


145

হালনাগাদ:

শৃঙ্খল

ইউজিনের উত্তরে বর্ণনা অনুযায়ী আপনি এখন chainবৈশিষ্ট্যটি packedমোডে ব্যবহার করতে পারেন ।


নির্দেশিকা

আপনি 50% অবস্থানে একটি অনুভূমিক নির্দেশিকা ব্যবহার করতে পারেন এবং সম্পাদনা এবং বোতামের নীচে এবং শীর্ষ (8 ডিপি) সীমাবদ্ধতা যুক্ত করতে পারেন:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/client_id_input_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/login_client_id"
            android:inputType="textEmailAddress"/>

    </android.support.design.widget.TextInputLayout>

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/authenticate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/login_auth"
        app:layout_constraintTop_toTopOf="@+id/guideline"
        android:layout_marginTop="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

</android.support.constraint.ConstraintLayout>

লেআউট সম্পাদক


1
ধন্যবাদ @ পাইপিক আমি বুঝতে পারছিলাম না এর ব্যবহার কী <android.support.constraint.Guideline? আমরা যখন ব্যবহার করি তখন কি আমাদের প্রতিবার ব্যবহার করা দরকার ConstraintLayout?
এন শর্মা

এর ব্যবহার কী layout_constraintGuide_percent?
এন শর্মা

1
Guidelineকেবলমাত্র একটি অদৃশ্য আইটেম যার উপর আপনি নিজের মতামত নোঙ্গর করতে পারেন। layout_constraintGuide_percentপিতামাতার শতাংশ। এখানে 0.5 হ'ল 50% উচ্চতা
পাইকপিক

ধন্যবাদ। Gotcha। আমার এখন দু'জন TextInputEditTextএবং একজন Button। আমি তাদের পর্দার একটি কেন্দ্রে রাখতে চাই। তবে এখন পর্যন্ত এটি পেস্টবিন নয় / আইএক্সওয়াইটিএক্সএইচজি এখানে স্ক্রিনশট ড্রপবক্স.com
এন শর্মা

1
আপনি মাঝেরটিকে কেন্দ্র করতে পারেন এবং উপরে এবং একটি নীচে যুক্ত করতে পারেন বা LinearLayoutএটিকে একটিতে রেখে এটি কেন্দ্র করতে পারেন।
পাইকপিক

328

একটি সহজ উপায় আছে। আপনি যদি নীচে লেআউটের সীমাবদ্ধতাগুলি সেট করেন এবং আপনার সম্পাদনা পাঠ্য আকার নির্ধারণ করা হয়েছে, এটি সীমাবদ্ধ বিন্যাসে কেন্দ্রীভূত হবে:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

বাম / ডান জোড় অনুভূমিকভাবে দৃশ্যটি কেন্দ্র করে এবং উপরের / নীচের অংশটি এটি উল্লম্বভাবে কেন্দ্র করে। এর কারণ এটি যখন আপনি নিজের দেখার চেয়ে বাম, ডান বা উপরে, নীচের সীমাবদ্ধতাগুলি সেট করেন, দৃশ্যটি দুটি সীমাবদ্ধতার মধ্যে কেন্দ্রীভূত হয় অর্থাৎ পক্ষপাতটি 50% সেট করা হয়। আপনি নিজের পক্ষপাতিত্ব স্থির করে ভিউ উপরে / নীচে বা ডান / বাম দিকে সরিয়ে নিতেও পারেন। এটির সাথে কিছুটা খেলুন এবং আপনি দেখতে পাবেন এটি কীভাবে দর্শন অবস্থানকে প্রভাবিত করে।


5
এটি গাইডলাইন ব্যবহারের চেয়ে অনেক ভাল পদ্ধতির।
ssand

47
app:layout_constraintCenter_in="parent"আরও ভাল হবে। তবে সর্বদা হিসাবে গুগল এটি সরবরাহ করে নি।
Gojir4

1
এটি আরও উপযুক্ত এবং এটি বেশিরভাগ কর্মকর্তাদের কাছ থেকে আলোচনা এবং উদাহরণগুলিতেও আমি দেখেছি।
তপন এইচপি

সহজ, বুঝতে সহজ।
Yohanes এআই

2
গাইডলাইনগুলি আরও ভাল কারণ আপনার একবার জটিল বিন্যাস হয়ে গেলে, যা বিপণনের পরে তা হ'ল তারপরে সরলতার কেন্দ্রিককরণ আর কাজ করে না। শীর্ষে এবং নীচের দিকনির্দেশগুলির গাইডলাইন এবং কেন্দ্র থাকা ভাল
নিক টার্নার

58

গাইডলাইন সহ সমাধানটি একক লাইন এডিটেক্সট সহ কেবলমাত্র এই বিশেষ ক্ষেত্রে কাজ করে। এটি মাল্টলাইন সম্পাদনা পাঠের জন্য কাজ করতে আপনার "প্যাকড" চেইন ব্যবহার করা উচিত।

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/client_id_input_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/authenticate"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/login_client_id"
            android:inputType="textEmailAddress" />

    </android.support.design.widget.TextInputLayout>

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/authenticate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/login_auth"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/client_id_input_layout"
        app:layout_constraintRight_toRightOf="@id/client_id_input_layout"
        app:layout_constraintTop_toBottomOf="@id/client_id_input_layout" />

</android.support.constraint.ConstraintLayout>

এটি কেমন দেখাচ্ছে তা এখানে:

নেক্সাস 5 এ দেখুন

আপনি নিম্নলিখিত পোস্টগুলিতে চেইন ব্যবহার সম্পর্কে আরও পড়তে পারেন:


এটি অবশ্যই সেরা উত্তর। অন্যান্য উত্তরগুলি কেবল এক বা দুটি দর্শনের জন্য কাজ করে। এটি এক, আরও স্কেলযোগ্য, কারণ এটি এক, দুটি এবং আপনি যতটা দর্শন চান তার পক্ষে কাজ করে।
mdelolmo

20

আপনি পর্দার আকারের শতাংশ হিসাবে একটি দৃশ্যকে কেন্দ্র করতে পারেন।

এই উদাহরণটি 50% প্রস্থ এবং উচ্চতা ব্যবহার করে:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF0000"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".5"></LinearLayout>

</android.support.constraint.ConstraintLayout>

এটি কনস্ট্রেন্টলআউট সংস্করণ 1.1.3 ব্যবহার করে করা হয়েছিল। এটিকে গ্রেডের মধ্যে আপনার নির্ভরতাগুলিতে যুক্ত করতে ভুলবেন না এবং সেখানে যদি নতুন সংস্করণ বের হয় তবে সংস্করণটি বাড়িয়ে দিন:

dependencies {
...
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

এখানে চিত্র বর্ণনা লিখুন


12

আপনার ভিউ এই ট্যাগ যুক্ত করুন

    app:layout_constraintCircleRadius="0dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"

এবং আপনি ডিজাইন মোডে ডান ক্লিক করতে পারেন এবং কেন্দ্রটি চয়ন করতে পারেন।


8

কনস্ট্রেন্টলয়েটের অভ্যন্তরে কেন্দ্রের দৃশ্যের জন্য আপনি লেআউট_কন্ট্রেন্ট সার্কেল ব্যবহার করতে পারেন।

<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/mparent"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageButton
            android:id="@+id/btn_settings"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_home_black_24dp"
            app:layout_constraintCircle="@id/mparent"
            app:layout_constraintCircleRadius="0dp"
            />
    </android.support.constraint.ConstraintLayout>

অভিভাবকের কাছে সীমাবদ্ধতা বৃত্ত এবং শূন্য ব্যাসার্ধ সহ আপনি আপনার ভিউটিকে পিতামাতার কেন্দ্রবিন্দু করতে পারেন।


best.solution.ever। ঠিক একটি "অ্যাপ্লিকেশন: লেআউট_কন্ট্রেন্টসেন্টার_টেন =" প্যারেন্ট "" (যা বিদ্যমান নেই)
বানাডিক্ট লাগাউজ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.