Tworzenie układu liniowego

Wypróbuj metodę Compose

Jetpack Compose to zalecany zestaw narzędzi interfejsu na Androida. Dowiedz się, jak pracować z układami w Compose.

Kolumna lub wiersz →

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

Uwaga: aby uzyskać lepszą wydajność i obsługę narzędzi, utwórz układ za pomocą ConstraintLayout. Więcej informacji o zaletach korzystania z ConstraintLayout znajdziesz w artykule Understanding the performance benefits of ConstraintLayout.

Rysunek 1. LinearLayout z 3 dziećmi ułożonymi poziomo.

Wszystkie elementy podrzędne elementu LinearLayout są ułożone jeden za drugim, więc lista pionowa ma tylko 1 element podrzędny w wierszu, niezależnie od jego szerokości. Lista pozioma ma tylko 1 wiersz wysokości i jest równa wysokości najwyższego elementu podrzędnego plus dopełnienie. Element LinearLayout uwzględnia marginesy między elementami podrzędnymi oraz wyrównanie każdego elementu podrzędnego do prawej, środka lub lewej strony.

Waga układu

LinearLayout umożliwia też przypisanie wagi do poszczególnych elementów podrzędnych za pomocą atrybutu android:layout_weight. Ten atrybut przypisuje widokowi wartość „ważności” w zależności od tego, ile miejsca zajmuje on na ekranie. Większa wartość wagi pozwala rozszerzyć widok, aby wypełnić pozostałą przestrzeń w widoku nadrzędnym. Widoki podrzędne mogą określać wartość wagi, a wszelkie pozostałe miejsce w grupie widoków jest przypisywane do widoków podrzędnych proporcjonalnie na podstawie zadeklarowanej wagi. Domyślna waga to zero.

Równy podział

Aby utworzyć układ liniowy, w którym każde dziecko zajmuje taką samą ilość miejsca na ekranie, ustaw android:layout_height każdego widoku na "0dp" w przypadku układu pionowego lub android:layout_width każdego widoku na "0dp" w przypadku układu poziomego. Następnie ustaw android:layout_weight każdego widoku na "1".

Nierówny podział

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

• Załóżmy, że masz 3 pola tekstowe: 2 z wartością wagi 1 i trzecie z domyślną wartością wagi 0. Trzecie pole tekstowe o wartości wagi 0 zajmuje tylko obszar wymagany przez jego zawartość. Pozostałe 2 pola tekstowe o wadze 1 rozszerzają się w równym stopniu, aby wypełnić przestrzeń pozostałą po zmierzeniu zawartości wszystkich 3 pól.
• Jeśli masz 3 pola tekstowe, z których 2 mają wagę 1, a trzecie – wagę 2, pozostałe miejsce po zmierzeniu zawartości wszystkich 3 pól zostanie przydzielone w ten sposób: połowa do pola o wadze 2, a druga połowa zostanie podzielona równo między pola o wadze 1.

Poniższy rysunek i fragment kodu pokazują, jak wagi układu mogą działać w aktywności „wyślij wiadomość”. Pole Do, wiersz Temat i przycisk Wyślij zajmują tylko tyle miejsca, ile potrzebują. Obszar wiadomości zajmuje pozostałą część wysokości aktywności.

Rysunek 2. Trzy pola tekstowe i przycisk w układzie pionowym.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 w przypadku każdego widoku dziecka elementu LinearLayout znajdziesz w sekcji LinearLayout.LayoutParams.