BottomNavigationBar和其他控件的配合是完全解耦的，日常使用分为BottomNavigationBar+ViewPager 、BottomNavigationBar+FrameLayput
1 使用
- BottomNavigationBar+ViewPager
直接上代码
|
1 2 3 4 5 6 7 8 9 10 11 |
<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"/> |
|
1 2 3 |
private BottomNavigationBar mBottomNavigationBar; private ViewPager viewPager; private List<Fragment> fragments2 = new ArrayList<>(); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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"/> |
|
1 2 |
private BottomNavigationBar mBottomNavigationBar; private List<Fragment> fragments = new ArrayList<>(); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
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.代码示例
|
1 2 3 4 5 6 7 8 9 10 |
//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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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样式
|
1 2 3 4 5 6 7 8 |
<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中
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
Comments | NOTHING