¿Por qué parpadean los iconos / textos de las lengüetas de TabLayout al pasar entre páginas?
Fondo
He utilizado la biblioteca PagerSlidingTabStrip durante mucho tiempo, para mostrar pestañas encima de un ViewPager.
Recientemente, tuve la tarea de establecer iconos (usando selectores, con estados seleccionados-vs-no seleccionados) en lugar de los textos para las pestañas, y así lo hice. Sin embargo, parece que la biblioteca no podía manejarlo bien, mostrando pestañas vacías a veces, así que me mudé a TabLayout , que es parte de la biblioteca de diseño de Google
- Aplicación de Android que crea dos iconos de lanzador
- Iconos translúcidos en ActionBar cuando está inhabilitado: ¿sólo en mi teléfono?
- Añadir icono de búsqueda en la barra de acción de Android
- ¿Cómo agregar un icono clicable a la esquina más a la izquierda de la barra de actividad en Android?
- ¿Por qué mi aplicación de Android no muestra el icono y el texto en ActionBar?
El problema
He notado algunas soluciones de cómo agregar iconos al TabLayout, pero cada uno de ellos tiene uno o más de esos problemas:
- No se muestran iconos
- Se muestran iconos, pero pueden parpadear de vez en cuando, especialmente cuando se utiliza un selector para ellos con "exitFadeDuration" que se está configurando, o cuando se pasa rápido
- Al hacer clic en las pestañas no cambia la página actual del viewPager.
El código
El código que he usado es de la muestra cheesesquare , en el archivo MainActivity.java. Es bastante básico:
final TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); ... tabLayout.setupWithViewPager(viewPager);
Las soluciones que he probado son:
-
Estableciendo un icono para cada ficha (y eliminar el código "getPageTitle" del adaptador):
for (int i = 0; i < tabLayout.getTabCount(); i++) tabLayout.getTabAt(i).setIcon(...);
También intenté agregar setOnTabSelectedListener para cuando no utilicé un selector.
Esta solución produce un efecto de parpadeo (problema # 2).
-
Extender TabLayout para admitir iconos o implementar TabViewProvider, como se muestra aquí .
Extender TabLayout no muestra iconos en absoluto (problema # 1), y la implementación de TabViewProvider tiene el problema de los iconos parpadeantes (bastante raro sin embargo).
-
Para getPageTitle, devuelve una SpannableString que tiene el icono en ella, como se muestra aquí . Esto no muestra los iconos en absoluto para mí.
Recuerdo que probé otras soluciones también, pero también tenían problemas como he mencionado.
La pregunta
¿Cuál es la forma correcta de establecer iconos para las pestañas?
¿Existe una manera oficial de lograr esto? Me gustaría tener al menos unas imágenes seleccionadas y no seleccionadas para cada ficha. La transición de cuando se selecciona es una buena bonificación, que he esperado lograr, ya que se ve mejor de esta manera.
¿Por qué parpadean los iconos de todos modos? He notado que ocurre incluso para los textos …
¿Hay quizá una solución?
- El icono de la aplicación no se muestra en la barra de acción
- Cómo obtener la lista de todos los accesos directos instalados que se encuentran en el inicio de pantalla de inicio en android
- Tamaño del icono de barra de acciones
- Ocultar icono del lanzador de aplicaciones en la barra de título cuando se inicia la actividad en android
- Cómo cambiar el color del icono de inicio de la barra de herramientas
- Cómo eliminar la animación de iconos para la vista de navegación inferior en android
- ListView con ArrayAdapter y ViewHolder añadiendo iconos al ítem equivocado
- Android cómo ocultar programaticamente el ícono del lanzador
Parece ser un problema conocido, y que sucede también para los textos:
https://code.google.com/p/android/issues/detail?id=180454
Se arreglará en la próxima versión de la biblioteca.
Una solución es usar versiones anteriores, por ahora:
com.android.support:design:22.2.0
EDIT: esto no es una buena solución, ya que los iconos pueden desaparecer en algunos casos (creo que una combinación de cambio de orientación y barrido).
EDIT: Creo que no desaparece, sino más bien como cambiar su color a otra cosa que no existe en el selector que le he dado (que tiene sólo 2 estados: seleccionado y predeterminado).
EDIT: ok, encontró una solución para los iconos.
-
Utilice la versión anterior (22.2.0) como he mencionado anteriormente.
-
Debe evitar el uso de selectores para los iconos. Utilice los ids de recursos de imagen exactos en su lugar:
private static final int[] TAB_ICONS_UNSELECTED = {... }; private static final int[] TAB_ICONS_SELECTED = {... };
-
Actualizar los iconos en función de las selecciones de página, como tal:
mViewPager.addOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(final int position) { for (int i = 0; i < tabLayout.getTabCount(); ++i) tabLayout.getTabAt(i).setIcon(i != position ? TAB_ICONS_UNSELECTED[i] : TAB_ICONS_SELECTED[i]); } });
Además, recuerde llamar alrededor del mismo bucle al inicializar TabLayout. Algo como eso:
for (int i = 0; i < tabLayout.getTabCount(); ++i) tabLayout.getTabAt(i).setIcon(i != mViewPager.getCurrentItem() ? TAB_ICONS_UNSELECTED[i] : TAB_ICONS_SELECTED[i]);
Creo que esto también debe arreglar el problema para los textos y no sólo los iconos.
EDIT: parece que v23 lo arreglará, y que estará disponible muy pronto.
- Compatibilidad con múltiples vistas de superposición de superficies activas en Android
- ¿Cómo puedo crear mi propia tienda de aplicaciones para Android?