równomiernie rozmieszczając widoki wykorzystujące ConstraintLayout

Question

Typowym zastosowaniem LinearLayout jest, aby równomiernie widoki (waga) przestrzeń, na przykład:

Jak wdrożyć równomiernie rozmieszczone widoki jak ten przy użyciu nowego ConstraintLayout?

ConstraintLayout linki odsyłające: blog post, I/O session video

Answer 1

Istnieją dwa sposoby, aby tego dokonać za pomocą ConstraintLayout: Chains i Guidelines. Aby użyć łańcuchów, upewnij się, że używasz ConstraintLayout Beta 3 lub nowszego, a jeśli chcesz użyć edytora układu wizualnego w Android Studio, upewnij się, że używasz Androida Studio 2.3 Beta 1 lub nowszego.

Metoda 1 - Korzystanie Łańcuchy

otworzyć edytor układ i dodać widgety normalnie, dodając ograniczenia rodzicielskich, ile potrzeba. W tym przypadku, dodałem dwa przyciski z ograniczeniami do dołu rodzica i strony rodzica (po lewej stronie na przycisk Zapisz i prawej stronie na przycisk Share):

pamiętać, że w tym stanie gdybym przerzucić do widoku poziomym, widoki nie wypełnić rodzic ale są przymocowane do narożników:

Highlight obu poglądów, albo przez Ctrl/Cmd kliknięcie lub przeciągając ramkę wokół poglądów:

Następnie kliknij prawym przyciskiem myszy na poglądach i wybierz „Centrum poziomo”:

To ustawia dwukierunkowego połączenia pomiędzy widokami (co jest jak łańcuch jest zdefiniowana) . Domyślnie styl łańcucha to "spread", który jest stosowany nawet wtedy, gdy nie ma dołączonego atrybutu XML.Trzyma się tego stylu łańcucha ale ustawienie szerokości naszych poglądów 0dp pozwala widoki wypełnić dostępną przestrzeń, rozkładając równomiernie dominującej:

Jest to bardziej widoczne w widoku poziomym:

Jeśli wolisz, aby przejść do edytora układu, wynikające XML będzie wyglądać następująco:

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

Szczegóły:

• ustawień szerokość każdego elementu do 0dp lub MATCH_CONSTRAINT pozwala widoki wypełnić rodzic (opcjonalnie)
• poglądy muszą być powiązane ze sobą dwukierunkowo (prawo zapisać linki przycisk do przycisku akcji, lewy przycisku przycisku udostępniania, aby zapisać przycisk), nastąpi to automatycznie za pomocą edytora układu, wybierając "Wyśrodkuj w poziomie"
• pierwszy widok w łańcuchu może określać styl łańcucha za pomocą layout_constraintHorizontal_chainStyle, patrz documentation dla różnych stylów łańcucha, jeśli styl łańcucha jest pomijany, domyślnie "spread"
• ważenie łańcucha może być regulowana poprzez layout_constraintHorizontal_weight
• tym przykładzie jest na poziomej łańcucha są odpowiednie atrybuty sieci pionowych

metoda 2 - za pomocą wytyczną

otwarty Twój układ w edytorze i kliknij przycisk wytycznej:

Następnie wybierz „Dodaj Vertical wytyczną”:

Pojawi się nowe wytyczne, które domyślnie prawdopodobnie zostanie zakotwiczona w lewo w wartościach względnych (oznaczone lewej stoi strzałką):

lewa strzałka do kierunku jazdy, aby przełączyć się na wartość procentową, a następnie przesunięcia wytyczne do kreski 50%:

Ta prowadnica może być teraz używana jako kotwica dla innych widoków. W moim przykładzie załączeniu prawej stronie przycisku Zapisz i lewego przycisku zakładowego do wytycznej:

Jeśli chcesz widoki, aby wypełnić dostępną przestrzeń następnie ograniczenie powinno być ustawione na "Każdy rozmiar" (zniekształcone poziome linie)

(to jest takie samo jak ustawianie layout_width do 0dp).

wskazówką mogą być również tworzone w XML dość łatwo raczej niż przy użyciu edytora układ:

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

Answer 2

Dobrze jeśli to pomoże ktoś

na klucza jest tutaj app:layout_constraintHorizontal_weight="1" i
najlepiej o układzie ograniczeń jest to, że obsługuje zależność cykliczną i tutaj właśnie to zrobiłem, używając tego samego.

Dla pierwszego dziecka
app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"

Dla drugiego dziecka

app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"

Oto pełna demo

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