समान रूप से कॉन्सट्रैटिनलाईट का उपयोग करके विचारों को स्थान देना

174

LinearLayoutउदाहरण के लिए, समान रूप से स्थान (वजन) के विचारों का एक सामान्य उपयोग है:

आप नए का उपयोग करके इस तरह से समान रूप से दूरी वाले विचारों को कैसे लागू करते हैं ConstraintLayout?

ConstraintLayoutसंदर्भ के लिए लिंक: ब्लॉग पोस्ट , I / O सत्र वीडियो

android android-layout android-constraintlayout

— AdamK
स्रोत

323

इसका उपयोग करने के दो तरीके हैं ConstraintLayout: जंजीरों और दिशानिर्देश । चेन का उपयोग करने के लिए, सुनिश्चित करें कि आप ConstraintLayoutबीटा 3 या नए का उपयोग कर रहे हैं और यदि आप एंड्रॉइड स्टूडियो में विज़ुअल लेआउट एडिटर का उपयोग करना चाहते हैं, तो सुनिश्चित करें कि आप एंड्रॉइड स्टूडियो 2.3 बीटा 1 या नए का उपयोग कर रहे हैं।

विधि 1 - चेन का उपयोग करना

लेआउट एडिटर खोलें और अपने विजेट्स को सामान्य रूप से जोड़ें, माता-पिता की बाधाओं को आवश्यकतानुसार जोड़ें। इस मामले में, मैंने बाधाओं के साथ माता-पिता और माता-पिता के नीचे (शेयर बटन के लिए बाईं ओर और दाईं ओर साझा बटन के लिए दाईं ओर) दो बटन जोड़े हैं:

ध्यान दें कि इस स्थिति में, अगर मैं लैंडस्केप दृश्य के लिए फ्लिप करता हूं, तो दृश्य माता-पिता को नहीं भरते हैं, लेकिन कोनों के लिए लंगर डाले जाते हैं:

दोनों दृश्यों को हाइलाइट करें, या तो Ctrl / Cmd पर क्लिक करके या किसी बॉक्स को विचारों के आसपास खींचकर:

फिर विचारों पर राइट-क्लिक करें और "क्षैतिज रूप से केंद्र" चुनें:

यह विचारों के बीच एक द्वि-दिशात्मक संबंध स्थापित करता है (जो कि एक श्रृंखला को कैसे परिभाषित किया जाता है)। डिफ़ॉल्ट रूप से चेन स्टाइल "स्प्रेड" है, जिसे तब भी लागू किया जाता है जब कोई XML विशेषता शामिल नहीं होती है। इस श्रृंखला शैली के साथ चिपके रहते हैं लेकिन हमारे विचारों की चौड़ाई निर्धारित 0dpकरने से विचारों को उपलब्ध स्थान को भरने की सुविधा मिलती है, जो माता-पिता में समान रूप से फैलता है:

परिदृश्य दृश्य में यह अधिक ध्यान देने योग्य है:

यदि आप लेआउट संपादक को छोड़ना पसंद करते हैं, तो परिणामस्वरूप XML जैसा दिखेगा:

<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माता-पिता को विचार भरने देना (वैकल्पिक)
विचारों को एक साथ द्विदिश रूप से जोड़ा जाना चाहिए (बटन को बचाने के लिए बटन लिंक को बचाने का अधिकार, बटन को बचाने के लिए शेयर बटन के लिंक को छोड़ दिया जाए), यह "सेंटर क्षैतिज" चुनने पर स्वचालित रूप से लेआउट संपादक के माध्यम से होगा।
श्रृंखला में पहला दृश्य श्रृंखला शैली को निर्दिष्ट कर सकता है layout_constraintHorizontal_chainStyle, विभिन्न श्रृंखला शैलियों के लिए दस्तावेज़ीकरण देख सकता है , यदि श्रृंखला शैली छोड़ दी गई है, तो डिफ़ॉल्ट "फैल" है
श्रृंखला के भार के माध्यम से समायोजित किया जा सकता है layout_constraintHorizontal_weight
यह उदाहरण एक क्षैतिज श्रृंखला के लिए है, ऊर्ध्वाधर श्रृंखलाओं के लिए इसी गुण हैं

विधि 2 - एक दिशानिर्देश का उपयोग करना

संपादक में अपना लेआउट खोलें और दिशानिर्देश बटन पर क्लिक करें:

फिर "वर्टिकल गाइडलाइन जोड़ें" चुनें:

एक नई गाइडलाइन दिखाई देगी, जो डिफ़ॉल्ट रूप से, संभवतः सापेक्ष मूल्यों में बाईं ओर लंगर डालेगी (बाईं ओर स्थित तीर द्वारा चिह्नित):

इसे प्रतिशत मान पर स्विच करने के लिए बाएं ओर के तीर पर क्लिक करें, फिर दिशानिर्देश को 50% चिह्न तक खींचें:

दिशानिर्देश का उपयोग अब अन्य दृश्यों के लिए एक एंकर के रूप में किया जा सकता है। मेरे उदाहरण में, मैंने सेव बटन के दाईं ओर और शेयर बटन के बाईं ओर गाइडलाइन संलग्न की है:

यदि आप उपलब्ध स्थान को भरने के लिए विचार चाहते हैं, तो बाधा को "किसी भी आकार" (क्षैतिज रूप से चलने वाली स्क्वीजीली लाइनें) पर सेट किया जाना चाहिए:

(यह सेटिंग के समान layout_widthहै 0dp)।

लेआउट एडिटर का उपयोग करने के बजाय XML में एक दिशानिर्देश भी आसानी से बनाया जा सकता है:

<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

मुझे एक रास्ता नहीं मिला कि कैसे एक बाधा के साथ एक दिशानिर्देश तैयार किया जाए। मैं दो दृष्टिकोणों के बीच में एक क्षैतिज दिशानिर्देश चाहता हूं। शीर्ष पर 100dp ऊंचाई के साथ एक बड़े दृश्य की कल्पना करें और नीचे की तरफ 50dp ऊंचाई के साथ एक छोटा। मैं उनके बीच के स्थान के बीच में एक दिशानिर्देश रखना चाहता हूं।

— headsvk

3

मुझे नहीं लगता कि आप दिशानिर्देश में स्वयं बाधा डाल सकते हैं। आप कई दिशानिर्देश जोड़ सकते हैं और फिर उन दिशानिर्देशों पर विचार करने के लिए विवश कर सकते हैं। आप क्या हासिल करने की कोशिश कर रहे हैं उस पर विवरण के साथ एक नया प्रश्न पोस्ट करना चाह सकते हैं। बेझिझक इसे यहाँ वापस पेस्ट करें।

— एडम

धन्यवाद, प्रिय महोदय। यह समय पर और प्रभावी मदद थी।

— सोफिया

मैं विचारों को आनुपातिक चौड़ाई देना चाहता हूं। उदाहरण के लिए मैं शेयर बटन को सेव बटन की चौड़ाई से दोगुना चाहता हूं। दिशा-निर्देशों का उपयोग किए बिना चूंकि मेरे विचार इस उदाहरण की तरह एक-दूसरे के बगल में तैनात नहीं हैं। क्या यह संभव है?

— शुभम नाइक

आपको दिशानिर्देशों द्वारा दिए गए मूल्यों को वास्तविक मार्जिन या पैडिंग में बदलना होगा। दिशानिर्देश केवल डिज़ाइन मोड में काम करते हैं।

— अभिनव सक्सेना

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>

ध्यान दें

चौड़ाई = 0dp ( MATCH_CONSTRAINT)
की कमी button1और button2ऊपर की तरह होना चाहिए

परिणाम

अधिक
यदि आप चाहते हैं कि आप का उपयोग या View1से बड़ा View2कर सकते हैं । उदाहरण, चौड़ाई = 2 * चौड़ाई वजन का उपयोग करती हैweightpercent
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
स्रोत

दो साल पहले पोस्ट किए गए एक और उत्तर की तरह एक और उत्तर देने का क्या मतलब है?

@Subzero, मैंने उच्च दर के साथ कई बार समान उत्तर देखे। यहां तक कि कोड लाइनें भी समान थीं। मुझे संदेह है, कुछ लेखकों ने खान से नकल की और यहां तक कि अधिक प्लस भी प्राप्त किए। इस मामले में उत्तर अलग-अलग हैं, मैंने यह समझने के लिए अन्य स्रोतों का भी उपयोग किया कि वजन कैसे काम करता है 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
स्रोत