AnimatedBottomBar
vailable on Maven Central
Uma visualização de navegação BottomBar personalizável e fácil de usar com animações elegantes, com suporte para ViewPager, ViewPager2, NavController e emblemas.
Por Joery Droppers
Baixe o aplicativo playground do Google Play, com este aplicativo você pode experimentar todos os recursos e até gerar XML com a configuração selecionada.
Esta biblioteca está disponível no Maven Central, instale-a adicionando a seguinte dependência ao seu build.gradle :
implementation ' nl.joery.animatedbottombar:library:1.1.0 'As versões 1.0.x só podem ser usadas com jCenter, as versões 1.1.xe superiores podem ser usadas com Maven Central.
Defina AnimatedBottomBar em seu layout XML com 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 " /> Crie um arquivo chamado tabs.xml na pasta 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 >Seja notificado quando a guia selecionada for alterada definindo retornos de chamada:
bottom_bar.onTabSelected = {
Log .d( " bottom_bar " , " Selected tab: " + it.title)
}
bottom_bar.onTabReselected = {
Log .d( " bottom_bar " , " Reselected tab: " + it.title)
}Ou defina um ouvinte se precisar de informações mais detalhadas:
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 visão geral sobre como gerenciar guias 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 )Isto poderia ser útil, por exemplo, restringindo o acesso a uma área premium. Você pode usar um retorno de chamada ou um ouvinte mais detalhado:
bottom_bar.onTabIntercepted = {
if (newTab.id == R .id.tab_pro_feature && ! hasProVersion) {
// e.g. show a dialog
false
}
true
}Ouvinte detalhado:
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
}
}) Instruções sobre como definir emblemas para abas, um objeto AnimatedBottomBar.Badge deve ser fornecido ao BottomBar, observe que também é possível adicionar emblemas sem 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 " ))Além disso, existe também a possibilidade de estilizar emblemas individualmente.
AnimatedBottomBar . Badge (
text = " 99 " ,
backgroundColor = Color . RED ,
textColor = Color . GREEN ,
textSize = 12 .spPx // in pixels
) É fácil usar o BottomBar com um ViewPager ou ViewPager2, você pode simplesmente usar o método setupWithViewPager() . Observe que o número de guias e páginas do ViewPager precisa ser idêntico para que funcione corretamente.
Uso
// For ViewPager use:
bottom_bar.setupWithViewPager(yourViewPager)
// For ViewPager2 use:
bottom_bar.setupWithViewPager2(yourViewPager2)Uma visão geral de todas as opções de configuração. Todas as opções também podem ser acessadas e definidas programaticamente, pelo nome equivalente.
| Atributo | Descrição | Padrão |
|---|---|---|
| abb_tabs | As guias podem ser definidas em um arquivo de menu (recurso Menu), na pasta res/menu/ resource. O atributo icon e title são obrigatórios. Por padrão, todas as guias estão habilitadas, defina android:enabled como false para desabilitar uma aba. < 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_selectedIndex | Defina o índice da guia selecionada padrão. | |
| abb_selectedTabId | Defina a guia selecionada padrão por seu ID, por exemplo @id/tab_id |
| Atributo | Descrição | Padrão |
|---|---|---|
| abb_selectedTabType | Determina se o ícone ou texto deve ser mostrado quando uma guia for selecionada. ícone  texto  | ícone |
| abb_tabColor | A cor do ícone ou do texto quando a guia não está selecionada. | @cor/textColorPrimary |
| abb_tabColorSelected | A cor do ícone ou texto quando a guia é selecionada. | @cor/corPrimária |
| abb_tabColorDisabled | A cor do ícone ou texto sempre que a guia for desativada. | @color/textColorSecondary |
| abb_textAppearance | Personalize a aparência do texto nas guias. Abaixo está um exemplo de aparência de texto personalizada. Defina um novo estilo em 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, negrito, itálico, negrito | itálico) do texto. Use bottom_bar.typeface para definir programaticamente o estilo do texto. | normal |
| abb_textSize | Tamanho do texto. O tipo de dimensão recomendado para texto é "sp" (pixels em escala), por exemplo: 14sp. | 14sp |
| abb_iconSize | Aumente ou diminua o tamanho do ícone. | 24 dp |
| abb_rippleEnabled | Ativa o efeito 'ondulação' ao selecionar uma guia.  | falso |
| abb_rippleColor | Mude a cor do efeito cascata mencionado acima. | Cor padrão do tema |
| Atributo | Descrição | Padrão |
|---|---|---|
| abb_badgeBackgroundColor | A cor de fundo dos emblemas. | #ff0c10 (vermelho) |
| abb_badgeTextColor | A cor do texto dentro dos emblemas. | #FFFFFF |
| abb_badgeTextSize | O tamanho do texto dentro dos emblemas. O tipo de dimensão recomendado para texto é "sp" (pixels em escala), por exemplo: 14sp. | 10sp |
| abb_badgeAnimação | O tipo de animação de entrada e saída para emblemas. nenhum escala desaparecer | escala |
| abb_badgeAnimationDuration | A duração da animação de entrada e saída de um crachá. | 150 |
| Atributo | Descrição | Padrão |
|---|---|---|
| abb_animationDuration | A duração de todas as animações, incluindo a animação do indicador. | 400 |
| abb_tabAnimação | O estilo de animação de entrada e saída das guias que não estão selecionadas. nenhum  deslizar  desaparecer  | desaparecer |
| abb_tabAnimationSelected | O estilo de animação de entrada e saída da guia selecionada. nenhum  deslizar  desaparecer | deslizar |
| abb_animationInterpolador | O interpolador usado para todas as animações. Consulte "Interpoladores Android: um guia visual" para obter mais informações sobre os interpoladores disponíveis. Valor de exemplo: @android:anim/overshoot_interpolator  | FastOutSlowInInterpolador |
| Atributo | Descrição | Padrão |
|---|---|---|
| abb_indicatorColor | A cor do indicador. | @android/colorPrimary |
| abb_indicatorHeight | A altura do indicador. | 3 dp |
| abb_indicatorMargin | A margem horizontal do indicador. Isso determina a largura do indicador. | 0dp |
| abb_indicatorAppearance | Configure o formato do indicador para ser quadrado ou redondo. invisível  quadrado  redondo  | quadrado |
| abb_indicatorLocalização | Configure a localização do indicador da guia selecionada, superior, inferior ou invisível. principal fundo  | principal |
| abb_indicatorAnimação | O tipo de animação do indicador ao alterar a aba selecionada. nenhum  deslizar desaparecer  | 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.
