Jak umieścić poniżej najniższego z dwóch widoków w ConstraintLayout?

Question

Mam dwa widoki nagłówka, HeaderViewA i HeaderViewB. Widoki te mogą mieć dowolną kombinację widoczności: visible lub .

trzeba BigView być umieszczony podnajniższy którejkolwiek HeaderViewA/HeaderViewB.

Czy jest to możliwe bez zagnieżdżenia w ConstraintLayout?

Answer 1

Teraz jest to możliwe z klasą Barrier, wprowadzoną w szablonie ograniczeń v1.1.0.

Więc oto rozwiązanie dla konkretnego przypadku:

<?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" 
    tools:context="com.example.eugene.test10.MainActivity"> 
    <TextView 
     android:id="@+id/textView1" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:background="#EEEEEE" 
     android:text="TEXT_VIEW_1" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintRight_toLeftOf="@+id/textView2"/> 

    <TextView 
     android:id="@+id/textView2" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:background="#DDDDDD" 
     android:text="TEXT_VIEW_2" 
     android:visibility="gone" 
     app:layout_constraintLeft_toRightOf="@+id/textView1" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" /> 

    <android.support.constraint.Barrier 
     android:id="@+id/labelBarrier" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:barrierDirection="bottom" 
     app:constraint_referenced_ids="textView1,textView2" /> 

    <TextView 
     android:id="@+id/textView3" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:background="#CCCC00" 
     android:text="TEXT_VIEW_3" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/labelBarrier" /> 

</android.support.constraint.ConstraintLayout> 

wyniki Here're korzystania z tego układu:

Można odwołać ten przewodnik krok po kroku na Codelab https://codelabs.developers.google.com/codelabs/constraint-layout/#10.

Answer 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:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <TextView 
     android:id="@+id/header_view_a" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:background="@android:color/holo_orange_light" 
     android:gravity="center" 
     android:text="HeaderViewA " 
     android:layout_marginBottom="@dimen/sixteenDP" 
     android:textSize="30sp" 
     app:layout_constraintBottom_toTopOf="@+id/guideline" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="@+id/header_view_b" 
     app:layout_constraintEnd_toStartOf="@+id/header_view_b" 
     app:layout_constraintVertical_bias="0" 
     app:layout_constraintWidth_default="wrap" /> 

    <TextView 
     android:id="@+id/header_view_b" 
     android:layout_width="wrap_content" 
     android:layout_height="0dp" 
     android:background="@android:color/holo_green_light" 
     android:gravity="center" 
     android:text="HeaderViewB" 
     android:textAlignment="center" 
     android:textSize="30sp" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintBottom_toTopOf="@id/guideline" 
     app:layout_constraintStart_toEndOf="@+id/header_view_a"/> 

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

    <TextView 
     android:id="@+id/big_view" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginBottom="8dp" 
     android:background="@android:color/holo_blue_dark" 
     android:gravity="center" 
     android:text="BigView" 
     android:textAlignment="center" 
     android:textSize="@dimen/list_item_height" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="@+id/guideline" 
     app:layout_constraintVertical_bias="1.0"/> 

</android.support.constraint.ConstraintLayout> 

Watch out do app:layout_constraintWidth_default="wrap" (z szerokości zestawu do 0DP). Jeśli zostanie ustawiony, widget będzie miał taki sam rozmiar, jak przy użyciu wrap_content, ale będzie ograniczony przez ograniczenia (tj. Nie będzie się rozszerzać poza nie) i app:layout_constraintVertical_bias="1.0". Użyj odchylenia, aby przyciągnąć BigView na spód jego rodzica.