效果圖
組件介紹
Bottom Navigation經(jīng)常用于底部導(dǎo)航欄。不過它所包含的標(biāo)簽頁不應(yīng)過多也不應(yīng)該過少，谷歌官方文檔中表示，標(biāo)簽頁的個(gè)數(shù)在3-5個(gè)左右合適。
如何實(shí)現(xiàn)
1、在Module的build.gradle中添加如下代碼
compile 'com.roughike:bottom-bar:2.0.2'
實(shí)現(xiàn)Bottom Navigation功能，比較好用的是第三方的BottomBar庫，截止2017.1.8，最新的版本是2.0.2，如果需要最新版，請?jiān)L問 BottomBar 的 Github Repository
2、在res下新建類型為xml的xml文件夾
3、在xml文件夾下新建bottombar_tabs.xml文件
res/xml/bottombar_tabs.xml
<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">
<tabs>
<tab
id="@+id/tab_one"
icon="@drawable/ic_3d_rotation_white_24dp"
title="財(cái)務(wù)"
barColorWhenSelected="#865242"
inActiveColor="#FFFFFF"
activeColor = "#FFFFFF"/>
<tab
id="@+id/tab_two"
icon="@drawable/ic_account_balance_white_24dp"
title="群組"
barColorWhenSelected="#268434"
inActiveColor="#FFFFFF"
activeColor = "#FFFFFF"/>
<tab
id="@+id/tab_three"
icon="@drawable/ic_accessibility_white_24dp"
title="朋友"
barColorWhenSelected="#8b2099"
inActiveColor="#FFFFFF"
activeColor = "#FFFFFF"/>
</tabs>
</PreferenceScreen>
barColorWhenSelected屬性控制著當(dāng)這個(gè)Tab被選擇時(shí)，BottomBar的整體顏色。inActiveColor屬性是這個(gè)Tab未激活時(shí)圖片的顏色。與之相對應(yīng)的activeColor屬性，則是控制著激活時(shí)的圖片顏色。
4、activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="me.luzhoumin.bottomnavigation.MainActivity">
<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"
app:bb_behavior="underNavbar"
app:bb_inActiveTabAlpha="0.6"
app:bb_activeTabAlpha="1"
app:bb_showShadow="true"/>
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="36sp"
android:text="Hello World!"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_marginTop="51dp" />
</RelativeLayout>
app:bb_tabXmlResource指向的是第三步建的xml文件，里面有每個(gè)Tab的屬性。
5、MainActivity.java
import android.support.annotation.IdRes;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
import com.roughike.bottombar.BottomBar;
import com.roughike.bottombar.BottomBarTab;
import com.roughike.bottombar.OnTabReselectListener;
import com.roughike.bottombar.OnTabSelectListener;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//獲取Bottom Bar組件
BottomBar bottomBar = (BottomBar) findViewById(R.id.bottomBar);
//獲取用來顯示的TextView組件
final TextView tv = (TextView) findViewById(R.id.textview);
//設(shè)置Bottom Bar的選擇監(jiān)聽器
bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
@Override
public void onTabSelected(@IdRes int tabId) {
if (tabId == R.id.tab_one){
tv.setText("tab_one 被點(diǎn)擊");
}
if (tabId == R.id.tab_two){
tv.setText("tab_group 被點(diǎn)擊");
}
if (tabId == R.id.tab_three){
tv.setText("tab_three 被點(diǎn)擊");
}
}
});
//設(shè)置Bottom Bar的重復(fù)選擇監(jiān)聽器
bottomBar.setOnTabReselectListener(new OnTabReselectListener() {
@Override
public void onTabReSelected(@IdRes int tabId) {
if (tabId == R.id.tab_one){
tv.setText("tab_one 再次被點(diǎn)擊");
}
if (tabId == R.id.tab_two){
tv.setText("tab_two 再次被點(diǎn)擊");
}
if (tabId == R.id.tab_three){
tv.setText("tab_three 再次被點(diǎn)擊");
}
}
});
//設(shè)置Tab的Badge
BottomBarTab nearby = bottomBar.getTabWithId(R.id.tab_two);
nearby.setBadgeCount(5);
}
}
6、修改主題樣式
res/values/styles.xml
<resources>
<!-- Base application theme. -->
<!--修改主題為無ActionBar-->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<!--添加-->
<item name="android:navigationBarColor">@android:color/transparent</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
</resources>
BottomBar API
For the 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_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_titleTextAppearance="@style/MyTextAppearance"
app:bb_titleTypeFace="fonts/MySuperDuperFont.ttf"
app:bb_showShadow="true" />
bb_tabXmlResource
the XML Resource id for your tabs, that reside in values/xml/
bb_tabletMode
if you want the BottomBar to behave differently for tablets. There's an example of this in the sample project!
bb_behavior
shifting: the selected tab is wider than the rest.
shy: put the BottomBar inside a CoordinatorLayout and it'll automatically hide on scroll!
underNavbar: draw the BottomBar under the navBar!
bb_inActiveTabAlpha
the alpha value for inactive tabs, that's used in the tab icons and titles.
bb_activeTabAlpha
the alpha value for active tabs, that's used in the tab icons and titles.
bb_inActiveTabColor
the color for inactive tabs, that's used in the tab icons and titles.
bb_activeTabColor
the color for active tabs, that's used in the tab icons and titles.
bb_badgeBackgroundColor
the background color for any Badges in this BottomBar.
bb_titleTextAppearance
custom textAppearance for the titles
bb_titleTypeFace
path for your custom font file, such as fonts/MySuperDuperFont.ttf. In that case your font path would look like src/main/assets/fonts/MySuperDuperFont.ttf, but you only need to provide fonts/MySuperDuperFont.ttf, as the asset folder will be auto-filled for you.
bb_showShadow
controls whether the shadow is shown or hidden, defaults to true.
For the tabs
<tab
id="@+id/tab_recents"
title="Recents"
icon="@drawable/empty_icon"
inActiveColor="#00FF00"
activeColor="#FF0000"
barColorWhenSelected="#FF0000"
badgeBackgroundColor="#FF0000" />
inActiveColor
the color for inactive tabs, that's used in the tab icons and titles.
activeColor
the color for active tabs, that's used in the tab icons and titles.
barColorWhenSelected
the color that the whole BottomBar should be when selected this tab.
badgeBackgroundColor
the background color for any Badges in this tab.
需要注意的地方
- Tab的圖標(biāo)必須是全透明、純黑、24dp、Padding = 0dp，而且最好所有分辨密度的圖片都要有，否則圖標(biāo)會(huì)很大或者很小，影響顯示效果。
- 如果想保持在屏幕最底部，記得在布局xml的
<com.roughike.bottombar.BottomBar>標(biāo)簽中添加屬性android:layout_alignParentBottom="true"，并且做好第六步工作。
參考文檔
與FloatingActionButton和SnackBar合作的效果
