¿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
- Cómo mostrar el recuento de notificaciones en el icono del lanzador de aplicaciones
- Icono del cajón de navegación en lugar de tres líneas
- ¿Cómo cambiar el nombre de la aplicación de Android y el icono en tiempo de ejecución?
- Añadir icono de búsqueda en la barra de acción de Android
- ¿Cómo obtener iconos hdpi de la aplicación en las tabletas de Android API 11 y más (en el código java)?
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?
- Android cómo ocultar programaticamente el ícono del lanzador
- Iconos iónicos no se muestran en el simulador de Android
- Android xxx-hdpi dispositivos reales
- ¿Cómo utilizar iconos personalizados en jQuery móvil?
- Icono de la aplicación en el dispositivo es demasiado pequeño
- Colores del icono de diseño de material
- Cómo obtener la lista de todos los accesos directos instalados que se encuentran en el inicio de pantalla de inicio en android
- Directorio de iconos y pantallas splash de Cordova
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?