基本上每个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);
}
这时候导航的功能就基本上实现了。