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 funkcji Utwórz

LinearLayout to grupa widoków, która wyrównuje wszystkie elementy podrzędne w jednym kierunku, w pionie lub poziomie. Kierunek układu można określić w atrybucie android:orientation.

Obraz przedstawiający układ podzielony na 3 pionowe wycinki
Rysunek 1. LinearLayout z 3 elementami podrzędnymi zorientowanymi poziomo.

Wszystkie elementy podrzędne elementu LinearLayout są układane jeden po drugim, więc pionowa lista może zawierać tylko 1 element podrzędny na wiersz, niezależnie od szerokości. Lista pozioma ma tylko 1 wiersz i wysokość najwyższego elementu podrzędnego wraz z dopełnieniem. LinearLayout uwzględnia marginesy między elementami podrzędnymi i grawitację – w prawo, do środka lub do lewej – każdego elementu podrzędnego.

Waga układu

LinearLayout umożliwia też przypisywanie wagi do poszczególnych elementów podrzędnych za pomocą atrybutu android:layout_weight. Ten atrybut nadaje widokowi „ważność” określającą ilość miejsca zajmowanego przez ten widok na ekranie. Większa wartość wagi umożliwia rozwinięcie pozostałego miejsca w widoku nadrzędnym. W widokach podrzędnych można określić wartość wagi, a pozostałe miejsce w grupie widoków jest przypisywane proporcjonalnie do ich zadeklarowanych wag. Domyślna waga to 0.

Rozkład równomierny

Aby utworzyć układ liniowy, w którym każde podrzędne miejsce zajmuje taką samą ilość miejsca na ekranie, ustaw android:layout_height każdego widoku na "0dp" w przypadku układu pionowego, a dla android:layout_width każdego widoku ustaw "0dp" na "0dp" w przypadku układu poziomego. Następnie ustaw android:layout_weight każdego widoku 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. Zobacz te przykłady:

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

Na rysunku poniżej i z fragmentu kodu możesz zobaczyć, jak mogą działać wagi układu w działaniu „wyślij wiadomość”. Pole Do, wiersz Temat i przycisk Wyślij mają odpowiednią wysokość. Obszar wiadomości zajmuje pozostałą część wysokości aktywności.

Obraz przedstawiający 3 elementy EditText oraz przycisk w układzie liniowym o orientacji pionowej.
Rysunek 2. Trzy pola tekstowe i przycisk w ustawieniu LinearLayout w orientacji pionowej.
<?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 poszczególnych widokach podrzędnych elementu LinearLayout znajdziesz tutaj: LinearLayout.LayoutParams.