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

Wypróbuj metodę Compose

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

Układy oparte na przedziałach →

Android oferuje różne widżety, które zapewniają małe, wielokrotnego użytku elementy interaktywne, ale możesz też potrzebować ponownie użyć większych komponentów wymagających specjalnego układu. Aby efektywnie ponownie wykorzystywać kompletne układy, użyj tagów <include> i <merge> do osadzania jednego układu w innym.

Dzięki temu możesz tworzyć złożone układy, takie jak panel przycisków „Tak” lub „Nie” czy niestandardowy pasek postępu z tekstem opisu. Oznacza to, że możesz wyodrębnić dowolne elementy aplikacji, które są wspólne dla wielu układów, zarządzać nimi oddzielnie i uwzględniać je w każdym układzie. Poszczególne komponenty interfejsu możesz tworzyć, pisząc niestandardowy kodView, ale łatwiej jest to zrobić, ponownie wykorzystując plik układu.

Tworzenie układu do wielokrotnego użytku

Zacznij od utworzenia nowego pliku XML i zdefiniowania układu, którego chcesz używać ponownie. Na przykład poniższy układ definiuje pasek tytułu, który ma być uwzględniany 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 wyświetlał się w każdym układzie, w którym planujesz go dodać.

Uwaga: atrybut tools:showIn w poprzednim pliku XML jest atrybutem specjalnym, który jest używany tylko w czasie projektowania w Androidzie Studio i jest usuwany podczas kompilacji. Określa układ, który zawiera ten plik, dzięki czemu możesz wyświetlać jego podgląd i edytować go tak, jak wygląda po umieszczeniu w układzie nadrzędnym.

Używanie tagu <include>

W układzie, do którego chcesz dodać komponent wielokrotnego użytku, dodaj tag <include>. Oto przykład układu, który zawiera 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, czyli wszystkie atrybuty android:layout_*, widoku głównego dołączonego układu, określając je w tagu <include>. Pokazuje to poniższy 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ż tagi android:layout_height i android:layout_width, aby inne atrybuty układu zaczęły działać.

Używanie tagu <merge>

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

Jeśli np. główny układ to układ pionowyLinearLayout, w którym 2 kolejne widoki można ponownie wykorzystać w wielu układach, to układ wielokrotnego użytku, w którym umieszczasz te 2 widoki, wymaga własnego widoku głównego. Użycie innego elementu LinearLayout jako elementu głównego w układzie wielokrotnego użytku spowoduje jednak, że w pionowym elemencie LinearLayout znajdzie się pionowy element LinearLayout. Zagnieżdżony element LinearLayout nie ma żadnego praktycznego zastosowania i spowalnia działanie interfejsu.

Zamiast tego możesz rozszerzyć LinearLayout, aby utworzyć widok niestandardowy, i użyć pliku XML układu, aby opisać jego widoki podrzędne. Główny 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>

Jeśli 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, w miejsce tagu <include>.

Więcej informacji o <include> znajdziesz w sekcji Zasób układu.