AnimatedBottomBar
vailable on Maven Central
Una vista de navegación BottomBar personalizable y fácil de usar con elegantes animaciones, compatible con ViewPager, ViewPager2, NavController e insignias.
Por Joery Droppers
Descargue la aplicación de juegos de Google Play. Con esta aplicación puede probar todas las funciones e incluso generar XML con la configuración seleccionada.
Esta biblioteca está disponible en Maven Central, instálela agregando la siguiente dependencia a su build.gradle :
implementation ' nl.joery.animatedbottombar:library:1.1.0 'Las versiones 1.0.x solo se pueden usar con jCenter, las versiones 1.1.x y posteriores se pueden usar con Maven Central.
Defina AnimatedBottomBar en su diseño XML con atributos personalizados.
< nl .joery.animatedbottombar.AnimatedBottomBar
android : id = " @+id/bottom_bar "
android : background = " #FFF "
android : layout_width = " match_parent "
android : layout_height = " wrap_content "
app : abb_selectedTabType = " text "
app : abb_indicatorAppearance = " round "
app : abb_indicatorMargin = " 16dp "
app : abb_indicatorHeight = " 4dp "
app : abb_tabs = " @menu/tabs "
app : abb_selectedIndex = " 1 " /> Cree un archivo llamado tabs.xml en la carpeta res/menu/ resources:
< menu xmlns : android = " http://schemas.android.com/apk/res/android " >
< item
android : id = " @+id/tab_home "
android : icon = " @drawable/home "
android : title = " @string/home " />
< item
android : id = " @+id/tab_alarm "
android : icon = " @drawable/alarm "
android : title = " @string/alarm " />
< item
android : id = " @+id/tab_bread "
android : icon = " @drawable/bread "
android : title = " @string/bread " />
< item
android : id = " @+id/tab_cart "
android : icon = " @drawable/cart "
android : title = " @string/cart " />
</ menu >Reciba notificaciones cuando la pestaña seleccionada cambie configurando devoluciones de llamada:
bottom_bar.onTabSelected = {
Log .d( " bottom_bar " , " Selected tab: " + it.title)
}
bottom_bar.onTabReselected = {
Log .d( " bottom_bar " , " Reselected tab: " + it.title)
}O configure un oyente si necesita información más detallada:
bottom_bar.setOnTabSelectListener( object : AnimatedBottomBar . OnTabSelectListener {
override fun onTabSelected (
lastIndex : Int ,
lastTab : AnimatedBottomBar . Tab ? ,
newIndex : Int ,
newTab : AnimatedBottomBar . Tab
) {
Log .d( " bottom_bar " , " Selected index: $newIndex , title: ${newTab.title} " )
}
// An optional method that will be fired whenever an already selected tab has been selected again.
override fun onTabReselected ( index : Int , tab : AnimatedBottomBar . Tab ) {
Log .d( " bottom_bar " , " Reselected index: $index , title: ${tab.title} " )
}
})Breve descripción general sobre cómo administrar pestañas usando código.
// Creating a tab by passing values
val bottomBarTab1 = AnimatedBottomBar .createTab(drawable, " Tab 1 " )
// Creating a tab by passing resources
val bottomBarTab2 = AnimatedBottomBar .createTab( R .drawable.ic_home, R .string.tab_2, R .id.tab_home) // Adding a tab at the end
AnimatedBottomBar .addTab(bottomBarTab1)
// Add a tab at a specific position
AnimatedBottomBar .addTabAt( 1 , bottomBarTab2) // Removing a tab by object reference
val tabToRemove = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .removeTab(tabToRemove)
// Removing a tab at a specific position
AnimatedBottomBar .removeTabAt(tabPosition)
// Removing a tab by the given ID resource
AnimatedBottomBar .removeTabById( R .id.tab_home) // Selecting a tab by object reference
val tabToSelect = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .selectTab(tabToSelect)
// Selecting a tab at a specific position
AnimatedBottomBar .selectTabAt( 1 )
// Selecting a tab by the given ID resource
AnimatedBottomBar .selectTabById( R .id.tab_home) // Disabling a tab by object reference
val tabToDisable = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .setTabEnabled(tabToDisable, false ) // Use true for re-enabling the tab
// Disabling a tab at a specific position
AnimatedBottomBar .setTabEnabledAt( 1 , false )
// Disabling a tab by the given ID resource
AnimatedBottomBar .setTabEnabledById( R .id.tab_home, false )Esto podría resultar útil, por ejemplo, restringir el acceso a un área premium. Puede utilizar una devolución de llamada o un oyente más detallado:
bottom_bar.onTabIntercepted = {
if (newTab.id == R .id.tab_pro_feature && ! hasProVersion) {
// e.g. show a dialog
false
}
true
}Oyente detallado:
bottom_bar.setOnTabInterceptListener( object : AnimatedBottomBar . OnTabInterceptListener {
override fun onTabIntercepted (
lastIndex : Int ,
lastTab : AnimatedBottomBar . Tab ? ,
newIndex : Int ,
newTab : AnimatedBottomBar . Tab
): Boolean {
if (newTab.id == R .id.tab_pro_feature && ! hasProVersion) {
// e.g. show a dialog
return false
}
return true
}
}) Instrucciones sobre cómo configurar insignias para pestañas, se debe proporcionar un objeto AnimatedBottomBar.Badge a BottomBar; tenga en cuenta que también es posible agregar insignias sin texto.
// Adding a badge by tab reference
val tabToAddBadgeAt = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .setBadgeAtTab(tabToAddBadgeAt, AnimatedBottomBar . Badge ( " 99 " ))
// Adding a badge at a specific position
AnimatedBottomBar .setBadgeAtTabIndex( 1 , AnimatedBottomBar . Badge ( " 99 " ))
// Adding a badge at the given ID resource
AnimatedBottomBar .setBadgeAtTabId( R .id.tab_home, AnimatedBottomBar . Badge ( " 99 " )) // Removing a badge by tab reference
val tabToRemoveBadgeFrom = AnimatedBottomBar .tabs[ 1 ]
AnimatedBottomBar .clearBadgeAtTab(tabToRemoveBadgeFrom)
// Removing a badge at a specific position
AnimatedBottomBar .clearBadgeAtTabIndex( 1 , AnimatedBottomBar . Badge ( " 99 " ))
// removing a badge at the given ID resource
AnimatedBottomBar .clearBadgeAtTabId( R .id.tab_home, AnimatedBottomBar . Badge ( " 99 " ))Además, también existe la posibilidad de diseñar insignias individualmente.
AnimatedBottomBar . Badge (
text = " 99 " ,
backgroundColor = Color . RED ,
textColor = Color . GREEN ,
textSize = 12 .spPx // in pixels
) Es fácil usar BottomBar con ViewPager o ViewPager2, simplemente puede usar el método setupWithViewPager() . Tenga en cuenta que el número de pestañas y páginas de ViewPager deben ser idénticos para que funcione correctamente.
Uso
// For ViewPager use:
bottom_bar.setupWithViewPager(yourViewPager)
// For ViewPager2 use:
bottom_bar.setupWithViewPager2(yourViewPager2)Una descripción general de todas las opciones de configuración. También se puede acceder a todas las opciones y configurarlas mediante programación, por su nombre equivalente.
| Atributo | Descripción | Por defecto |
|---|---|---|
| abb_tabs | Las pestañas se pueden definir en un archivo de menú (recurso de menú), en la carpeta res/menu/ resource. El icono y el atributo de título son obligatorios. De forma predeterminada, todas las pestañas están habilitadas, configure android:enabled en falso para deshabilitar una pestaña. < menu xmlns : android = " http://schemas.android.com/apk/res/android " >
< item
android : id = " @+id/tab_example "
android : icon = " @drawable/ic_example "
android : title = " @string/tab_example "
android : enabled = " true|false " />
...etc
</ menu > | |
| abb_selectedÍndice | Defina el índice de pestaña seleccionado predeterminado. | |
| abb_selectedTabId | Defina la pestaña seleccionada predeterminada por su ID, por ejemplo @id/tab_id |
| Atributo | Descripción | Por defecto |
|---|---|---|
| abb_selectedTabType | Determina si el icono o el texto deben mostrarse cuando se selecciona una pestaña. icono  texto  | icono |
| abb_tabColor | El color del icono o del texto cuando la pestaña no está seleccionada. | @color/textColorPrimario |
| abb_tabColorSeleccionado | El color del icono o texto cuando se selecciona la pestaña. | @color/colorPrimario |
| abb_tabColorDisabled | El color del icono o texto cada vez que la pestaña ha sido desactivada. | @color/textColorSecondario |
| abb_textApariencia | Personalice la apariencia del texto en pestañas; a continuación se muestra un ejemplo de apariencia de texto personalizada. Defina un nuevo estilo en res/values/styles.xml : < style name = " CustomText " >
< item name = " android:textAllCaps " >true</ item >
< item name = " android:fontFamily " >serif</ item >
< item name = " android:textSize " >16sp</ item >
< item name = " android:textStyle " >italic|bold</ item >
</ style > | |
| abb_textStyle | Estilo (normal, negrita, cursiva, negrita|cursiva) del texto. Utilice bottom_bar.typeface para establecer el estilo del texto mediante programación. | normal |
| abb_textTamaño | Tamaño del texto. El tipo de dimensión recomendado para el texto es "sp" (píxeles escalados), por ejemplo: 14sp. | 14sp |
| abb_iconTamaño | Aumenta o disminuye el tamaño del icono. | 24dp |
| abb_rippleEnabled | Habilita el efecto 'dominó' al seleccionar una pestaña.  | FALSO |
| abb_rippleColor | Cambia el color del efecto dominó antes mencionado. | Color de tema predeterminado |
| Atributo | Descripción | Por defecto |
|---|---|---|
| abb_badgeColor de fondo | El color de fondo de las insignias. | #ff0c10 (rojo) |
| abb_badgeTextColor | El color del texto dentro de las insignias. | #FFFFFF |
| abb_badgeTextSize | El tamaño del texto dentro de las insignias. El tipo de dimensión recomendado para el texto es "sp" (píxeles escalados), por ejemplo: 14sp. | 10p |
| abb_badgeAnimación | El tipo de animación de entrada y salida para insignias. ninguno escala desteñir | escala |
| abb_badgeAnimaciónDuración | La duración de la animación de entrada y salida de una insignia. | 150 |
| Atributo | Descripción | Por defecto |
|---|---|---|
| abb_animationDuración | La duración de todas las animaciones, incluida la animación del indicador. | 400 |
| abb_tabAnimación | El estilo de animación de entrada y salida de las pestañas que no están seleccionadas. ninguno  deslizar  desteñir  | desteñir |
| abb_tabAnimaciónSeleccionada | El estilo de animación de entrada y salida de la pestaña seleccionada. ninguno  deslizar  desteñir | deslizar |
| abb_animationInterpolador | El interpolador utilizado para todas las animaciones. Consulte "Interpoladores de Android: una guía visual" para obtener más información sobre los interpoladores disponibles. Valor de ejemplo: @android:anim/overshoot_interpolator  | Interpolador FastOutSlowIn |
| Atributo | Descripción | Por defecto |
|---|---|---|
| abb_indicatorColor | El color del indicador. | @android/colorPrimario |
| abb_indicatorAltura | La altura del indicador. | 3dp |
| abb_indicatorMargen | El margen horizontal del indicador. Esto determina el ancho del indicador. | 0dp |
| abb_indicatorApariencia | Configure la forma del indicador para que sea cuadrado o redondo. invisible  cuadrado  redondo  | cuadrado |
| abb_indicatorUbicación | Configure la ubicación del indicador de pestaña seleccionado, superior, inferior o invisible. arriba abajo  | arriba |
| abb_indicatorAnimación | El tipo de animación del indicador al cambiar la pestaña seleccionada. ninguno  deslizar desteñir  | deslizar |
MIT License
Copyright (c) 2021 Joery Droppers (https://github.com/Droppers)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
