ConstraintLayout

Question

के साथ ग्रिडलायआउट कॉलम संरेखण को दोहराने का प्रयास कर रहा हूं, मैं ConstraintLayout के लिए नया हूं, और मैं GridLayout द्वारा ConstraintLayout के साथ प्रदान किए गए वही ग्रिड व्यवहार को दोहराने की कोशिश कर रहा हूं।

विशेष रूप से, मैं दो कॉलम ग्रिड डिज़ाइन करना चाहता हूं। पहली कॉलम चौड़ाई जितनी संभव हो उतनी संकीर्ण होनी चाहिए, जबकि दूसरे कॉलम को शेष शेष क्षैतिज स्थान लेना चाहिए। बेशक, दूसरा कॉलम पहले कॉलम के सबसे बड़े दृश्य के लिए, पहले स्तंभ के दाईं ओर या इसके बजाय होना चाहिए।

मुझे नहीं पता कि मैं इस अंतिम आवश्यकता को ConstraintLayout के साथ कैसे दोहरा सकता हूं। मैं दो स्तंभों के बीच एक ग्रिडलाइन का उपयोग नहीं करना चाहता, क्योंकि पहले कॉलम में निश्चित नहीं होना चाहिए और न ही प्रतिशत चौड़ाई होनी चाहिए, बल्कि इसके दृश्य के सबसे व्यापक के रूप में चौड़ी होनी चाहिए।

https://gist.github.com/venator85/499dd82f47b3efbbed7a1e9e1ca1412d पर मैंने एक लेआउट उदाहरण तैयार किया, और संबंधित पूर्वावलोकन, जो ग्रिडलाउट दिखा रहा है जो मैं चाहता हूं लागू करता है। उस लेआउट में पहले दो कॉन्स्ट्रेनटआउट प्रयासों से पता चलता है कि सी 1 और डी 1 को बी 1 में गठबंधन किया गया है, और सी 2 और डी 2 को बी 2 में गठबंधन किया जा सकता है। जब बी 2 ए 2 से कम है, ए 1 और सी 1 ओवरलैप होगा।

कोई मदद?

धन्यवाद

Answer 1

गूगल "बाधाओं" ConstraintLayout की नवीनतम रिलीज इस सवाल का 100% एक्सएमएल में व्याख्या करने योग्य का जवाब बनाने के लिए मदद करता है कि में का विचार प्रस्तुत किया गया है। ConstraintLayout 1.1.0 beta 1 release notes देखें। हालांकि, उस नोट में नई क्षमताओं पर बहुत सारी जानकारी नहीं है, वहां talk at I/O 2017 था जो नई सामग्री पर छू गया था।

नया समाधान बाधाओं के साथ GridLayout के ग्रिड को दोहराना है। बाईं ओर TextView एस और शीर्ष तीन पंक्तियों के नीचे बाधा के दाईं ओर स्थित एक लंबवत बाधा है। प्रत्येक TextView में कितना टेक्स्ट मौजूद है, इस पर निर्भर करता है कि बाधाएं बदलती हैं लेकिन app:constraint_referenced_ids में निर्दिष्ट स्थिति को हमेशा बनाए रखें। संक्षेप में, बाधाएं फ़्लोटिंग दिशानिर्देशों की तरह कार्य करती हैं। यह समाधान वीडियो में मौजूद समर्थन के लिए किसी भी कोडिंग पर निर्भर नहीं है।

यहाँ एक video of the new layout कि वांछित स्थिति प्रत्येक TextView एक और TextView की सामग्री बदलती है के रूप में बनाए रखा जा रहा से पता चलता है। यह वीडियो एंड्रॉइड स्टूडियो 2.3.2 के डिज़ाइन टूल्स में बनाया गया था।

और नए लेआउट बाधाओं प्रयोग करने के लिए एक्सएमएल:

<?xml version="1.0" encoding="utf-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/constrained" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.constraint.Barrier 
     android:id="@+id/barrierVertical" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:orientation="vertical" 
     app:barrierDirection="right" 
     app:constraint_referenced_ids="L1, L2, L3, L4" /> 

    <TextView 
     android:id="@+id/L1" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_margin="8dp" 
     android:text="L1 *" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     tools:ignore="HardcodedText" /> 

    <TextView 
     android:id="@+id/R1" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_margin="8dp" 
     android:text="R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1 R1*" 
     app:layout_constraintLeft_toRightOf="@+id/barrierVertical" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     tools:ignore="HardcodedText" /> 

    <android.support.constraint.Barrier 
     android:id="@+id/barrier1" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:orientation="horizontal" 
     app:barrierDirection="bottom" 
     app:constraint_referenced_ids="L1, R1" /> 

    <TextView 
     android:id="@+id/L2" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_margin="8dp" 
     android:text="L2 L2*" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintTop_toBottomOf="@id/barrier1" 
     tools:ignore="HardcodedText" /> 

    <TextView 
     android:id="@+id/R2" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_margin="8dp" 
     android:text="R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2 R2*" 
     app:layout_constraintLeft_toRightOf="@+id/barrierVertical" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@id/barrier1" 
     tools:ignore="HardcodedText" /> 

    <android.support.constraint.Barrier 
     android:id="@+id/barrier2" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:orientation="horizontal" 
     app:barrierDirection="bottom" 
     app:constraint_referenced_ids="L2, R2" /> 

    <TextView 
     android:id="@+id/L3" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_margin="8dp" 
     android:text="L3 L3 L3*" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintTop_toBottomOf="@id/barrier2" 
     tools:ignore="HardcodedText" /> 

    <TextView 
     android:id="@+id/R3" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_margin="8dp" 
     android:text="R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3 R3*" 
     app:layout_constraintLeft_toRightOf="@id/barrierVertical" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@id/barrier2" 
     tools:ignore="HardcodedText" /> 

    <android.support.constraint.Barrier 
     android:id="@+id/barrier3" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:orientation="horizontal" 
     app:barrierDirection="bottom" 
     app:constraint_referenced_ids="L3, R3" /> 

    <TextView 
     android:id="@+id/L4" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_margin="8dp" 
     android:text="L4 L4 L4 L4 L4 L4*" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/barrier3" 
     tools:ignore="HardcodedText,RtlHardcoded" /> 

    <TextView 
     android:id="@+id/R4" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_margin="8dp" 
     android:text="R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4 R4*" 
     app:layout_constraintLeft_toRightOf="@+id/barrierVertical" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/barrier3" 
     tools:ignore="HardcodedText" /> 

</android.support.constraint.ConstraintLayout> 

Answer 2

अद्यतन: स्वीकार कर लिया उत्तर देखें।

मुझे शक है जिस तरह से आप XML के साथ विशुद्ध रूप से चाहते हैं कि एक ConstraintLayout के साथ एक GridLayout को दोहराने के लिए एक तरह से है कि वहाँ। यदि आप छोटे कोड को लेआउट में सहायता करने के इच्छुक हैं, तो आप एक चलने योग्य लंबवत दिशानिर्देश का उपयोग कर GridLayout के रूप में काम करने के लिए ConstraintLayout सेट अप कर सकते हैं।

एक्सएमएल लेआउट दो कॉलम में बनाएं जैसा कि आप दर्शाते हैं। बाएं कॉलम में प्रत्येक TextView के शीर्ष को दाएं कॉलम में संबंधित TextView के शीर्ष पर बाध्य किया जाएगा, इसलिए बाएं प्रविष्टियां सही वृद्धि या ऊंचाई में कमी के रूप में प्रविष्टियों के रूप में ऊपर या नीचे फ़्लोट हो जाएंगी।

सभी दाएं कॉलम दृश्य बाएं ओर दिए गए लंबवत दिशानिर्देश तक बाईं ओर बाध्य होंगे। एक्सएमएल में इस दिशानिर्देश की नियुक्ति के साथ काम करने के लिए कुछ उचित होना चाहिए लेकिन वास्तविक प्लेसमेंट कोड में किया जाएगा और बाईं ओर व्यापक दृश्य की चौड़ाई के आधार पर समायोजित किया जाएगा।

यह आपके द्वारा उत्पन्न की जाने वाली समस्या का समाधान है लेकिन यह एक सामान्य समाधान नहीं है। निम्नलिखित TextView की ऊंचाई पर निर्भर करता है जो बाईं ओर संबंधित TextView की ऊंचाई से कम या उसके बराबर होता है।

एंड्रॉइड स्टूडियो लेआउट संपादक में लेआउट कैसा दिखता है। मैंने दिशानिर्देश को दाहिने ओर धक्का दिया कि यह कैसे प्रदर्शित होता है। (कोड छवियों इस प्रकार है।)

यहाँ एक स्क्रीन शॉट है। मुझे आशा है कि आपको यह उपयोगी लगेगा।

यहाँ ConstraintLayout का उपयोग कर लेआउट है। (बाएं कॉलम में दाएं लपेटने के लिए प्रारंभिक पोस्ट के बाद से अपडेट किया गया।)

बाधित।एक्सएमएल

<?xml version="1.0" encoding="utf-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/constrained" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

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

    <TextView 
     android:id="@+id/L1" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="0dp" 
     android:text="A1 A1 A1 A1 A1*" 
     app:layout_constraintHorizontal_bias="0.0" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toLeftOf="@id/guideline" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintWidth_default="wrap" 
     tools:ignore="HardcodedText" /> 

    <TextView 
     android:id="@+id/L2" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginLeft="0dp" 
     android:layout_marginTop="0dp" 
     android:text="B1 B1 B1 B1 B1*" 
     app:layout_constraintHorizontal_bias="0.0" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toLeftOf="@id/guideline" 
     app:layout_constraintTop_toTopOf="@+id/R2" 
     app:layout_constraintWidth_default="wrap" 
     tools:ignore="HardcodedText" /> 

    <TextView 
     android:id="@+id/L3" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginLeft="0dp" 
     android:layout_marginTop="0dp" 
     android:text="A2 A2 A2 A2*" 
     app:layout_constraintHorizontal_bias="0.0" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toLeftOf="@id/guideline" 
     app:layout_constraintTop_toTopOf="@+id/R3" 
     app:layout_constraintWidth_default="wrap" 
     tools:ignore="HardcodedText" /> 

    <TextView 
     android:id="@+id/L4" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginLeft="0dp" 
     android:layout_marginTop="0dp" 
     android:text="B2 B2 B2 B2 B2*" 
     app:layout_constraintHorizontal_bias="0.02" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toLeftOf="@id/guideline" 
     app:layout_constraintTop_toTopOf="@+id/R4" 
     app:layout_constraintWidth_default="wrap" 
     tools:ignore="HardcodedText" /> 

    <TextView 
     android:id="@+id/R1" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:text="C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1 C1*" 
     app:layout_constraintLeft_toRightOf="@id/guideline" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     tools:ignore="HardcodedText" /> 

    <TextView 
     android:id="@+id/R2" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:text="D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1 D1*" 
     app:layout_constraintLeft_toRightOf="@+id/guideline" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/R1" 
     tools:ignore="HardcodedText" /> 

    <TextView 
     android:id="@+id/R3" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:text="C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2 C2*" 
     app:layout_constraintLeft_toRightOf="@id/guideline" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@id/R2" 
     tools:ignore="HardcodedText" /> 

    <TextView 
     android:id="@+id/R4" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:text="D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2 D2*" 
     app:layout_constraintLeft_toRightOf="@+id/guideline" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/R3" 
     tools:ignore="HardcodedText" /> 

</android.support.constraint.ConstraintLayout> 

यहाँ Activity कि दिशानिर्देश के स्थान को समायोजित कर देता है।

MainActivity.java

package com.example.layout2; 

import android.os.Bundle; 
import android.support.constraint.ConstraintLayout; 
import android.support.constraint.Guideline; 
import android.support.v7.app.AppCompatActivity; 
import android.widget.TextView; 

public class MainActivity extends AppCompatActivity { 

    private Guideline mGuideline; 
    private ConstraintLayout mConstraintLayout; 
    private TextView L1; 
    private TextView L2; 
    private TextView L3; 
    private TextView L4; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.constrained); 
     mConstraintLayout = (ConstraintLayout) findViewById(R.id.constrained); 
     mGuideline = (Guideline) findViewById(R.id.guideline); 
     L1 = (TextView) findViewById(R.id.L1); 
     L2 = (TextView) findViewById(R.id.L2); 
     L3 = (TextView) findViewById(R.id.L3); 
     L4 = (TextView) findViewById(R.id.L4); 
     // We will adjust the location of the guideline after layout is completed. 
     mConstraintLayout.post(new Runnable() { 
      @Override 
      public void run() { 
       moveGuideline(); 
      } 
     }); 
    } 

    public void moveGuideline() { 
     ConstraintLayout.LayoutParams params; 

     params = (ConstraintLayout.LayoutParams) mGuideline.getLayoutParams(); 
     // Find the widest TextView in the left column... 
     params.guideBegin = Math.max(Math.max(L1.getWidth(), L2.getWidth()), 
       Math.max(L3.getWidth(), L4.getWidth())); 
     // ... and set the guideline to the right of the widest one. 
     mGuideline.setLayoutParams(params); 
    } 
} 

Answer 3

इस बाहर की कोशिश करो।

<?xml version="1.0" encoding="utf-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:orientation="horizontal"> 


    <TextView 
     android:id="@+id/textView5" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginLeft="8dp" 
     android:layout_marginTop="8dp" 
     android:text="A1 A1 A1 A1 " 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintTop_toTopOf="parent" /> 

    <TextView 
     android:id="@+id/textView8" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginTop="8dp" 
     android:text="C1 C1 C1 C1 " 
     app:layout_constraintHorizontal_bias="0.506" 
     app:layout_constraintLeft_toRightOf="@+id/textView5" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" /> 

    <TextView 
     android:id="@+id/textView9" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginTop="8dp" 
     android:text="B1 B1 B1 B1 " 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toLeftOf="@+id/textView8" 
     app:layout_constraintTop_toBottomOf="@+id/textView8" /> 

    <TextView 
     android:id="@+id/textView10" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginTop="8dp" 
     android:text="D1 D1 D1 D1 " 
     app:layout_constraintHorizontal_bias="0.506" 
     app:layout_constraintLeft_toRightOf="@+id/textView5" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/textView5" /> 

</android.support.constraint.ConstraintLayout> 

ऐसा कुछ।

Answer 4

मुझे नहीं लगता कि इस समय एक ConstraintLayout कंटेनर के साथ पूरी तरह से प्रदर्शन करना संभव है। मुझे आशा है कि भविष्य में Google group_id या "समूह से संरेखित" के साथ लेआउट की गणना करने के लिए कुछ अन्य तरीका जोड़ देगा।

इस बीच, मेरा सुझाव है कि आप ConstraintLayoutConstraintLayout के अंदर कंटेनर का उपयोग करें। यह कैसे मैं इस कार्यान्वित है:

पंक्तियों बनाने के "ग्रिड" की तरह, मैं प्रयोग किया जाता है "ConstraintLayout Chains"। प्रत्येक ConstraintLayout श्रृंखला में पंक्तियों की संख्या समान होनी चाहिए, इसलिए ऑटो वितरण पंक्तियों को सही ढंग से संरेखित करेगा। (हालांकि वे उपयोग नहीं किए जाने पर खाली या छुपा रह सकते हैं)।

xml gist