之前没有仔细研究过底部导航栏,最开始的时候是用LinearLayout自己写,还需要写各种判断逻辑,之后那使用RadioGroup 这样会有一个checked的状态,然后在公司一直用之前的同事写的FragmentTabHost,最近自己写小例子练习需要使用底部导航栏,用的是FragmentTabHost,不过遇到好多问题,比如Fragment的状态保存啊,获取之类的。实在是心累,然后记得之前看过BottomNavigation的文章,就尝试使用一下,这里简单记录下使用的过程。
引入
Gradle 导入
compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.2'
我用的是2.0版本的,1.0的之前也没用过。
布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.hbl.bluetooth.HomeActivity">
<FrameLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@+id/bottom_navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</LinearLayout>
一个简单的布局,没什么可说的。
代码
直接上代码,也没什么难的
//初始化所有fragments
getFragments();
//创建对象
bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
//添加Item 这里可以指定每一个Item的ActivateColor和InActivateColor,也可以统一指定
bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_op_black_24dp, "操作"))
.addItem(new BottomNavigationItem(R.drawable.ic_model_black_24dp, "模式"))
.addItem(new BottomNavigationItem(R.drawable.ic_person_black_24dp_bl, "我的"))
.setInActiveColor(R.color.text)
.setActiveColor(R.color.colorAccent)
.setFirstSelectedPosition(0)
.initialise();
//添加点击的监听,这里做切换Fragment操作
bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
@Override
public void onTabSelected(int i) {
//显示对应的Fragment
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
if (fragmentList.get(i).isAdded()) {
fragmentTransaction.show(fragmentList.get(i));
} else {
fragmentTransaction.add(R.id.tabs, fragmentList.get(i));
}
fragmentTransaction.commitAllowingStateLoss();
}
@Override
public void onTabUnselected(int i) {
//隐藏对应的Fragment
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.hide(fragmentList.get(i));
fragmentTransaction.commitAllowingStateLoss();
}
@Override
public void onTabReselected(int i) {
}
});
//设置第一个fragment
getSupportFragmentManager().beginTransaction().replace(R.id.tabs,fragmentList.get(0)).commitAllowingStateLoss();
初始化所有Fragments
private List<Fragment> fragmentList = new ArrayList<>();
private void getFragments() {
OperationFragment operationFragment = new OperationFragment();
ModelFragment modelFragment = new ModelFragment();
SettingFragment settingFragment = new SettingFragment();
fragmentList.add(operationFragment);
fragmentList.add(modelFragment);
fragmentList.add(settingFragment);
}
这样其实一个基本的底部导航栏就完成了,比较值得注意的点就是,要理解一个概念就是BottomNavigation其实就是一个底部导航的控制,并不是说一定要跟Fragment有关系,你也可以用三个View,来回的切换,BottomNavigation只提供底部导航样式的控制和每个Item点击的回调。至于每次点击所要做的动作是应该我们自己去写的。
这里我的操作是默认replace一个Fragment 然后在点击的动作中判断对应的Fragment状态来决定是show还是add,在unselected动作中隐藏对应的fragment。目的就是为了保存状态。到这里基本功能就ok了,下面的是参照github的demo说一些增强功能。
增强功能
1. 多种模式:
@IntDef({MODE_DEFAULT, MODE_FIXED, MODE_SHIFTING, MODE_FIXED_NO_TITLE, MODE_SHIFTING_NO_TITLE})
@Retention(RetentionPolicy.SOURCE)
@interface Mode {
}
2. 多种背景Style:
@IntDef({BACKGROUND_STYLE_DEFAULT, BACKGROUND_STYLE_STATIC, BACKGROUND_STYLE_RIPPLE})
@Retention(RetentionPolicy.SOURCE)
@interface BackgroundStyle {
}
3. 多种提示类型: 这个是用来设置底部item提示样式的。
@IntDef({SHAPE_OVAL, SHAPE_RECTANGLE, SHAPE_HEART, SHAPE_STAR_3_VERTICES, SHAPE_STAR_4_VERTICES, SHAPE_STAR_5_VERTICES, SHAPE_STAR_6_VERTICES})
@Retention(RetentionPolicy.SOURCE)
@interface Shape {
}
4.设置文字指示标:
numberBadgeItem = new TextBadgeItem()
.setBorderWidth(4)
.setBackgroundColorResource(R.color.blue)
.setText("" + lastSelectedPosition)
.setHideOnSelect(autoHide.isChecked());
创建一个BadgeItem对象,目前有两个子类,TextBadgeItem和ShapeBadgeItem,参数就不多介绍了,使用的时候自己调试就行,然后通过setBageItem这个方法附加到指定的BottomNavivationItem上。
5. 设置图形指示标
shapeBadgeItem = new ShapeBadgeItem()
.setShape(shapeSpinner.getSelectedItemPosition())
.setShapeColorResource(R.color.teal)
.setGravity(Gravity.TOP | Gravity.END)
.setHideOnSelect(autoHide.isChecked());
这样BottomNavigation的介绍就差不多了,总体上使用难度不大,重点在与自己维护切换动作。如果有更多的自定义的需求,可以将github上的代码fork到自己仓库,然后修改源码就可以。
附上github地址:
https://github.com/Ashok-Varma/BottomNavigation
编译过的APk地址:
https://fir.im/bfks