Używaj ponownie układów z operatorem <include>

Wypróbuj sposób tworzenia wiadomości

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

Układy oparte na przedziałach →

Chociaż Android oferuje różne widżety, które zapewniają małe, interaktywne elementy wielokrotnego użytku, możesz też potrzebować większych komponentów, które wymagają specjalnego układu. Aby efektywnie używać kompletnych układów, użyj tagów <include> i <merge>, aby umieszczać jeden układ wewnątrz drugiego.

Dzięki temu możesz tworzyć złożone układy, np. panel z przyciskami „Tak” i „Nie” lub niestandardowy pasek postępu z tekstem opisowym. Oznacza to, że możesz wyodrębnić dowolne elementy aplikacji, które są wspólne dla wielu układów, zarządzać nimi osobno i umieszczać je w każdym układzie. Chociaż możesz tworzyć poszczególne komponenty UI, pisząc niestandardowy kodView, łatwiej jest to zrobić, używając pliku układu.

Tworzenie układu wielokrotnego użytku

Zacznij od utworzenia nowego pliku XML i zdefiniowania układu, który chcesz ponownie wykorzystać. Oto przykładowy układ, który definiuje pasek tytułu do uwzględnienia w każdym działaniu (titlebar.xml):

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/titlebar_bg"
    tools:showIn="@layout/activity_main" >

    <ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:src="@drawable/gafricalogo" />
</FrameLayout>

Element główny View musi być dokładnie taki, jak chcesz, aby wyglądał w każdym układzie, do którego chcesz go dodać.

Używanie tagu <include>

Wewnątrz układu, do którego chcesz dodać komponent wielokrotnego użytku, dodaj tag <include>. Oto na przykład układ zawierający pasek tytułu z poprzedniego przykładu:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_bg"
    android:gravity="center_horizontal">

    <include layout="@layout/titlebar"/>

    <TextView android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="@string/hello"
              android:padding="10dp" />
    ...
</LinearLayout>

Możesz też zastąpić wszystkie parametry układu (wszystkie atrybuty android:layout_*) widoku wyższego poziomu uwzględnionego układu, podając je w tagu <include>. Przykład:

<include android:id="@+id/news_title"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         layout="@layout/title"/>

Jeśli jednak chcesz zastąpić atrybuty układu za pomocą tagu <include>, zastąp też właściwości android:layout_height i android:layout_width, by pozostałe atrybuty układu zaczęły obowiązywać.

Używanie tagu <merge>

Tag <merge> pomaga wyeliminować zbędne grupy widoków w hierarchii widoków, gdy jeden układ jest zawarty w innym. Jednym z przypadków użycia funkcji <merge> jest implementacja widoku niestandardowego przez rozszerzenie widoku ViewGroup.

Jeśli na przykład układ główny jest układem pionowym LinearLayout, w którym 2 kolejne widoki mogą być używane ponownie w różnych układach, układ wielokrotnego użytku, w którym umieszczasz 2 widoki, wymaga osobnego widoku głównego. Jednak użycie innego elementu LinearLayout jako elementu głównego w przypadku układu wielokrotnego użytku spowoduje utworzenie pionowego elementu LinearLayout wewnątrz pionowego elementu LinearLayout. Zagnieżdżony element LinearLayout nie pełni żadnej funkcji i spowalnia działanie interfejsu.

Zamiast tego możesz rozszerzyć LinearLayout, aby utworzyć widok niestandardowy, i użyć pliku XML układu, aby opisać widoki podrzędne. Najwyższy tag w pliku XML to <merge>, a nie LinearLayout, jak w tym przykładzie:

<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/delete"/>

</merge>

Gdy umieścisz ten układ w innym układzie za pomocą tagu <include>, system zignoruje element <merge> i umieści 2 przyciski bezpośrednio w układzie zamiast tagu <include>.

Więcej informacji o <include> znajdziesz w artykule Zasoby układu.