কনস্ট্রেন্টলয়েট ব্যবহার করে সমানভাবে ব্যবধান দর্শন

174

এর জন্য সাধারণ ব্যবহার LinearLayoutহল সমানভাবে স্থান (ওজন) দর্শন, উদাহরণস্বরূপ:

নতুন ব্যবহার করে আপনি কীভাবে সমান দূরত্বের মতামতগুলি প্রয়োগ করবেন ConstraintLayout?

ConstraintLayoutরেফারেন্সের জন্য লিঙ্কগুলি: ব্লগ পোস্ট , আই / ও সেশন ভিডিও

android android-layout android-constraintlayout

— adamk
সূত্র

323

এটি ব্যবহারের দুটি উপায় রয়েছে ConstraintLayout: চেইন এবং গাইডলাইন । চেইনগুলি ব্যবহার করতে, নিশ্চিত হয়ে নিন যে আপনি ConstraintLayoutবিটা 3 বা আরও বেশি ব্যবহার করছেন এবং আপনি যদি অ্যান্ড্রয়েড স্টুডিওতে ভিজ্যুয়াল লেআউট সম্পাদক ব্যবহার করতে চান তবে নিশ্চিত করুন যে আপনি অ্যান্ড্রয়েড স্টুডিও ২.৩ বিটা ১ বা আরও নতুন ব্যবহার করছেন।

পদ্ধতি 1 - চেইন ব্যবহার করে

লেআউট সম্পাদকটি খুলুন এবং আপনার উইজেটগুলি স্বাভাবিক হিসাবে যুক্ত করুন, প্রয়োজনীয় হিসাবে পিতামাতার প্রতিবন্ধকতা যুক্ত করুন। এই ক্ষেত্রে, আমি পিতামাতার নীচে এবং পিতামাতার নীচে বাধা (দুটি বাঁচাতে সংরক্ষণ করুন বোতামের জন্য এবং ডানদিকে ভাগ করুন বোতামের জন্য) বাধা যুক্ত দুটি বোতাম যুক্ত করেছি:

মনে রাখবেন যে এই অবস্থায় আমি ল্যান্ডস্কেপ দৃশ্যে উল্টাপাল্টা করি, দর্শনগুলি পিতামাতাকে পূরণ করে না তবে কোণগুলিতে নোঙ্গর করা রয়েছে:

উভয় মতামত হাইলাইট করুন, হয় সিটিআরএল / সিএমডি ক্লিক করে বা ভিউগুলির চারপাশে একটি বাক্স টেনে নিয়ে:

তারপরে ভিউগুলিতে ডান ক্লিক করুন এবং "কেন্দ্র অনুভূমিকভাবে" নির্বাচন করুন:

এটি দর্শনগুলির মধ্যে দ্বি-দিকনির্দেশক সংযোগ স্থাপন করে (এটি কীভাবে একটি চেইন সংজ্ঞায়িত হয়)। ডিফল্টরূপে চেইন শৈলীটি "স্প্রেড" হয়, যা কোনও এক্সএমএল বৈশিষ্ট্য অন্তর্ভুক্ত না করা হলেও প্রয়োগ করা হয়। এই চেইন শৈলীর সাথে স্টিকিং করা কিন্তু এতে আমাদের দর্শনগুলির প্রস্থকে সেট করা0dp জন্য ভিউগুলি পিতা-মাতার জুড়ে সমানভাবে ছড়িয়ে দেওয়া, উপলব্ধ জায়গাগুলি পূরণ দেয়:

ল্যান্ডস্কেপ দৃশ্যে এটি আরও লক্ষণীয়:

আপনি যদি লেআউট সম্পাদকটি এড়িয়ে যাওয়া পছন্দ করেন, ফলাফল এক্সএমএল দেখতে পাবেন:

<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">

<Button
    android:id="@+id/button_save"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_save_text"
    android:layout_marginStart="8dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="4dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button_share"
    app:layout_constraintHorizontal_chainStyle="spread" />

<Button
    android:id="@+id/button_share"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/button_share_text"
    android:layout_marginStart="4dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintLeft_toRightOf="@+id/button_save"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

বিবরণ:

প্রতিটি আইটেমের প্রস্থকে সেট করে 0dp বা MATCH_CONSTRAINTদর্শনগুলি পিতামাতাকে পূরণ করতে দেয় (alচ্ছিক)
দর্শন দুটি একসাথে অবশ্যই সংযুক্ত করতে হবে (ভাগ করে নেওয়ার বোতামের লিঙ্কগুলির ডানদিকে বাটনে ভাগ করতে বোতামের লিঙ্কগুলির ডানদিকে), "আড়াআড়িভাবে কেন্দ্র" নির্বাচন করার সময় লেআউট সম্পাদকের মাধ্যমে এটি স্বয়ংক্রিয়ভাবে ঘটবে this
চেইনের প্রথম দৃশ্যটি চেইন শৈলীর মাধ্যমে নির্দিষ্ট করতে পারে, বিভিন্ন চেইন শৈলীর জন্য ডকুমেন্টেশনlayout_constraintHorizontal_chainStyle দেখতে পারে, যদি চেন শৈলী বাদ দেওয়া হয়, ডিফল্টটি "স্প্রেড" হয়
চেইনের ওজন মাধ্যমে সামঞ্জস্য করা যেতে পারে layout_constraintHorizontal_weight
এই উদাহরণটি একটি অনুভূমিক চেইনের জন্য, উল্লম্ব চেইনের জন্য সংশ্লিষ্ট বৈশিষ্ট্য রয়েছে

পদ্ধতি 2 - একটি গাইডলাইন ব্যবহার করে

সম্পাদকটিতে আপনার বিন্যাসটি খুলুন এবং গাইডলাইন বোতামটি ক্লিক করুন:

তারপরে "উল্লম্ব নির্দেশিকা যুক্ত করুন" নির্বাচন করুন:

একটি নতুন গাইডলাইন উপস্থিত হবে, এটি ডিফল্টরূপে সম্ভবত আপেক্ষিক মানগুলিতে বাম দিকে নোঙ্গর হবে (বাম-মুখী তীর দ্বারা চিহ্নিত):

শতাংশের মানটিতে এটি পরিবর্তন করতে বাম-মুখী তীরটি ক্লিক করুন, তারপরে গাইডলাইনটি 50% চিহ্নে টানুন:

গাইডলাইনটি এখন অন্য মতামতের জন্য অ্যাঙ্কর হিসাবে ব্যবহার করা যেতে পারে। আমার উদাহরণে, আমি গাইডের সাথে সেভ বোতামের ডান এবং শেয়ার বোতামের বামে সংযুক্ত করেছি:

আপনি যদি ভিউগুলি উপলভ্য স্থান পূরণ করতে চান তবে সীমাবদ্ধতাটি "যে কোনও আকার" এ সেট করা উচিত (স্কুইগলি রেখাগুলি অনুভূমিকভাবে চলমান):

(এই সেটিং হিসাবে একই layout_widthথেকে 0dp)।

লেআউট সম্পাদকটি ব্যবহার না করে এক্সএমএলে খুব সহজেই একটি গাইডলাইন তৈরি করা যেতে পারে:

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

— adamk
সূত্র

1

সীমাবদ্ধতা নিয়ে গাইডলাইন কীভাবে তৈরি করা যায় তার কোনও উপায় আমি পাইনি। আমি চাই একটি অনুভূমিক দিকনির্দেশটি দুটি মতামতের মাঝে হওয়া উচিত। উপরে 100 ডিপি উচ্চতা এবং নীচে 50 ডিপি উচ্চতা সহ একটি ছোট দৃশ্যের কল্পনা করুন। আমি তাদের মধ্যবর্তী জায়গার মাঝখানে একটি গাইডলাইন রাখতে চাই।

— Headvk

3

আমি মনে করি না আপনি নিজে গাইডলাইনে বাধা যুক্ত করতে পারেন। আপনি একাধিক নির্দেশিকা যুক্ত করতে পারেন এবং তারপরে সেই নির্দেশিকাগুলিতে দৃষ্টিভঙ্গি সীমাবদ্ধ করতে পারেন। আপনি কী অর্জন করতে চাইছেন তার বিবরণ সহ আপনি একটি নতুন প্রশ্ন পোস্ট করতে চাইতে পারেন। এটি আবার এখানে পেস্ট করতে নির্দ্বিধায়।

— আদমকে

ধন্যবাদ, প্রিয় স্যার। এটি একটি সময়োপযোগী এবং কার্যকর সহায়তা ছিল।

— iSofia

আমি দর্শনে আনুপাতিক প্রস্থ দিতে চাই। যেমন আমি শেয়ার বোতামটি সেভ বোতামের প্রস্থের দ্বিগুণ চেয়ে বেশি করতে চাই। গাইডলাইন ব্যবহার না করে যেহেতু আমার মতামত এই উদাহরণের মতো একে অপরের পাশে অবস্থান করে না। এটা কি সম্ভব?

— শুভম নায়েক

আপনাকে গাইডলাইন দ্বারা প্রদত্ত মানগুলিকে প্রকৃত মার্জিন বা প্যাডিংয়ে রূপান্তর করতে হবে। গাইডলাইনগুলি কেবল ডিজাইন মোডে কাজ করে।

— অভিনব সাক্সেনা

49

একই লাইনে 2 টি দর্শন তৈরি করতে, সমান প্রস্থে, কেবল সংজ্ঞা দেওয়া দরকার

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"  
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button1" />

</android.support.constraint.ConstraintLayout>

বিঃদ্রঃ

প্রস্থ = 0 ডিপি ( MATCH_CONSTRAINT)
সীমাবদ্ধ button1এবং button2উপরে পছন্দ করা আবশ্যক

ফলাফল

আরও
আপনি যদি আপনি ব্যবহার করতে পারেন তার View1চেয়ে বড় চান বা । উদাহরণ, প্রস্থ = 2 * প্রস্থের ওজনView2weightpercent
View1View2

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 3"
        app:layout_constraintEnd_toStartOf="@+id/button4"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toStartOf="parent"
        />

    <Button
        android:id="@+id/button4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/button3"
        />

</android.support.constraint.ConstraintLayout>

ফলাফল

উদাহরণ, View1প্রস্থ = 2 * View2প্রস্থ ব্যবহার শতাংশ

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/button5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 5"
        app:layout_constraintEnd_toStartOf="@+id/button6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_percent="0.667"
        />

    <Button
        android:id="@+id/button6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button5"
        app:layout_constraintWidth_percent="0.333"
        />

</android.support.constraint.ConstraintLayout>

ফলাফল

— ফান ভ্যান লিনহ
সূত্র

23

ভাল যদি এটি কাউকে সাহায্য করে

কী এখানে app:layout_constraintHorizontal_weight="1"এবং
বাধ্যতা বিন্যাস সম্পর্কে ভাল জিনিস এটা বৃত্তাকার নির্ভরতা সমর্থন এবং এখানে আমি ঠিক ব্যবহার কৃতকর্মের হয়।

প্রথম সন্তানের জন্য
app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"

দ্বিতীয় সন্তানের জন্য

app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"

এখানে সম্পূর্ণ ডেমো

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

    <EditText
        android:id="@+id/editTextParent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/state" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputFirstChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildOne"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/pin_code" />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputSecondChild"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textInputParent">

    <EditText
        android:id="@+id/editTextChildSecond"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/country" />
</android.support.design.widget.TextInputLayout>

— rookieDeveloper
সূত্র

9

আপনি ভারযুক্ত চেইন সম্পর্কে পড়া উচিত। কোডের একটি উদাহরণ এখানে।

<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="wrap_content"
    >

    <TextView
        android:id="@+id/figure_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_2"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="1"
        />

    <TextView
        android:id="@+id/figure_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_3"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_1"
        tools:text="2"
        />

    <TextView
        android:id="@+id/figure_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintEnd_toStartOf="@id/figure_4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_2"
        tools:text="3"
        />

    <TextView
        android:id="@+id/figure_4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/figure_3"
        tools:text="4"
        />
</android.support.constraint.ConstraintLayout>

তাই, সেট android:layout_width="0dp", app:layout_constraintHorizontal_weight="1"মত প্রতিবেশীদের সঙ্গে যে দৃশ্য সংযোগ আছে:

app:layout_constraintStart_toEndOf="@id/figure_2"
app:layout_constraintEnd_toStartOf="@id/figure_4"

— CoolMind
সূত্র

দু'বছর আগে পোস্ট করা ঠিক উত্তরটার মতোই আরও উত্তর পোস্ট করার কী দরকার?

@ সুবেজারো, আমি উচ্চ হারের সাথে বহুগুণ সমান উত্তর দেখেছি। এমনকি কোড লাইন একই ছিল। আমার সন্দেহ, কিছু লেখক আমার কাছ থেকে অনুলিপি করেছেন এমনকি আরও অনুভূতি পেয়েছেন। এই ক্ষেত্রে উত্তরগুলি আলাদা, আমি ওজন কীভাবে কাজ করে তা বোঝার জন্য অন্যান্য উত্সগুলিও ব্যবহার করেছিলাম এবং ConstraintLayoutউপরের ছবিটি পাওয়ার জন্য কেবল প্রথম উত্তরটি যথেষ্ট ছিল না।

— শীতলমান্ড

3

আপনার শৃঙ্খলিত আইটেমগুলি একবার হয়ে গেলে, আপনি এখনও তাদের সমানভাবে ব্যবধানে রাখার জন্য আপেক্ষিক বিন্যাসের মতো ওজন ব্যবহার করতে পারেন। নীচের উদাহরণটি দেখায় যে কীভাবে তাদের বিভিন্ন আকারের পাঠ্যদর্শনগুলির সাথে সমানভাবে ব্যবধানে রাখা যায়।

<TextView1
     app:layout_constraintHorizontal_weight="1" />
 <TextView2
     app:layout_constraintHorizontal_weight="1" />
 <TextView3
     app:layout_constraintHorizontal_weight="1" />
 <TextView4
     app:layout_constraintHorizontal_weight="1" />

— tzg
সূত্র