BottomBar
v2.3.1
Je n'ai plus le temps de m'occuper de ça. En gros, j'ai écrit toute la bibliothèque à la hâte, sans tests, tout en étant un débutant expert sérieux à l'époque. En conséquence, il y a beaucoup de pièces mobiles imprévisibles et les tests ne sont probablement pas très bons non plus. Je ne sais pas vraiment, puisque je n'y ai pas touché depuis des lustres.
Je vous recommande d'utiliser le BottomNavigationView officiel de Google et de les inciter à mettre en œuvre les fonctionnalités dont vous avez besoin. Ou utilisez une autre bibliothèque tierce.
La dernière version avant celle-ci peut être trouvée dans la branche v1
Comment contribuer
Journal des modifications
Un composant de vue personnalisé qui imite le nouveau modèle de navigation inférieure de Material Design.
Non. La version minSDK est l'API de niveau 11 (Honeycomb).
compile ' com.roughike:bottom-bar:2.3.1 'Maven :
< dependency >
< groupId >com.roughike</ groupId >
< artifactId >bottom-bar</ artifactId >
< version >2.3.1</ version >
< type >pom</ type >
</ dependency >Vous pouvez ajouter des éléments en écrivant un fichier de ressources XML .
Les icônes doivent être entièrement opaques, de couleur noire unie, 24dp et sans remplissage . Par exemple, avec le générateur d'icônes génériques Android Asset Studio, sélectionnez « TRIM » et assurez-vous que le remplissage est de 0 dp. Voici à quoi devraient ressembler vos icônes :
Définissez vos onglets dans un fichier de ressources XML.
res/xml/bottombar_tabs.xml :
< tabs >
< tab
id = " @+id/tab_favorites "
icon = " @drawable/ic_favorites "
title = " Favorites " />
< tab
id = " @+id/tab_nearby "
icon = " @drawable/ic_nearby "
title = " Nearby " />
< tab
id = " @+id/tab_friends "
icon = " @drawable/ic_friends "
title = " Friends " />
</ tabs >Ensuite, ajoutez le BottomBar à votre mise en page et attribuez-lui un identifiant de ressource pour votre fichier XML d'onglets.
layout/activité_main.xml
< RelativeLayout xmlns : android = " http://schemas.android.com/apk/res/android "
android : layout_width = " match_parent "
android : layout_height = " match_parent "
xmlns : app = " http://schemas.android.com/apk/res-auto " >
<!-- This could be your fragment container, or something -->
< FrameLayout
android : id = " @+id/contentContainer "
android : layout_width = " match_parent "
android : layout_height = " match_parent "
android : layout_above = " @+id/bottomBar " />
< com .roughike.bottombar.BottomBar
android : id = " @+id/bottomBar "
android : layout_width = " match_parent "
android : layout_height = " 60dp "
android : layout_alignParentBottom = " true "
app : bb_tabXmlResource = " @xml/bottombar_tabs " />
</ RelativeLayout >Par défaut, les onglets ne font rien sauf si vous écoutez les événements de sélection et faites quelque chose lorsque les onglets sont sélectionnés.
MainActivity.java :
public class MainActivity extends Activity {
@ Override
protected void onCreate ( @ Nullable Bundle savedInstanceState ) {
super . onCreate ( savedInstanceState );
setContentView ( R . layout . activity_main );
BottomBar bottomBar = ( BottomBar ) findViewById ( R . id . bottomBar );
bottomBar . setOnTabSelectListener ( new OnTabSelectListener () {
@ Override
public void onTabSelected ( @ IdRes int tabId ) {
if ( tabId == R . id . tab_favorites ) {
// The tab with id R.id.tab_favorites was selected,
// change your content accordingly.
}
}
});
}
}Si vous souhaitez écouter les événements de resélection, voici comment procéder :
bottomBar . setOnTabReselectListener ( new OnTabReselectListener () {
@ Override
public void onTabReSelected ( @ IdRes int tabId ) {
if ( tabId == R . id . tab_favorites ) {
// The tab with id R.id.tab_favorites was reselected,
// change your content accordingly.
}
}
}); Si vous souhaitez annuler conditionnellement la sélection d’un onglet, vous le pouvez absolument. Attribuez simplement un TabSelectionInterceptor au BottomBar et renvoyez true à partir de la méthode shouldInterceptTabSelection() .
bottomBar . setTabSelectionInterceptor ( new TabSelectionInterceptor () {
@ Override
public boolean shouldInterceptTabSelection ( @ IdRes int oldTabId , @ IdRes int newTabId ) {
if ( newTabId == R . id . tab_pro_feature && ! userHasProVersion ()) {
startProVersionPurchaseFlow ();
return true ;
}
return false ;
}
});Si vous souhaitez avoir une icône différente lorsqu'un onglet spécifique est sélectionné, utilisez simplement les éléments dessinables de la liste d'état.
res/drawable/my_tab_icon.xml
< selector xmlns : android = " http://schemas.android.com/apk/res/android " >
< item android : drawable = " @drawable/ic_myicon_selected " android : state_selected = " true " />
< item android : drawable = " @drawable/ic_myicon_default " android : state_selected = " false " />
</ selector >res/xml/bottombar_tabs.xml
...
< tab
id = " @+id/tab_favorites "
icon = " @drawable/my_tab_icon "
title = " Favorites " />
<!-- You can use @color resources too! -->
... Ajoutez simplement barColorWhenSelected à chaque onglet. Lorsque cet onglet est sélectionné, toute la couleur d'arrière-plan de BottomBar est modifiée avec une belle animation.
res/xml/bottombar_tabs.xml
< tabs >
< tab
id = " @+id/tab_favorites "
icon = " @drawable/ic_favorites "
title = " Favorites "
barColorWhenSelected = " #5D4037 " />
<!-- You can use @color resources too! -->
</ tabs >Tout d’abord, définissez un style qui est un enfant du thème principal de votre application :
res/values-v21/styles.xml
< style name = " AppTheme.TransNav " parent = " AppTheme " >
< item name = " android:navigationBarColor " >@android:color/transparent</ item >
< item name = " android:windowTranslucentNavigation " >true</ item >
< item name = " android:windowDrawsSystemBarBackgrounds " >true</ item >
</ style >Vous devrez également créer une version stub du même thème pour éviter les plantages dans les niveaux d'API précédents que Lollipop :
res/values/styles.xml
< style name = " AppTheme.TransNav " parent = " AppTheme " /> Incluez également le même stub dans votre values-land-v21.xml pour éviter une barre de navigation transparente et un comportement étrange en mode paysage.
res/values-land-v21.xml :
< style name = " AppTheme.TransNav " parent = " AppTheme " /> Appliquez le thème dans AndroidManifest.xml pour votre activité.
AndroidManifest.xml :
< activity android : name = " .MyAwesomeActivity " android : theme = " @style/AppTheme.TransNav " /> Enfin, définissez bb_behavior pour inclure le drapeau underNavbar et vous êtes prêt à partir !
activité_my_awesome.xml :
< com .roughike.bottombar.BottomBar
android : id = " @+id/bottomBar "
android : layout_width = " match_parent "
android : layout_height = " 56dp "
android : layout_alignParentBottom = " true "
app : bb_tabXmlResource = " @xml/my_awesome_bottombar_tabs "
app : bb_behavior = " underNavbar " /> Spécifiez une présentation différente pour votre activité dans le dossier res/layout-sw600dp et définissez bb_tabletMode sur true.
res/layout-sw600dp/activity_main.xml :
< RelativeLayout
xmlns : android = " http://schemas.android.com/apk/res/android "
xmlns : app = " http://schemas.android.com/apk/res-auto "
android : layout_width = " match_parent "
android : layout_height = " match_parent " >
< com .roughike.bottombar.BottomBar
android : id = " @+id/bottomBar "
android : layout_width = " wrap_content "
android : layout_height = " match_parent "
android : layout_alignParentLeft = " true "
app : bb_tabXmlResource = " @xml/bottombar_tabs_three "
app : bb_tabletMode = " true " />
<!-- This could be your fragment container, or something -->
< FrameLayout
android : id = " @+id/contentContainer "
android : layout_width = " match_parent "
android : layout_height = " match_parent "
android : layout_toRightOf = " @+id/bottomBar " />
</ RelativeLayout >Très facile!
activité_main.xml :
< android .support.design.widget.CoordinatorLayout xmlns : android = " http://schemas.android.com/apk/res/android "
xmlns : app = " http://schemas.android.com/apk/res-auto "
android : layout_width = " match_parent "
android : layout_height = " match_parent " >
< android .support.v4.widget.NestedScrollView
android : id = " @+id/myScrollingContent "
android : layout_width = " match_parent "
android : layout_height = " match_parent " >
<!-- Your loooooong scrolling content here. -->
</ android .support.v4.widget.NestedScrollView>
< com .roughike.bottombar.BottomBar
android : id = " @+id/bottomBar "
android : layout_width = " match_parent "
android : layout_height = " 60dp "
android : layout_gravity = " bottom "
app : bb_tabXmlResource = " @xml/bottombar_tabs_three "
app : bb_behavior = " shy " />
</ android .support.design.widget.CoordinatorLayout>Vous pouvez facilement ajouter des badges pour afficher le nombre de messages non lus ou de nouveaux éléments/ce que vous voulez.
BottomBarTab nearby = bottomBar . getTabWithId ( R . id . tab_nearby );
nearby . setBadgeCount ( 5 );
// Remove the badge when you're done with it.
nearby . removeBadge /();< com .roughike.bottombar.BottomBar
android : id = " @+id/bottomBar "
android : layout_width = " match_parent "
android : layout_height = " 60dp "
android : layout_alignParentBottom = " true "
app : bb_tabXmlResource = " @xml/bottombar_tabs_three "
app : bb_tabletMode = " true "
app : bb_behavior = " shifting|shy|underNavbar "
app : bb_inActiveTabAlpha = " 0.6 "
app : bb_activeTabAlpha = " 1 "
app : bb_inActiveTabColor = " #222222 "
app : bb_activeTabColor = " @color/colorPrimary "
app : bb_badgesHideWhenActive = " true "
app : bb_titleTextAppearance = " @style/MyTextAppearance "
app : bb_titleTypeFace = " fonts/MySuperDuperFont.ttf "
app : bb_showShadow = " true " />values/xml/shifting : l'onglet sélectionné est plus large que le reste. shy : placez la BottomBar dans un CoordinationLayout et elle se cachera automatiquement lors du défilement ! underNavbar : dessinez la BottomBar sous la navBar !fonts/MySuperDuperFont.ttf . Dans ce cas, votre chemin de police ressemblerait à src/main/assets/fonts/MySuperDuperFont.ttf , mais il vous suffit de fournir fonts/MySuperDuperFont.ttf , car le dossier de ressources sera automatiquement rempli pour vous.< tab
id = " @+id/tab_recents "
title = " Recents "
icon = " @drawable/empty_icon "
inActiveColor = " #00FF00 "
activeColor = " #FF0000 "
barColorWhenSelected = " #FF0000 "
badgeBackgroundColor = " #FF0000 "
badgeHidesWhenActive = " true " />Envoyez-moi une pull request avec README.md modifié pour recevoir un message !
N'hésitez pas à créer des problèmes et des demandes de tirage.
Lors de la création de demandes d'extraction, plus c'est plus : j'aimerais voir dix petites demandes d'extraction séparées par fonctionnalité plutôt que toutes celles combinées en une seule énorme.
BottomBar library for Android
Copyright (c) 2016 Iiro Krankka (http://github.com/roughike).
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
