谷歌官方导航控件BottomNavigationBar的日常使用

BottomNavigationBar和其他控件的配合是完全解耦的,日常使用分为BottomNavigationBar+ViewPager 、BottomNavigationBar+FrameLayput

1 使用

  • BottomNavigationBar+ViewPager

直接上代码

  <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 定制

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样式

<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中

<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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏郭霖

Android滑动菜单特效实现,仿人人客户端侧滑效果,史上最简单的侧滑实现

人人客户端有一个特效还是挺吸引人的,在主界面手指向右滑动,就可以将菜单展示出来,而主界面会被隐藏大部分,但是仍有左侧的一小部分同菜单一起展示。 据说人人客户端的...

309100
来自专栏向治洪

Android仿拼多多拼团堆叠头像

序言 做电商的都知道,作为商品的一种售卖方式,拼团是是提供商品售卖的一种及时有效的方式,而在拼团市场中,拼多多无疑是做的最好的一家。于是,研究拼多多的售卖方式之...

24360
来自专栏移动开发

android 圆角图片的实现和封装

下面为主要源码,实现了 Picasso 中的 Transformation 接口。

32340
来自专栏李蔚蓬的专栏

6.4 Android绘图技巧(Primary:四大方法&Layer)

创建一个新的Layer到“栈”中,可以使用saveLayer(), savaLayerAlpha(), 从“栈”中推出一个Layer,可以使用restore()...

15920
来自专栏Android知识点总结

3-VIV-Android控件之ImageView

12620
来自专栏Jack的Android之旅

教你实现最简单的QQ消息item侧滑菜单

这次跟大家介绍怎么简单的实现类似QQ消息Item的左右滑动菜单的实现。首先见效果图先:

14920
来自专栏androidBlog

Android打造不一样的新手引导页面(一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

9210
来自专栏androidBlog

Android 圆形头像的两种实现方式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

25800
来自专栏向治洪

Android仿拼多多拼团堆叠头像

序言 做电商的都知道,作为商品的一种售卖方式,拼团是是提供商品售卖的一种及时有效的方式,而在拼团市场中,拼多多无疑是做的最好的一家。于是,研究拼多多的售卖方式之...

63580
来自专栏Android干货

关于安卓开发实现侧滑菜单效果

1.1K80

扫码关注云+社区

领取腾讯云代金券