android BottomTabBar的简单使用(类似:京东底部导航栏)

最新推荐文章于 2024-04-14 20:30:29 发布

Banner Kane

最新推荐文章于 2024-04-14 20:30:29 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：控件使用文章标签：导航 bottomTabB

本文链接：https://blog.csdn.net/YuEOrange/article/details/78781790

控件使用专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了如何在 Android 应用中使用 BottomTabBar 来创建类似京东底部导航栏的功能。通过第三方库集成，结合 Fragment 和 RadioButton，实现了带有图片的导航栏。文章首先展示了效果截图，接着详细说明了添加依赖、布局文件配置以及 MainActivity 中的代码实现。尽管作者在文中提到点击事件可以根据需求自定义，但并未给出具体实现，并指出其使用的 Android Studio 版本和 SDK 版本。

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

一言不合就上图

这里写图片描述
bottomTabBar是第三方集成的fragment加radioButton和图片
最重要是导航栏上可以加上图片
老套路先注入依赖：

//bottomTabBar
    compile 'com.hjm:BottomTabBar:1.1.1'

然后是布局：

<com.hjm.bottomtabbar.BottomTabBar
        android:id="@+id/bottomTabBar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></com.hjm.bottomtabbar.BottomTabBar>

接着就是MainActivity里面代码实现：

//初始化控件
BottomTabBar btb = (BottomTabBar) findViewById(R.id.bottomTabBar);
        btb.init(getSupportFragmentManager())//初始化方法布局管理
                .setFontSize(8)//设置文字大小
                //参数1：选中后的颜色，参数2：选中前的颜色
                .setChangeColor(Color.RED, Color.DKGRAY)
                //参数1：文字内容。参数2：导航图片。参数3：切换哪个fragment类
                .addTabItem("首页", R.mipmap.ic_nav_home, FragmentFirstPage.class)
                .addTabItem("分类", R.mipmap.ic_nav_class, FragmentFenLei.class)
                .addTabItem("购物车", R.mipmap.ic_nav_cart, FragmentCart.class)
                .addTabItem("我的", R.mipmap.ic_nav_user, FragmentMine.class)
                //是否显示导航和上边的fragment的区分线(黑色的线太难看了一般我不喜欢在那里设)
                //false为不显示那条区分线，true为显示那条区分线
                .isShowDivider(false);

其中四个fragment类自己写去（注意点写完四个fragment后不用在MainActivity里面实例化）

这就完事儿了

下面是点击事件：
根据你自己的需求，爱要不要反正我不要

//点击事件
        btb.setOnTabChangeListener(new BottomTabBar.OnTabChangeListener() {
            @Override
            public void onTabChange(int position, String name) {
                switch (position)
                {
                    case 0:
                        Toast.makeText(MainActivity.this,"first page",Toast.LENGTH_SHORT).show();
                        break;
                    case 1:
                        Toast.makeText(MainActivity.this,"fen lei",Toast.LENGTH_SHORT).show();
                        break;
                    case 2:
                        Toast.makeText(MainActivity.this,"cart",Toast.LENGTH_SHORT).show();
                        break;
                    case 3:
                        Toast.makeText(MainActivity.this,"mine",Toast.LENGTH_SHORT).show();
                        break;
                }
            }
        });