谷歌官方导航控件BottomNavigationBar的日常使用
https://cloud.tencent.com/developer/article/1158572
BottomNavigationBar和其他控件的配合是完全解耦的，日常使用分为BottomNavigationBar+ViewPager 、BottomNavigationBar+FrameLayput
1 使用
- BottomNavigationBar+ViewPager
直接上代码
private BottomNavigationBar mBottomNavigationBar; private ViewPager viewPager; private Listfragments2 = new ArrayList<>();
private void initBottomNavigationBar() {
mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
String[] mTitles = new String[]{"首页", "发现", "信息", "我的"};
mBottomNavigationBar
.setActiveColor(R.color.black)
.setInActiveColor(R.color.gray)
.setBarBackgroundColor(R.color.white);
mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
mBottomNavigationBar
.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
mBottomNavigationBar
.addItem(new BottomNavigationItem(R.mipmap.ic_launcher_round, mTitles[0])
.setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_launcher)))
.addItem(new BottomNavigationItem(R.mipmap.ic_launcher_round, mTitles[1])
.setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_launcher)))
.addItem(new BottomNavigationItem(R.mipmap.ic_launcher_round, mTitles[2])
.setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_launcher)))
.addItem(new BottomNavigationItem(R.mipmap.ic_launcher_round, mTitles[3])
.setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_launcher)))
.setFirstSelectedPosition(0)
.initialise();//所有的设置需在调用该方法前完成```
mBottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {//这里也可以使用SimpleOnTabSelectedListener
@Override
public void onTabSelected(int position) {//未选中 -> 选中
viewPager.setCurrentItem(position);
}
@Override
public void onTabUnselected(int position) {//选中 -> 未选中
}
@Override
public void onTabReselected(int position) {//选中 -> 选中
}
});
}
private void initViewPager() {
viewPager = (ViewPager) findViewById(R.id.view_pager);
viewPager.setAdapter(new SectionsPagerAdapter(getSupportFragmentManager(), fragments2));
viewPager.setCurrentItem(0);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mBottomNavigationBar.selectTab(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
public class SectionsPagerAdapter extends FragmentPagerAdapter {
List fragments2;
public SectionsPagerAdapter(FragmentManager fm, List fragments) {
super(fm);
this.fragments2 = fragments;
}
@Override
public Fragment getItem(int position) {
return fragments2.get(position);
}
@Override
public int getCount() {
return fragments2.size();
}
}
- BottomNavigationBar+FrameLayput
private BottomNavigationBar mBottomNavigationBar;
private List fragments = new ArrayList<>();
private void initBottomNavigationBar() {
mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
String[] mTitles = new String[]{"首页", "发现", "信息", "我的"};
mBottomNavigationBar
.setActiveColor(R.color.black)
.setInActiveColor(R.color.gray)
.setBarBackgroundColor(R.color.white);
mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
mBottomNavigationBar
.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
mBottomNavigationBar
.addItem(new BottomNavigationItem(R.mipmap.ic_launcher_round, mTitles[0])
.setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_launcher)))
.addItem(new BottomNavigationItem(R.mipmap.ic_launcher_round, mTitles[1])
.setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_launcher)))
.addItem(new BottomNavigationItem(R.mipmap.ic_launcher_round, mTitles[2])
.setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_launcher)))
.addItem(new BottomNavigationItem(R.mipmap.ic_launcher_round, mTitles[3])
.setInactiveIcon(ContextCompat.getDrawable(this, R.mipmap.ic_launcher)))
.setFirstSelectedPosition(0)
.initialise();//所有的设置需在调用该方法前完成```
mBottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {//这里也可以使用SimpleOnTabSelectedListener
@Override
public void onTabSelected(int position) {//未选中 -> 选中
switchTab(position);
}
@Override
public void onTabUnselected(int position) {//选中 -> 未选中
}
@Override
public void onTabReselected(int position) {//选中 -> 选中
}
});
}
int curFragment = -1;
private void switchTab(int position) {
FragmentManager manager = getSupportFragmentManager();
Fragment fragment = manager.findFragmentByTag("" + position);
FragmentTransaction beginTransaction = manager.beginTransaction();
if (fragment == null) {
if (manager.findFragmentByTag("" + curFragment) != null) {
beginTransaction.hide(fragments.get(curFragment));
}
beginTransaction.add(R.id.fram_layout, fragments.get(position), "" + position)
.show(fragments.get(position))
.commit();
} else if (curFragment != position) {
beginTransaction.hide(fragments.get(curFragment))
.show(fragments.get(position))
.commit();
}
curFragment = position;
}
2 定制
1. 模式Modes
属性：bnbMode
值：mode_default, mode_fixed, mode_shifting, mode_fixed_no_title, mode_shifting_no_title
方法：setMode()
参数：MODE_DEFAULT, MODE_FIXED, MODE_SHIFTING, MODE_FIXED_NO_TITLE, MODE_SHIFTING_NO_TITLE
每种类型都会显示菜单Icon，只有名称显示方式不同
mode_default:如果选项大于3个，使用mode_shifting，否则使用mode_fixed
mode_fixed:每个item对应名称，不选中也会显示
mode_shifting:每个item对应名称，只有选中才会显示，不选中隐藏
mode_fixed_no_title:相当于mode_fixed只是不显示所有文字
mode_shifting_no_title:相当于mode_shifting只是不显示所有文字
2. 背景样式Background Styles
属性：app:bnbBackgroundStyle
值：background_style_default, background_style_static, background_style_ripple
方法：setBackgroundStyle()
参数：BACKGROUND_STYLE_DEFAULT, BACKGROUND_STYLE_STATIC, BACKGROUND_STYLE_RIPPLE
3种style
background_style_default:如果mode设为MODE_FIXED，默认使用BACKGROUND_STYLE_STATIC；如果mode设为MODE_SHIFTING，默认使用 BACKGROUND_STYLE_RIPPLE
background_style_static:点击的时候没有水波纹效果
background_style_ripple:点击的时候有水波纹效果
3.颜色Colors
属性：bnbActiveColor, bnbInactiveColor, bnbBackgroundColor
方法：setActiveColor, setInActiveColor, setBarBackgroundColor
值：颜色值或者资源
例如：
bottomNavigationBar
.setActiveColor(R.color.primary)
.setInActiveColor("#FFFFFF")
.setBarBackgroundColor("#ECECEC")
类型和默认值
in-active color：图标和文本未被激活或选中的颜色；默认颜色为Theme’s Primary Color
active color : 在BACKGROUND_STYLE_STATIC下，为图标和文本激活或选中的颜色；在BACKGROUND_STYLE_RIPPLE下，为整个控件的背景颜色；默认颜色为Color.LTGRAY
background color :在BACKGROUND_STYLE_STATIC 下，为整个空控件的背景色；在 BACKGROUND_STYLE_RIPPLE 下为图标和文本被激活或选中的颜色；默认颜色为Color.WHITE
4.自定义Item颜色Individual BottomNavigationItem Colors
如果Item的选中/未选中颜色需要特殊处理，可以调用
new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home")
.setActiveColor(R.color.orange)//设置选中的颜色
.setInActiveColor(R.color.teal)//设为未选中的颜色
5.阴影高度Elevation
属性：bnbElevation
如果不需要阴影或者想要自定义，可以设置为0dp，默认为8dp
6.自定义选项图标BottomNavigationItem Icon Customisations
可以设置选项，选中和未选中使用不同的图标
//setInactiveIcon()设置未选中的图标
new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setInactiveIcon(R.drawable.ic_home_black)
7.自动隐藏/手动隐藏
自动隐藏：
如果容器在Co-ordinator Layout布局内，默认情况下，向下滚动会隐藏，向上滚动会展示；通过调用方法setAutoHideEnabled(false)可以关闭该特性
手动隐藏：
调用方法
bottomNavigationBar.hide();//隐藏
bottomNavigationBar.show();//显示
展示和隐藏时动画模式
默认都是动画模式，参数传false可以关闭动画
bottomNavigationBar.hide(false);//关闭动画效果
bottomNavigationBar.show(false);//关闭动画效果
isHidden() 返回是否隐藏
3 BottomNavigationBar角标（小红点）Badges
基本使用
1.如何添加
- 每个item都可以添加badge
- 每个item又一个badges
- 首先创建一个BadgeItem，然后关联到item上
2.类型
- TextBadgeItem
- ShapeBadgeItem
3.代码示例
//setBadgeItem(badgeItem)
TextBadgeItem numberBadgeItem = new TextBadgeItem();
ShapeBadgeItem shapeBadgeItem = new ShapeBadgeItem();
bottomNavigationBar
.addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setActiveColorResource(R.color.orange).setBadgeItem(numberBadgeItem))
bottomNavigationBar
.addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setActiveColorResource(R.color.orange).setBadgeItem(shapeBadgeItem))
numberBadgeItem.setText("")// 更新数据
也可以自定义badgeItem
numberBadgeItem.setText("9") //显示的文本
.setBackgroundColor("#FF0000") //背景色
.setTextColor("#FFFFFF") //文本颜色
.setBorderColor("#000000") //border颜色
.setBorderWidth(5) //border宽度px
.setBackgroundColorResource(R.color.colorPrimaryDark) //背景色，资源文件获取
.setBorderColorResource(R.color.colorPrimary) //border颜色，资源文件获取
.setTextColorResource(R.color.colorAccent) //文本颜色，资源文件获取
.setAnimationDuration(30) //隐藏和展示的动画速度，单位毫秒,和setHideOnSelect一起使用
.setGravity(Gravity.RIGHT|Gravity.TOP) //位置，默认右上角
.setHideOnSelect(true); //true：当选中状态时消失，非选中状态显示,moren false
shapeBadgeItem.setShape(SHAPE_OVAL) //形状
.setShapeColor(Color.BLUE) //颜色
.setShapeColorResource(R.color.colorPrimaryDark) //颜色，资源文件获取
.setEdgeMarginInDp(this,0) //距离Item的margin，dp
.setEdgeMarginInPixels(20) //距离Item的margin，px
.setSizeInDp(this,10,10) //宽高，dp
.setSizeInPixels(5,5) //宽高，px
.setAnimationDuration(200) //隐藏和展示的动画速度，单位毫秒,和setHideOnSelect一起使用
.setGravity(Gravity.LEFT) //位置，默认右上角
.setHideOnSelect(true); //true：当选中状态时消失，非选中状态显示,moren false
4.badgeItem方法简介
| 属性 |
描述 |
方法 |
参数 |
|---|---|---|---|
| Hide On Select |
选中时隐藏，默认false |
setHideOnSelect() |
boolean |
| Animation Duration |
显示隐藏的动画时间，默认200 |
setAnimationDuration() |
int毫秒 |
| Hide |
隐藏并有动画效果 |
hide() |
|
| Hide with animation control |
隐藏时动画效果，默认有(true) |
hide() |
boolean |
| UnHide/Show |
显示并有动画效果 |
show() |
|
| UnHide/Show with animation control |
显示时动画效果，默认有(true) |
show() |
boolean |
| Toggle |
toggles badge between hide/show with animation |
toggle() |
|
| Toggle with animation control |
toggles badge between hide/show with/without animation |
toggle() |
|
| Is Hidden |
是否隐藏 |
isHidden() |
|
| Graviy |
设置位置，默认右上角 |
setGravity() |
Gravity.TOP/BOTTOM/LEFT/RIGHT任意组合 |
5.textBadgeItem方法简介
| 属性 |
描述 |
方法 |
参数 |
|---|---|---|---|
| Textt |
设置文本 |
setText() |
CharSequence |
| Text Color |
设置文本颜色，默认白色 |
setTextColorResource(), setTextColor() |
Resource/ColorCode(String)/Color |
| BackgroundColor |
设置背景颜色 |
setBackgroundColorResource(), setBackgroundColor() |
Resource/ColorCode(String)/Color |
| Border Width |
设置border宽度 |
setBorderWidth() |
int (px值) |
| Border Color |
设置border颜色 |
setBorderColorResource(), setBorderColor() |
Resource/ColorCode(String)/Color |
6.shapeBadgeItem方法简介
| 属性 |
描述 |
方法 |
参数 |
|---|---|---|---|
| Shape |
设置形状 |
setShape() |
SHAPE_OVAL(椭圆), SHAPE_RECTANGLE(矩形), SHAPE_HEART(心形), SHAPE_STAR_3_VERTICES(三角形), SHAPE_STAR_4_VERTICES(菱形), SHAPE_STAR_5_VERTICES(五角星), SHAPE_STAR_6_VERTICES(六角) |
| yanse |
设置颜色 |
setShapeColorResource(), setShapeColor() |
Resource/ColorCode(String)/Color |
| Shape Size |
设置宽高 |
setSizeInDp(), setSizeInPixels() |
int(width and height in pixels/dp) |
| Shape Margin |
Margin around the shape |
setEdgeMarginInDp(), setEdgeMarginInPixels() |
int (margin in pixels/dp) |
6.BottomNavigationBar样式
dimens.xml中
56dp 24dp 3dp 3dp 5dp 12sp 12sp - 1