BottomNavigationBar使用方法

最新推荐文章于 2025-05-31 12:36:23 发布

neabea2016

最新推荐文章于 2025-05-31 12:36:23 发布

阅读量413

点赞数

CC 4.0 BY-SA版权

分类专栏： Android

本文链接：https://blog.youkuaiyun.com/neabea2016/article/details/103784308

Android 专栏收录该内容

81 篇文章

订阅专栏

本文介绍了如何使用三方库BottomNavigationBar，通过Gradle引入并展示了XML配置。在fixed模式下实现底部导航栏，强调了fixed_height和bottom_navigation_height的设置，并提到fixed_label_active_to_inactive_ratio=1可防止图标缩放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转发这篇文章有角标的使用方式

使用三方BottomNavigationBar

gradle

    implementation 'com.ashokvarma.android:bottom-navigation-bar:2.1.0'

xml

 <com.ashokvarma.bottomnavigation.BottomNavigationBar
            android:id="@+id/bnb"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toTopOf="@id/bvn"
            app:layout_constraintStart_toStartOf="parent"
            app:bnbActiveColor="#3A97FF"
            app:bnbInactiveColor="#888888"
            app:bnbBackgroundStyle="background_style_static"
            app:bnbMode="mode_fixed"
            />

使用fixed模式实现简单的bottombar，注意fixed_height和bottom_navigation_height需要同时设置。
fixed_label_active_to_inactive_ratio = 1是不进行icon缩放
dimens.xml

    <!--bottomNavigationTab-->
    <dimen name="bottom_navigation_height">49dp</dimen>
    <dimen name="fixed_height">49dp</dimen>
    <dimen name="fixed_height_top_padding_inactive">0dp</dimen>
    <dimen name="fixed_height_top_padding_active">0dp</dimen>
    <dimen name="fixed_height_bottom_padding">4dp</dimen>
    <dimen name="fixed_label_active">10sp</dimen>
    <dimen name="fixed_label_inactive">10sp</dimen>
    <item name="fixed_label_active_to_inactive_ratio" format="float" type="dimen">1</item>

Activity

mBinding.bnb.addItem(new BottomNavigationItem(R.mipmap.tab_home_sec,R.string.mainpage).setInactiveIconResource(R.mipmap.tab_home_nor))
                .addItem(new BottomNavigationItem(R.mipmap.tab_find_sec,R.string.found).setInactiveIconResource(R.mipmap.tab_find_nor))
                .addItem(new BottomNavigationItem(R.mipmap.tab_news_sec,R.string.message).setInactiveIconResource(R.mipmap.tab_news_nor))
                .addItem(new BottomNavigationItem(R.mipmap.tab_my_sec,R.string.mine).setInactiveIconResource(R.mipmap.tab_my_nor)).initialise();
        mBinding.bnb.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
            @Override
            public void onTabSelected(int position) {
                switch (position){
                    case 0:
                        mBinding.vp.setCurrentItem(0);
                        break;
                    case 1:
                        mBinding.vp.setCurrentItem(1);
                        break;
                    case 2:
                        mBinding.vp.setCurrentItem(2);
                        break;
                    case 3:
                        mBinding.vp.setCurrentItem(3);
                        break;
                }
            }

            @Override
            public void onTabUnselected(int position) {

            }

            @Override
            public void onTabReselected(int position) {

            }
        });
        mBinding.vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                //将滑动到的页面对应的 menu 设置为选中状态
                mBinding.bnb.selectTab(i);
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });