BottomNavigationBar和其他控件的配合是完全解耦的，日常使用分为BottomNavigationBar ViewPager 、BottomNavigationBar FrameLayput
1 使用
- BottomNavigationBar ViewPager
直接上代码
代码语言：javascript复制 <android.support.v4.view.ViewPager
android:id="@ id/view_pager"
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"/> private BottomNavigationBar mBottomNavigationBar;
private ViewPager viewPager;
private List<Fragment> fragments2 = 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<Fragment> fragments2;
public SectionsPagerAdapter(FragmentManager fm, List<Fragment> 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
<FrameLayout
android:id="@ id/fram_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@ id/bottom_navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"/> private BottomNavigationBar mBottomNavigationBar;
private List<Fragment> 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 定制
代码语言：javascript复制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.代码示例
代码语言：javascript复制//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
代码语言：javascript复制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 false4.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样式
代码语言：javascript复制<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@ id/bottomBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:bnbMode="mode_fixed"
app:bnbActiveColor="#262626"
app:bnbInactiveColor="#888888" />dimens.xml中
代码语言：javascript复制<resources>
<!-- BottomNavigation配置 -->
<dimen name="fixed_height">56dp</dimen> <!-- 高度 -->
<dimen name="fixed_icon_grid">24dp</dimen> <!-- icon大小 -->
<dimen name="fixed_height_top_padding_inactive">3dp</dimen> <!-- 未选中时顶部padding -->
<dimen name="fixed_height_top_padding_active">3dp</dimen> <!-- 选中时顶部padding -->
<dimen name="fixed_height_bottom_padding">5dp</dimen> <!-- 底部padding -->
<dimen name="fixed_label_active">12sp</dimen> <!-- 选中字体大小 -->
<dimen name="fixed_label_inactive">12sp</dimen> <!-- 未选中字体大小 -->
<item name="fixed_label_active_to_inactive_ratio" format="float" type="dimen">1</item> <!-- 默认文字大小缩放比率 -->
</resources>
