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

用户1696846

发布于 2023-08-25 14:21:14

2380

发布于 2023-08-25 14:21:14

文章被收录于专栏：Android自学Android自学

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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

android