Istnieją dwa sposoby osiągnięcia tego za pomocą ConstraintLayout
: łańcuchów i wytycznych . Aby używać łańcuchów, upewnij się, że używasz wersji ConstraintLayout
Beta 3 lub nowszej, a jeśli chcesz korzystać z edytora układu graficznego w Android Studio, upewnij się, że korzystasz z Android Studio 2.3 Beta 1 lub nowszego.
Metoda 1 - Korzystanie z łańcuchów
Otwórz edytor układu i dodaj swoje widżety w zwykły sposób, dodając w razie potrzeby ograniczenia nadrzędne. W tym przypadku dodałem dwa przyciski z ograniczeniami u dołu rodzica i po stronie rodzica (lewa strona dla przycisku Zapisz i prawa strona dla przycisku Udostępnij):
Zauważ, że w tym stanie, jeśli przewrócę do widoku poziomego, widoki nie wypełniają rodzica, ale są zakotwiczone w rogach:
Podświetl oba widoki, klikając Ctrl / Cmd lub przeciągając ramkę wokół widoków:
Następnie kliknij prawym przyciskiem myszy widoki i wybierz „Wyśrodkuj w poziomie”:
Tworzy to dwukierunkowe połączenie między widokami (tak definiuje się łańcuch). Domyślnie stylem łańcucha jest „spread”, który jest stosowany nawet wtedy, gdy nie jest dołączony żaden atrybut XML. Trzymając się tego stylu łańcucha, ale ustawiając szerokość naszych widoków, aby 0dp
umożliwić widokom wypełnienie dostępnej przestrzeni, równomiernie rozłożone na rodzica:
Jest to bardziej widoczne w widoku poziomym:
Jeśli wolisz pominąć edytor układu, wynikowy kod 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>
Detale:
- ustawienie szerokości każdego elementu na
0dp
lub MATCH_CONSTRAINT
umożliwienie widokom wypełnienia elementu nadrzędnego (opcjonalnie)
- widoki muszą być połączone ze sobą dwukierunkowo (po prawej stronie przycisku Zapisz łącza do przycisku udostępniania, po lewej stronie od przycisku udostępniania łącza do przycisku zapisywania), nastąpi to automatycznie za pośrednictwem edytora układu po wybraniu opcji „Wyśrodkuj w poziomie”
- pierwszy widok w łańcuchu może określać styl łańcucha za pomocą
layout_constraintHorizontal_chainStyle
, patrz dokumentacja dla różnych stylów łańcucha, jeśli pominięto styl łańcucha, domyślną wartością jest „rozłożenie”
- ciężar łańcucha można regulować za pomocą
layout_constraintHorizontal_weight
- ten przykład dotyczy łańcucha poziomego, istnieją odpowiednie atrybuty dla łańcuchów pionowych
Metoda 2 - Korzystanie z wytycznych
Otwórz układ w edytorze i kliknij przycisk wskazówek:
Następnie wybierz „Dodaj wytyczne pionowe”:
Pojawi się nowa wytyczna, która domyślnie będzie prawdopodobnie zakotwiczona po lewej stronie w wartościach względnych (oznaczonych strzałką skierowaną w lewo):
Kliknij strzałkę skierowaną w lewo, aby przełączyć ją na wartość procentową, a następnie przeciągnij prowadnicę do znaku 50%:
Wytycznej można teraz używać jako zakotwiczenia dla innych widoków. W moim przykładzie dołączyłem prawą stronę przycisku zapisywania i lewą stronę przycisku udostępniania do wytycznych:
Jeśli chcesz, aby widoki wypełniały dostępne miejsce, ograniczenie powinno być ustawione na „Dowolny rozmiar” (faliste linie biegnące poziomo):
(To jest to samo, co ustawienie layout_width
na0dp
).
Wytyczne można również utworzyć w XML dość łatwo, zamiast za pomocą edytora układu:
<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" />
Aby utworzyć 2 widoki w tej samej linii, o równej szerokości, wystarczy zdefiniować
Uwaga
MATCH_CONSTRAINT
)button1
ibutton2
musi jak powyżejWynik
WIĘCEJ
Jeśli chcesz mieć
View1
większy rozmiar niżView2
możesz użyćweight
lubpercent
.Przykład:
View1
szerokość = 2 *View2
szerokość użyj wagiWynik
Na przykład
View1
szerokość = 2 *View2
szerokość użyj procentuWynik
źródło
Cóż, jeśli to komuś pomoże
kluczem jest tu
app:layout_constraintHorizontal_weight="1"
inajlepiej o układzie ograniczeniem jest to, że obsługuje zależność cykliczna i tutaj jest to, co mam zrobić używając dokładnie tego.
Na pierwsze dziecko
app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"
Na drugie dziecko
app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"
tutaj jest pełne demo
źródło
Powinieneś przeczytać o obciążonych łańcuchach. Przykład kodu jest tutaj.
Tak ustawić
android:layout_width="0dp"
,app:layout_constraintHorizontal_weight="1"
a następnie połączyć każdy widok z sąsiadów, takich jak:źródło
ConstraintLayout
, i tylko pierwsza odpowiedź nie wystarczyła, aby uzyskać powyższy obrazek.Gdy już masz swoje powiązane elementy, nadal możesz używać na nich ciężarów, takich jak układ względny, aby zachować je równomiernie. Poniższy przykład pokazuje, jak zachować je w równych odstępach z różnymi rozmiarami textViews.
źródło