基本上每個APP應用都有自己的導航欄,但是使用的方法各有不同,常用的方法如下:
(1)使用LinearLayout+TextView實現。
(2)使用RadioGroup+RadioButton實現。
(3)使用TabLayout+ViewPager實現。
(4)使用BottomNavigationBar實現。
而在這個項目中,我選擇了第四種,第四種方式比較簡單,不需要單獨去建立xml文件和一些事件代碼。對於左右滑動我使用的是自帶的ViewPager這個控件。
1、BottomNavigationBar底部導航欄
在使用之前需要下載這個jar包,你可以到我的雲盤(點擊打開鏈接)下載bottom-navigation-bar-1.2.0-sources.jar,下載以後將其導入你的項目中的Lib目錄下,然後手動在build.gradle文件中添加下面一句話:
compile 'com.ashokvarma.android:bottom-navigation-bar:1.2.0'
這樣你就可以在項目中使用這個框架。接下來先在佈局文件下引入這個控件:
<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/bottom_navigation_bar"
android:layout_alignParentBottom="true"
/>
接下來接寫一些設置代碼:
// 初始化底部導航欄,並進行設置
private void initBottomNavigationBar() {
bottom_navigation_bar.setMode(BottomNavigationBar.MODE_FIXED);
bottom_navigation_bar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
//設置默認顏色
bottom_navigation_bar
.setInActiveColor(R.color.tabInActive)//設置未選中的Item的顏色,包括圖片和文字
.setActiveColor(R.color.tabActive)
.setBarBackgroundColor(R.color.tabBackground);//設置整個控件的背景色
//設置徽章
badge=new BadgeItem()
// .setBorderWidth(2)//Badge的Border(邊界)寬度
// .setBorderColor("#FF0000")//Badge的Border顏色
// .setBackgroundColor("#9ACD32")//Badge背景顏色
// .setGravity(Gravity.RIGHT| Gravity.TOP)//位置,默認右上角
.setText("2")//顯示的文本
// .setTextColor("#F0F8FF")//文本顏色
// .setAnimationDuration(2000)
// .setHideOnSelect(true)//當選中狀態時消失,非選中狀態顯示
;
//添加選項
bottom_navigation_bar.addItem(new BottomNavigationItem(R.mipmap.books_active, "書庫").setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.books_inactive)))
.addItem(new BottomNavigationItem(R.mipmap.discover_active, "發現").setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.discover_inactive)))
.addItem(new BottomNavigationItem(R.mipmap.info_active, "書友圈").setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.info_inactive)).setBadgeItem(badge))
.addItem(new BottomNavigationItem(R.mipmap.mine_active, "我的").setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.mine_inactive)))
.initialise();//初始化BottomNavigationButton,所有設置需在調用該方法前完成
bottom_navigation_bar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
@Override
public void onTabSelected(int position) {//未選中 -> 選中
}
@Override
public void onTabUnselected(int position) {//選中 -> 未選中
}
@Override
public void onTabReselected(int position) {//選中 -> 選中
}
});
}
然後在Main_Activity中的onCreate方法中獲取控件並初始化設置底部導航欄,通過這兩步就可以實現底部導航欄,比其他的方法簡單多了。而且這種方式還能實現右上角信息條數的顯示。
2、ViewPager實現左右滑動
在使用ViewPager之前,需要先創建四個Fragement,來代表四個界面,通過ViewPager中的一些方法就可以實現Fragement的切換。現在主佈局文件中引入v4.view.ViewPager,然後就進行ViewPager的初始化和獲取當前ViewPager對象。
private void initViewPager(){
List<Fragment> fragments=new ArrayList<Fragment>();
fragments.add(new books());
fragments.add(new discover());
fragments.add(new info());
fragments.add(new mine());
FragAdpater adpater=new FragAdpater(getSupportFragmentManager(),fragments);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
viewPager.setAdapter(adpater);
}
雖然到這裏已經基本上完成了,但是經過運行你會發現,BottomNavigationBar和ViewPager兩者之間並沒有相連,也就是當ViewPager左右滑動,底部導航欄的圖標還是沒有發生變化,但是界面確實是變了。這裏就需要做稍微的改動。
public void onPageSelected(int position) {
bottom_navigation_bar.selectTab(position);
}
在初始化ViewPager中的onPageSelected方法添加一個設置底部導航欄的選中方法。同理在導航欄初始化中的onTabSelected中設置ViewPager的選中。
public void onTabSelected(int position) {//未選中 -> 選中
viewPager.setCurrentItem(position);
}
這時候導航的功能就基本上實現了。