Embora o Android ofereça uma variedade de widgets para fornecer elementos pequenos, reutilizáveis e interativos,
também pode ser necessário reutilizar componentes maiores que exigem um layout especial. Para reutilizar layouts completos
com eficiência, use as tags <include> e <merge> para incorporar
um layout a outro.
Isso permite criar layouts complexos, como um painel de botões sim ou não ou uma barra de progresso
personalizada com texto de descrição. Isso significa que você pode extrair qualquer elemento do seu app que
seja comum em vários layouts, gerenciá-los separadamente e incluí-los em cada layout. Embora
você possa criar componentes de interface individuais gravando um View
personalizado, é possível fazer isso mais facilmente
reutilizando um arquivo de layout.
Criar um layout reutilizável
Comece criando um novo arquivo XML e definindo o layout que você quer reutilizar. Por
exemplo, este é um layout que define uma barra de título a ser incluída em cada atividade
(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>
A View raiz precisa ser exatamente como você quer que ela apareça em cada
layout em que você planeja adicionar esse layout.
Usar a tag <include>
Dentro do layout em que você quer adicionar o componente reutilizável, adicione a
tag <include>. Por exemplo, confira um layout que inclui a barra de título do
exemplo anterior:
<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>
Você também pode modificar todos os parâmetros de layout (qualquer atributo
android:layout_*) da visualização raiz do layout incluído especificando-os na
tag <include>. Isso é mostrado neste exemplo:
<include android:id="@+id/news_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="@layout/title"/>
No entanto, se você quiser modificar os atributos de layout usando a tag <include>,
substitua também android:layout_height e android:layout_width para que os
outros atributos de layout entrem em vigor.
Usar a tag <merge>
A tag <merge> ajuda a eliminar grupos de visualizações redundantes da sua hierarquia
ao incluir um layout dentro de outro. Um caso de uso de <merge> é quando você
implementa uma visualização personalizada estendendo um ViewGroup.
Por exemplo, se o layout principal for uma LinearLayout
vertical em que duas
visualizações consecutivas podem ser reutilizadas em vários layouts, o layout reutilizável em que as
duas visualizações são colocadas vai exigir a própria visualização raiz. No entanto, usar outro LinearLayout como raiz
do layout reutilizável resulta em um LinearLayout vertical dentro de um
LinearLayout vertical. O LinearLayout aninhado não tem nenhuma finalidade real e deixa
a performance da IU lenta.
Em vez disso, você pode estender um LinearLayout para criar uma visualização personalizada e usar um XML de layout
para descrever as visualizações filhas. A tag superior no XML é <merge>, e não
LinearLayout, conforme mostrado no exemplo a seguir:
<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>
Quando você inclui esse layout em outro, usando a tag
<include>, o sistema ignora o elemento <merge> e coloca os dois botões
diretamente no layout, no lugar da tag <include>.
Para mais informações sobre <include>, consulte
Recurso de layout.