android - tag - tablayout viewpager

¿Cómo se usa TabItem cuando se coloca en el diseño XML?

Question

La documentación de TabLayout da un ejemplo de anidación de TabItem directamente dentro de TabLayout así:

<android.support.design.widget.TabLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.design.widget.TabItem
android:text="@string/tab_text"/>
<android.support.design.widget.TabItem
android:icon="@drawable/ic_android"/>
</android.support.design.widget.TabLayout>

Pero no da ningún ejemplo de cómo se podría usar esto en la práctica, y la documentación de TabItem dice:

Esta vista no se agrega realmente a TabLayout, es solo un dummy que permite configurar el texto, el icono y el diseño personalizado de los elementos de una pestaña.

Entonces, ¿para qué es TabItem ? Después de buscar en Google, no puedo encontrar un solo ejemplo de alguien que defina TabItems en XML. ¿Hay alguna forma de configurar una actividad con pestañas usando TabItem en el archivo de recursos como se muestra arriba?

Answer 1

Esto parece ser una adición relativamente reciente a la biblioteca de diseño, aparentemente agregada en la versión 23.2.0, aunque no se menciona en el historial de revisiones . Su funcionalidad es bastante básica, y los únicos atributos que parece usar son los tres que figuran en sus docs : text , icon y layout .

Según las pruebas, parece que es básicamente un acceso directo XML para crear una nueva Tab y configurar su texto, icono y View personalizada, como se haría normalmente en el código. Cuando dice "Esta vista no se agrega realmente a TabLayout", creo que está pensado para sugerir que no es una View en el sentido normal, en el que no puede establecer ningún tipo de atributo de diseño estándar, como layout_width o background . Simplemente sirve para hacer que TabLayout cree una nueva Tab para cada elemento de TabItem , y llame a setText() , setIcon() y setCustomView() consecuencia.

Por ejemplo, para agregar una Tab en el código, generalmente haríamos algo como esto:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
// Add Tab
TabLayout.Tab tab = tabLayout.newTab();
tab.setCustomView(R.layout.tab);
tab.setText("Tab 1");
tab.setIcon(R.drawable.ic_launcher);
tabLayout.addTab(tab);

Mientras que ahora podemos reemplazar todo después del comentario anterior, agregando un elemento de TabItem en el diseño.

<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout="@layout/tab"
android:text="Tab 1"
android:icon="@drawable/ic_launcher" />
</android.support.design.widget.TabLayout>

Tenga en cuenta que todavía se aplican los mismos requisitos para el diseño de View personalizado. Es decir, el TextView para el texto debe tener el ID de recurso del sistema @android:id/text1 , y el ImageView para el icono debe tener el ID @android:id/icon . Como ejemplo, el R.layout.tab de arriba:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView android:id="@android:id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:id="@android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

Answer 2

Rápida adición a @Mikes respuesta muy útil:

Android Studio ahora tiene una plantilla sobre cómo usar un TabLayout con la configuración de TabItem en un diseño XML. Cree todos los archivos necesarios con "Nuevo> Actividad> Actividad con pestañas" y elija "Fichas de la barra de acción (con ViewPager)" como se muestra en la captura de pantalla:

Si desea ajustar el aspecto de TabItem sin una vista personalizada: use los recursos vectoriales blancos como el android:icon y tíntelos con un selector (que ofrezca diferentes colores según android:state_selected )

El color de la línea debajo de la pestaña seleccionada actualmente se establece como app:tabIndicatorColor en la etiqueta TabLayout .

Me tomó un tiempo hacerlo funcionar, por lo que los pasos completos se convirtieron en una respuesta tan larga que no quiero copiarlos aquí. Puede encontrar mi respuesta más detallada con el código completo en:

https://.com/a/49603559/414581