Tworzenie układu liniowego

Wypróbuj sposób tworzenia wiadomości
Jetpack Compose to zalecany zestaw narzędzi UI na Androida. Dowiedz się, jak korzystać z układów w sekcji Utwórz
Kolumna lub wiersz →

LinearLayout to grupa widoków, która wyrównuje wszystkie elementy podrzędne w jednym kierunku, pionowo lub poziomo. Kierunek układu możesz określić za pomocą atrybutu android:orientation.

Obraz przedstawiający układ podzielony na 3 pionowe wycinki
Rysunek 1. Element LinearLayout z 3 elementami podrzędnymi ułożonymi poziomo.

Wszystkie elementy podrzędne elementu LinearLayout są ułożone jeden po drugim, więc pionowa lista ma tylko 1 element podrzędny na wiersz, niezależnie od szerokości. Pozioma lista składa się z tylko jednego wiersza i stanowi wysokość najwyższego elementu podrzędnego wraz z dopełnieniem. Element LinearLayout uwzględnia marginesy między dziećmi i wyrównanie grawitacji (do prawej, do środka lub do lewej) każdego elementu podrzędnego.

Waga układu

LinearLayout umożliwia też przypisywanie wagi poszczególnym elementom podrzędnym z atrybutem android:layout_weight. Ten atrybut przypisuje widokowi „ważność” miejsca, w jakim zajmuje on miejsce na ekranie. Większa wartość wagi umożliwia rozwinięcie i wypełnianie pozostałego obszaru w widoku nadrzędnym. Widoki podrzędne mogą określać wartość wagi, a pozostałe miejsce w grupie widoków jest przypisywane proporcjonalnie do nich na podstawie ich zadeklarowanej wagi. Domyślna waga to zero.

Rozkład równomierny

Aby utworzyć układ liniowy, w którym wszystkie elementy podrzędne będą zajmowały taką samą ilość miejsca na ekranie, ustaw android:layout_height każdego widoku na "0dp" w przypadku układu pionowego lub "0dp" dla układu poziomego.android:layout_width Następnie ustaw android:layout_weight każdego widoku danych na "1".

Nierówny rozkład

Możesz też tworzyć układy liniowe, w których elementy podrzędne zajmują różną ilość miejsca na ekranie. Przeanalizuj te przykłady:

  • Załóżmy, że masz 3 pola tekstowe: dwa z wartością wagi równą 1 i trzecie z domyślną wartością wagi równą 0. Trzecie pole tekstowe, o wartości wagi 0, zajmuje tylko obszar wymagany przez jego zawartość. Pozostałe 2 pola tekstowe, których wartość wagi wynosi 1, rozszerzają się równomiernie, aby wypełnić miejsce pozostałe po zmierzeniu zawartości wszystkich 3 pól.
  • Jeśli zamiast tego masz 3 pola tekstowe, z których 2 ma wartość wagi 1, a trzecie – 2, przestrzeń pozostała po zawartości wszystkich 3 pól jest przydzielona w ten sposób: połowa do pola o wartości wagi równa 2 i połowa podzielona między pola z wartością wagi równą 1.

Na rysunku i fragmencie kodu widać, jak mogą działać wagi układu podczas działania „Wyślij wiadomość”. Pole Do, wiersz Temat i przycisk Wyślij mogą mieć tylko wymaganą wysokość. Obszar wiadomości zajmuje pozostałą część wysokości działania.

Obraz przedstawiający 3 elementy EditText i przycisk w układzie liniowym w orientacji pionowej
Rysunek 2. 3 pola tekstowe i przycisk w orientacji pionowej LinearLayout. 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/to" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/subject" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:text="@string/send" />
</LinearLayout>

Szczegółowe informacje o atrybutach dostępnych dla poszczególnych widoków podrzędnych LinearLayout znajdziesz w sekcji LinearLayout.LayoutParams.