¿Te sientes tan vago como yo? Bueno, ¡todo el código anterior se convierte en una biblioteca!
Uso
Agregue lo siguiente en su gradle:
implementation 'com.chabbal:slidingdotsplash:1.0.2'
Agregue lo siguiente a su diseño de Actividad o Fragmento.
Ya había votado antes de hacer la pregunta, porque ya me ayudó mucho, pero ahora desearía poder votar +2 o +100 :) porque agregar onPageChangeListener funcionó perfectamente para mí. Y solo para dejar en claro a cualquiera que pueda usar esto, debe hacer sus actualizaciones solo en la devolución de llamada onPageSelected, agregar la actualización en la devolución de llamada onPageScrolled lo hace desordenado, comienza la actualización tan pronto como comienza a desplazarse, lo que no es visualmente bueno!
Mohamed Hamdaoui
1
¿Por qué necesitamos un TabLayout?
winklerrr
14
Desea usar com.google.android.material.tabs.TabLayouten versiones más recientes
schlenger
2
Actualización: eso funciona pero debe usar nuevos componentes: androidx.viewpager.widget.ViewPager y com.google.android.material.tabs.TabLayout
dreinoso
2
El XML dibujable anterior se ve raro hasta que cambié de forma ring. Parece que el anillo también se usa en la biblioteca slidedotsplash en lugar de ovalado.
Esta no es realmente una gran solución, ya que debes saber exactamente cuántas páginas usarás. Tan pronto como agregue o elimine una página, tendrá problemas.
FrostRocket
3
No luches contra el marco. Android tiene herramientas para hacer esto como TabLayout, no hay razón para reinventar la rueda.
Creé una biblioteca para abordar la necesidad de un indicador de página en un ViewPager. Mi biblioteca contiene una vista llamada DotIndicator. Para usar mi biblioteca, agréguelo compile 'com.matthew-tamlin:sliding-intro-screen:3.2.0'a su archivo de compilación de gradle.
La Vista se puede agregar a su diseño agregando lo siguiente:
El código anterior reproduce perfectamente la funcionalidad de los puntos en la pantalla de inicio de Google Launcher, sin embargo, si desea personalizarlo aún más, se pueden agregar los siguientes atributos:
app:unselectedDotDiametery app:selectedDotDiameterpara establecer los diámetros de los puntos
app:unselectedDotColory app:selectedDotColorpara establecer los colores de los puntos
app:spacingBetweenDots para cambiar la distancia entre los puntos
app:dotTransitionDuration para establecer el tiempo para animar el cambio de pequeño a grande (y viceversa)
Además, la vista se puede crear mediante programación mediante:
DotIndicator indicator =newDotIndicator(context);
Existen métodos para modificar las propiedades, similares a los atributos. Para actualizar el indicador para mostrar una página diferente según lo seleccionado, simplemente llame al método indicator.setSelectedItem(int, true)desde adentro ViewPager.OnPageChangeListener.onPageSelected(int).
Aquí hay un ejemplo de ello en uso:
Si está interesado, la biblioteca en realidad fue diseñada para hacer pantallas de introducción como la que se muestra en el gif anterior.
Error obtenido en indicator.setSelectedItem (posición, verdadero); IndexOutOfBoundsException
Dixit Panchal
¿Cual version? Pensé que solucioné eso en 3.0.1, ¿también cuáles eran sus valores para indicator.size () y position?
Helios
Gran biblioteca! Sin embargo, ¿hay una forma más elegante de actualizar selectedItem y numberOfItems al mismo tiempo? Dependiendo de cuál sea más grande, el orden cambia, de lo contrario, se lanza una excepción IndexOutOfBounds. Ver esta esencia .
vsp
@vsp DotIndicator implementa la interfaz SelectionIndicator, lo que significa que si tiene dos métodos útiles que pueden resolver su problema: int getNumberOfItems()y void setNumberOfItems(). En lugar de detectar la excepción, podría hacer algo como esto gist.github.com/MatthewTamlin/761c7338d271af29526edc7859480aef .
Helios
Para cualquiera que no siguiera la conversación esencial, en realidad había un error que ahora se ha solucionado. 3.0.2 es la última versión a partir de ahora.
Helios
18
ViewPagerIndicator no se ha actualizado desde 2012 y recibió varios errores que nunca se solucionaron.
Finalmente encontré una alternativa con esta biblioteca de luces que muestra buenos puntos para el viewpager, aquí está el enlace:
Pensé en publicar una solución más simple para el problema anterior y los números de los indicadores se pueden cambiar dinámicamente con solo cambiar un valor variable dotCounts=x lo que hice es así.
1) Cree un archivo xml en una carpeta dibujable para el indicador de página seleccionada llamado "item_selected".
3) Ahora agregue agregue esta parte del código en el lugar donde desea mostrar los indicadores para ex a continuación viewPageren su archivo XML de diseño.
4) Agregue esta función en la parte superior de su archivo de actividad donde su diseño está inflado o el archivo xml anterior está relacionado con
privateint dotsCount=5;//No of tabs or imagesprivateImageView[] dots;LinearLayout linearLayout;privatevoid drawPageSelectionIndicators(int mPosition){if(linearLayout!=null){
linearLayout.removeAllViews();}
linearLayout=(LinearLayout)findViewById(R.id.viewPagerCountDots);
dots =newImageView[dotsCount];for(int i =0; i < dotsCount; i++){
dots[i]=newImageView(context);if(i==mPosition)
dots[i].setImageDrawable(getResources().getDrawable(R.drawable.item_selected));else
dots[i].setImageDrawable(getResources().getDrawable(R.drawable.item_unselected));LinearLayout.LayoutParamsparams=newLinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT
);params.setMargins(4,0,4,0);
linearLayout.addView(dots[i],params);}}
5) Finalmente, en su método onCreate, agregue el siguiente código para hacer referencia a su diseño y manejar las posiciones seleccionadas de la página
¿Cómo puedo agregar puntos, no pestañas (como Nexus 5 launcher)?
Kfir Guy
@KfirGuy Se les conoce como indicadores. Puedes hacerlo usando la biblioteca que he mencionado anteriormente. Además, puedes verlo en acción aquí - play.google.com/store/apps/…
Joel Fernandes
@JoelFernandes parece que esa aplicación no está disponible en todos los países
34m0
9
La siguiente es mi solución propuesta.
Como necesitamos mostrar solo algunas imágenes en los buscapersonas, hemos evitado el uso engorroso de fragmentos.
Implementamos los indicadores de la página de visualización (los puntos inferiores sin ninguna biblioteca o complemento adicional)
Con solo tocar los indicadores de la página de visualización (los puntos) también está ocurriendo la navegación de la página.
No olvide agregar sus propias imágenes en los recursos.
Lo usé pero en el visor los puntos de desplazamiento no están cambiando
Aditya Vyas-Lakhan
1
Esta es la mejor respuesta.
Sandeep Londhe
1
Si alguien quiere construir un viewPagercon miniaturas como indicadores, el uso de esta biblioteca podría ser una opción:
ThumbIndicator para viewPager que también funciona con enlaces de imágenes como recursos.
Así es como hice esto, algo similar a las soluciones anteriores. Solo asegúrate de llamar al método loadDots () después de descargar todas las imágenes .
Respuestas:
No hay necesidad de tanto código.
Puedes hacer todo esto sin codificar demasiado si solo lo usas
viewpager
contablayout
.Su diseño principal:
Conecte los elementos de la IU inactividad o fragmento de la siguiente manera:
Código Java:
Eso es todo, eres bueno para ir.
Deberá crear el siguiente archivo de recursos xml en la carpeta dibujable .
tab_indicator_selected.xml
tab_indicator_default.xml
tab_selector.xml
¿Te sientes tan vago como yo? Bueno, ¡todo el código anterior se convierte en una biblioteca! Uso Agregue lo siguiente en su gradle:
implementation 'com.chabbal:slidingdotsplash:1.0.2'
Agregue lo siguiente a su diseño de Actividad o Fragmento.Crear una matriz de enteros en,
strings.xml
por ejemplo,¡Hecho! Adicional para escuchar los cambios de página, use el enlace de
addOnPageChangeListener(listener);
Github .fuente
com.google.android.material.tabs.TabLayout
en versiones más recientesring
. Parece que el anillo también se usa en la biblioteca slidedotsplash en lugar de ovalado.Mi solución hecha a mano:
En el diseño:
Y en la actividad
fuente
Layout
solo para poner un punto? Usar en suView
lugar.fuente
setOnPageChangedListener()
¡¡obsoleto!! ÚseloaddOnPageChangedListener()
ahora.Creé una biblioteca para abordar la necesidad de un indicador de página en un ViewPager. Mi biblioteca contiene una vista llamada DotIndicator. Para usar mi biblioteca, agréguelo
compile 'com.matthew-tamlin:sliding-intro-screen:3.2.0'
a su archivo de compilación de gradle.La Vista se puede agregar a su diseño agregando lo siguiente:
El código anterior reproduce perfectamente la funcionalidad de los puntos en la pantalla de inicio de Google Launcher, sin embargo, si desea personalizarlo aún más, se pueden agregar los siguientes atributos:
app:unselectedDotDiameter
yapp:selectedDotDiameter
para establecer los diámetros de los puntosapp:unselectedDotColor
yapp:selectedDotColor
para establecer los colores de los puntosapp:spacingBetweenDots
para cambiar la distancia entre los puntosapp:dotTransitionDuration
para establecer el tiempo para animar el cambio de pequeño a grande (y viceversa)Además, la vista se puede crear mediante programación mediante:
Existen métodos para modificar las propiedades, similares a los atributos. Para actualizar el indicador para mostrar una página diferente según lo seleccionado, simplemente llame al método
indicator.setSelectedItem(int, true)
desde adentroViewPager.OnPageChangeListener.onPageSelected(int)
.Aquí hay un ejemplo de ello en uso:
Si está interesado, la biblioteca en realidad fue diseñada para hacer pantallas de introducción como la que se muestra en el gif anterior.
Fuente de Github disponible aquí: https://github.com/MatthewTamlin/SlidingIntroScreen
fuente
int getNumberOfItems()
yvoid setNumberOfItems()
. En lugar de detectar la excepción, podría hacer algo como esto gist.github.com/MatthewTamlin/761c7338d271af29526edc7859480aef .ViewPagerIndicator
no se ha actualizado desde 2012 y recibió varios errores que nunca se solucionaron.Finalmente encontré una alternativa con esta biblioteca de luces que muestra buenos puntos para el
viewpager
, aquí está el enlace:https://github.com/ongakuer/CircleIndicator
¡Fácil de implementar!
fuente
Pensé en publicar una solución más simple para el problema anterior y los números de los indicadores se pueden cambiar dinámicamente con solo cambiar un valor variable
dotCounts=x
lo que hice es así.1) Cree un archivo xml en una carpeta dibujable para el indicador de página seleccionada llamado "item_selected".
2) Cree un archivo xml más para el indicador no seleccionado llamado "item_unselected"
3) Ahora agregue agregue esta parte del código en el lugar donde desea mostrar los indicadores para ex a continuación
viewPager
en su archivo XML de diseño.4) Agregue esta función en la parte superior de su archivo de actividad donde su diseño está inflado o el archivo xml anterior está relacionado con
5) Finalmente, en su método onCreate, agregue el siguiente código para hacer referencia a su diseño y manejar las posiciones seleccionadas de la página
fuente
Puede probar la biblioteca de Jake Wharton: https://github.com/JakeWharton/Android-ViewPagerIndicator
fuente
La siguiente es mi solución propuesta.
A) Siguiente es my activity_main.xml
B) pager_item.xml
C) MainActivity.java
D) CustomPagerAdapter.java
E) selecteditem_dot.xml
F) nonselecteditem_dot.xml
fuente
Si alguien quiere construir un
viewPager
con miniaturas como indicadores, el uso de esta biblioteca podría ser una opción: ThumbIndicator para viewPager que también funciona con enlaces de imágenes como recursos.fuente
Así es como hice esto, algo similar a las soluciones anteriores. Solo asegúrate de llamar al método loadDots () después de descargar todas las imágenes .
fuente