Android开发快速实现底部导航栏示例

tint 着色器

优点：去除“无用”图片，节省空间

配合bottomnavigationview，实现一个快速，简洁的tab栏

传统做法：tab 切换，字体变色、图片变色。至少给我提供八张图，四张默认，四张选中，然后通过 selector 文件设置

现在bottomnavigationview只需四张图！！！

依赖（androidx）

implementation 'com.google.android.material:material:1.1.0-alpha01'

布局

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".mainactivity">
    <framelayout
        android:id="@+id/flayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/nav_bottom_menu"
        android:background="@color/bg" />
    <view
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_above="@+id/nav_bottom_menu"
        android:background="#ffe1e0e0" />
    <com.google.android.material.bottomnavigation.bottomnavigationview
        android:id="@+id/nav_bottom_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignparentbottom="true"
        app:itembackground="@null"
        app:itemicontint="@color/tint_selector_menu_color"
        app:itemtextcolor="@color/tint_selector_menu_color"
        app:labelvisibilitymode="labeled"
        app:menu="@menu/nav_bottom_menu" />
    <com.makeramen.roundedimageview.roundedimageview
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_alignparentbottom="true"
        android:layout_centerinparent="true"
        android:layout_marginbottom="12dp"
        android:src="@drawable/ic_log"
        app:riv_corner_radius="200dp" />
</relativelayout>

编写渲染颜色选择器-tint_selector_menu_color

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/orange" android:state_checked="true" />
    <item android:color="@color/black" />
</selector>

menu 文件中 icon-nav_bottom_menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/iv_home"
        android:icon="@drawable/iv_home"
        android:title="首页" />
    <item
        android:id="@+id/iv_wechat"
        android:icon="@drawable/iv_wechat"
        android:title="视频" />
    <item
        android:id="@+id/riv_script"
        android:icon="@null"
        android:title="@null" />
    <item
        android:id="@+id/iv_pipi"
        android:icon="@drawable/iv_pipi"
        android:title="电影" />
    <item
        android:id="@+id/iv_mine"
        android:icon="@drawable/iv_mine"
        android:title="我的" />
</menu>

bottomnavigationview的点击事件

这里配合fragmen

/* menu显示彩色图标 */
        //navbottommenu.setitemicontintlist(null);
 /* 导航栏点击事件 */
        navbottommenu.setonnavigationitemselectedlistener(new bottomnavigationview.onnavigationitemselectedlistener() {
            @override
            public boolean onnavigationitemselected(@nonnull menuitem item) {
                switch (item.getitemid()) {
                    case r.id.iv_home: {
                        fragmentmanager.startfragmenthome(fragment_a.class);
                        return true;
                    }
                    case r.id.iv_wechat: {
                        fragmentmanager.startfragmenthome(fragment_b.class);
                        return true;
                    }
                    case r.id.iv_pipi: {
                        fragmentmanager.startfragmenthome(fragment_c.class);
                        return true;
                    }
                    case r.id.iv_mine: {
                        fragmentmanager.startfragmenthome(fragment_d.class);
                        return true;
                    }
                    default:
                        break;
                }
                return false;
            }
        });

配合viewpager实现tab栏

 /* 限制页面数，防止界面反复重新加载  */
    viewpager.setoffscreenpagelimit(4);
 // viewpager 滑动事件监听
        viewpager.addonpagechangelistener(new viewpager.onpagechangelistener() {
            @override
            public void onpagescrolled(int i, float v, int i1) {
            }
            @override
            public void onpageselected(int i) {
            //这里我做了中间凹凸按钮，所以要特别处理以下
            //如果没有我这种情况的，直接加上这个  navbottommenu.getmenu().getitem(i).setchecked(true); 就不用再加switch语句了
                switch (i) {
                    case 0:
                        //将滑动到的页面对应的 menu 设置为选中状态
                        navbottommenu.getmenu().getitem(i).setchecked(true);
                        break;
                    case 1:
                        //将滑动到的页面对应的 menu 设置为选中状态
                        navbottommenu.getmenu().getitem(i).setchecked(true);
                        break;
                    case 2:
                    case 3:
                        //将滑动到的页面对应的 menu 设置为选中状态
                        navbottommenu.getmenu().getitem(i + 1).setchecked(true);
                        break;
                    default:
                        break;
                }
            }
            @override
            public void onpagescrollstatechanged(int i) {
            }
        });
    }

对应的适配器

（仅供参考，大家也可以去参考以下别人写的代码）

public class fragpageradapter extends fragmentpageradapter {
    private list<fragment> fragmentlist;
    public fragpageradapter(@nonnull fragmentmanager fm, list<fragment> fragmentlist) {
        super(fm);
        this.fragmentlist = fragmentlist;
    }
    @override
    public fragment getitem(int position) {
        return fragmentlist.get(position);
    }
    @override
    public int getcount() {
        return fragmentlist.size();
    }
}

bottomnavigationview实现的tab栏，比自己以前写的代码更加简洁明了！！！

以上就是android开发快速实现底部导航栏示例的详细内容，更多关于android底部导航栏的资料请关注其它相关文章！