BottomBar 底部导航栏
github地址:BottomBar
参考:【BottomBar】Android炫酷的底部切换效果V2.0
参考: 第三方开源库:BottomBar 底部导航栏
效果
配置Gradle
compile 'com.roughike:bottom-bar:2.3.1'
res下创建xml文件夹,并创建BottomBar的xml并使用这个布局
bottombar_tabs_three.xml
<?xml version="1.0" encoding="utf-8"?>
<tabs>
<tab
id="@+id/ta3"
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>
bottombar_tabs_five.xml
<?xml version="1.0" encoding="utf-8"?>
<tabs>
<tab
id="@+id/tab_recents"
icon="@drawable/ic_recents"
title="Recents" />
<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" />
<tab
id="@+id/tab_food"
icon="@drawable/ic_restaurants"
title="Food" />
</tabs>
在布局中引用
<?xml version="1.0" encoding="utf-8"?>
<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">
<TextView
android:id="@+id/messageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottomBar"
android:gravity="center"
android:text="Hi mom!" />
<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_five" />
</RelativeLayout>
activity中实现监听
bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
@Override
public void onTabSelected(@IdRes int tabId) {
switch (tabId) {
case R.id.tab1:
toast.setText("tab1");
toast.show();
break;
case R.id.tab2:
toast.setText("tab2");
toast.show();
break;
case R.id.tab3:
toast.setText("tab3");
toast.show();
break;
case R.id.tab4:
toast.setText("tab4");
toast.show();
break;
case R.id.tab5:
toast.setText("tab5");
toast.show();
break;
}
}
});
当前的tab是tab3,如果再次点击tab3,就会调用这个方法。
bottomBar.setOnTabReselectListener(new OnTabReselectListener() {
@Override
public void onTabReSelected(@IdRes int tabId) {
switch (tabId) {
case R.id.tab1:
toast.setText("onTabReSelected---tab1");
toast.show();
break;
case R.id.tab2:
toast.setText("onTabReSelected---tab2");
toast.show();
break;
case R.id.tab3:
toast.setText("onTabReSelected---tab3");
toast.show();
break;
case R.id.tab4:
toast.setText("onTabReSelected---tab4");
toast.show();
break;
case R.id.tab5:
toast.setText("onTabReSelected---tab5");
toast.show();
break;
}
}
});
xml属性
一般要设置背景色android:background=”#ffffff”,不然背景色回事默认的colorPrimary。
BottomBar的属性 含义
app:bb_tabXmlResource= 给BottomBar设置布局
app:bb_behavior= shifting:只有当前tab才显示title;underNavbar:都显示title;shy:滑动隐藏
app:bb_activeTabAlpha= 当前tab的可见度
app:bb_inActiveTabAlpha= 其他tab的可见度
app:bb_activeTabColor= 当前tab的颜色(icon + title)
app:bb_inActiveTabColor= 其他tab的颜色(cion + title)
app:bb_titleTypeFace= tab的title的字体
app:bb_titleTextAppearance= tab的title的style(大小和加粗等)
BottomBar的tab的属性:
tab的属性 含义
barColorWhenSelected= 当tab被选中时整个BottomBar的颜色
id= tab的id
icon= tab的icon
title= tab的title
----------
<tab
id="@+id/tab_recents"
title="Recents"
icon="@drawable/empty_icon"
inActiveColor="#00FF00"
activeColor="#FF0000"
barColorWhenSelected="#FF0000"
badgeBackgroundColor="#FF0000" />
<?xml version="1.0" encoding="utf-8"?>
<tabs>
<tab
icon="@drawable/ic_favorites"
id="@+id/tab1"
title="爱心" />
<tab
icon="@drawable/ic_nearby"
id="@+id/tab2"
title="附近" />
<tab
icon="@drawable/ic_friends"
id="@+id/tab3"
title="朋友" />
<tab
icon="@drawable/ic_recents"
id="@+id/tab4"
title="历史" />
<tab
icon="@drawable/ic_restaurants"
id="@+id/tab5"
title="工具" />
</tabs>
barColorWhenSelected 效果图
tab
<?xml version="1.0" encoding="utf-8"?>
<tabs>
<tab
barColorWhenSelected="#5D4037"
icon="@drawable/ic_favorites"
id="@+id/tab1"
title="Favorites"/>
<tab
barColorWhenSelected="#f44336"
icon="@drawable/ic_nearby"
id="@+id/tab2"
title="Nearby"/>
...
</tabs>
如何改变tab的颜色和字体?
<com.roughike.bottombar.BottomBar
android:id="@+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:background="#ffffff"
app:bb_activeTabAlpha="1"
app:bb_activeTabColor="@color/colorPrimary"
app:bb_behavior="underNavbar"
app:bb_inActiveTabAlpha="0.5"
app:bb_inActiveTabColor="@color/colorAccent"
app:bb_tabXmlResource="@xml/bottombar_sample_activity"
app:bb_titleTypeFace="fonts/GreatVibes-Regular.otf"
app:bb_titleTextAppearance="@style/BottomBarTitleStyle"/>
其中fonts/GreatVibes-Regular.otf在assets中,见下图:
滑动隐藏BottomBar
往上滑动bottombar消失
往下滑动bottombar出现
效果图:
需要满足的条件
app:bb_behavior="shy|shifting"
跟布局是CoordinatorLayout
另一个控件具有滑动属性,比如NestedScrollView
XML中使用BottomBar
<com.roughike.bottombar.BottomBar
android:id="@+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="bottom"
app:bb_behavior="shy|shifting"
app:bb_tabXmlResource="@xml/bottombar_sample_activity"/>
未读消息
类似于QQ的未读消息
效果图
方法
方法 含义
tab3.setBadgeCount(5); 显示数量
tab3.removeBadge(); 移除数量
BottombarTab tab3 = bottomBar.getTabWithId(R.id.tab3);
tab3.removeBadge();