AnimatedBottomBar
vailable on Maven Central
Une vue de navigation BottomBar personnalisable et facile à utiliser avec des animations élégantes, avec prise en charge de ViewPager, ViewPager2, NavController et des badges.
Par Joery Droppers
Téléchargez l'application Playground sur Google Play. Avec cette application, vous pouvez essayer toutes les fonctionnalités et même générer du XML avec la configuration sélectionnée.
Cette bibliothèque est disponible sur Maven Central, installez-la en ajoutant la dépendance suivante à votre build.gradle :
implementation ' nl.joery.animatedbottombar:library:1.1.0 'Les versions 1.0.x ne peuvent être utilisées qu'avec jCenter, les versions 1.1.x et supérieures peuvent être utilisées avec Maven Central.
Définissez AnimatedBottomBar dans votre mise en page XML avec des attributs personnalisés.
< 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 " /> Créez un fichier nommé tabs.xml dans le dossier 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 >Soyez averti lorsque l'onglet sélectionné change en définissant des rappels :
bottom_bar.onTabSelected = {
Log .d( " bottom_bar " , " Selected tab: " + it.title)
}
bottom_bar.onTabReselected = {
Log .d( " bottom_bar " , " Reselected tab: " + it.title)
}Ou définissez un écouteur si vous avez besoin d'informations plus détaillées :
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} " )
}
})Bref aperçu de la façon de gérer les onglets à l'aide du code.
// 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 )Cela pourrait être utile par exemple pour restreindre l’accès à une zone premium. Vous pouvez utiliser un rappel ou un écouteur plus détaillé :
bottom_bar.onTabIntercepted = {
if (newTab.id == R .id.tab_pro_feature && ! hasProVersion) {
// e.g. show a dialog
false
}
true
}Auditeur détaillé :
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
}
}) Instructions sur la façon de définir des badges pour les onglets, un objet AnimatedBottomBar.Badge doit être fourni au BottomBar, notez qu'il est également possible d'ajouter des badges sans texte.
// 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 " ))De plus, il est également possible de personnaliser les badges.
AnimatedBottomBar . Badge (
text = " 99 " ,
backgroundColor = Color . RED ,
textColor = Color . GREEN ,
textSize = 12 .spPx // in pixels
) Il est facile d'utiliser BottomBar avec un ViewPager ou ViewPager2, vous pouvez simplement utiliser la méthode setupWithViewPager() . Veuillez noter que le nombre d'onglets et de pages ViewPager doit être identique pour que celui-ci fonctionne correctement.
Usage
// For ViewPager use:
bottom_bar.setupWithViewPager(yourViewPager)
// For ViewPager2 use:
bottom_bar.setupWithViewPager2(yourViewPager2)Un aperçu de toutes les options de configuration. Toutes les options sont également accessibles et définies par programme, par leur nom équivalent.
| Attribut | Description | Défaut |
|---|---|---|
| abb_tabs | Les onglets peuvent être définis dans un fichier de menu (ressource Menu), dans le dossier res/menu/ resource. L' icône et l'attribut title sont obligatoires. Par défaut, tous les onglets sont activés, définissez Android:enabled sur false pour désactiver un onglet. < 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 | Définissez l’index des onglets sélectionnés par défaut. | |
| abb_selectedTabId | Définissez l'onglet sélectionné par défaut par son ID, par exemple @id/tab_id |
| Attribut | Description | Défaut |
|---|---|---|
| abb_selectedTabType | Détermine si l'icône ou le texte doit être affiché lorsqu'un onglet a été sélectionné. icône  texte  | icône |
| abb_tabColor | La couleur de l'icône ou du texte lorsque l'onglet n'est pas sélectionné. | @color/textColorPrimary |
| abb_tabColorSelected | La couleur de l'icône ou du texte lorsque l'onglet est sélectionné. | @color/colorPrimary |
| abb_tabColorDisabled | La couleur de l'icône ou du texte chaque fois que l'onglet a été désactivé. | @color/textColorSecondaire |
| abb_textApparence | Personnalisez l'apparence du texte dans les onglets. Vous trouverez ci-dessous un exemple d'apparence de texte personnalisée. Définissez un nouveau style dans 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 | Style (normal, gras, italique, gras|italique) du texte. Utilisez bottom_bar.typeface pour définir le style de texte par programme. | normale |
| abb_textSize | Taille du texte. Le type de dimension recommandé pour le texte est « sp » (pixels mis à l'échelle), par exemple : 14sp. | 14sp |
| abb_iconSize | Augmentez ou diminuez la taille de l'icône. | 24dp |
| abb_rippleEnabled | Active l'effet « d'entraînement » lors de la sélection d'un onglet.  | FAUX |
| abb_rippleColor | Changez la couleur de l’effet d’entraînement susmentionné. | Couleur du thème par défaut |
| Attribut | Description | Défaut |
|---|---|---|
| abb_badgeBackgroundColor | La couleur de fond des badges. | #ff0c10 (rouge) |
| abb_badgeTextColor | La couleur du texte à l'intérieur des badges. | #FFFFFF |
| abb_badgeTextSize | La taille du texte à l'intérieur des badges. Le type de dimension recommandé pour le texte est « sp » (pixels mis à l'échelle), par exemple : 14sp. | 10 cuillères à café |
| abb_badgeAnimation | Le type d’animation d’entrée et de sortie pour les badges. aucun échelle disparaître | échelle |
| abb_badgeAnimationDuration | La durée de l’animation d’entrée et de sortie d’un badge. | 150 |
| Attribut | Description | Défaut |
|---|---|---|
| abb_animationDurée | La durée de toutes les animations, y compris l'animation de l'indicateur. | 400 |
| abb_tabAnimation | Le style d'animation d'entrée et de sortie des onglets qui ne sont pas sélectionnés. aucun  glisser  disparaître  | disparaître |
| abb_tabAnimationSelected | Le style d'animation d'entrée et de sortie de l'onglet sélectionné. aucun  glisser  disparaître | glisser |
| abb_animationInterpolateur | L'interpolateur utilisé pour toutes les animations. Voir « Interpolateurs Android : un guide visuel » pour plus d'informations sur les interpolateurs disponibles. Exemple de valeur : @android:anim/overshoot_interpolator  | FastOutSlowInInterpolator |
| Attribut | Description | Défaut |
|---|---|---|
| abb_indicatorColor | La couleur de l'indicateur. | @android/colorPrimary |
| abb_indicatorHauteur | La hauteur de l'indicateur. | 3dp |
| abb_indicatorMargin | La marge horizontale de l’indicateur. Ceci détermine la largeur de l'indicateur. | 0dp |
| abb_indicatorApparence | Configurez la forme de l'indicateur pour qu'il soit carré ou rond. invisible  carré  rond  | carré |
| abb_indicatorEmplacement | Configurez l'emplacement de l'indicateur d'onglet sélectionné, en haut, en bas ou invisible. haut bas  | haut |
| abb_indicatorAnimation | Le type d'animation de l'indicateur lors du changement d'onglet sélectionné. aucun  glisser disparaître  | glisser |
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.
