Android开发之底部导航栏的快速实现


Posted in Java/Android onApril 28, 2022

Tint 着色器

优点:去除“无用”图片,节省空间

配合BottomNavigationView,实现一个快速,简洁的Tab栏

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

现在BottomNavigationView只需四张图!!!

Android开发之底部导航栏的快速实现

Android开发之底部导航栏的快速实现

依赖(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开发快速实现底部导航栏示例的详细内容!


Tags in this post...

Java/Android 相关文章推荐
详解JAVA中的OPTIONAL
Jun 14 Java/Android
SpringBoot实现异步事件驱动的方法
Jun 28 Java/Android
JavaGUI模仿QQ聊天功能完整版
Jul 04 Java/Android
java如何实现socket连接方法封装
Sep 25 Java/Android
SSM项目使用拦截器实现登录验证功能
Jan 22 Java/Android
Java中的随机数Random
Mar 17 Java/Android
Java字符串逆序方法详情
Mar 21 Java/Android
java项目构建Gradle的使用教程
Mar 24 Java/Android
java版 联机五子棋游戏
May 04 Java/Android
springboot集成redis存对象乱码的问题及解决
Jun 16 Java/Android
Java实现字符串转为驼峰格式的方法详解
Jul 07 Java/Android
Spring boot admin 服务监控利器详解
Aug 05 Java/Android
Java8 CompletableFuture 异步回调
Apr 28 #Java/Android
Springboot-cli 开发脚手架,权限认证,附demo演示
Apr 28 #Java/Android
Java 异步任务计算FutureTask
Apr 28 #Java/Android
带你了解Java中的ForkJoin
Android 界面一键变灰 深色主题工具类
mybatis-plus模糊查询指定字段
Spring Data JPA框架Repository自定义实现
Apr 28 #Java/Android
You might like
随机头像PHP版
2006/10/09 PHP
PHP 采集程序中常用的函数
2009/12/09 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
php简单防盗链实现方法
2015/07/29 PHP
jquery中each方法示例和常用选择器
2014/07/08 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
JSON生成Form表单的方法示例
2018/11/21 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
Python中zfill()方法的使用教程
2015/05/20 Python
python递归全排列实现方法
2018/08/18 Python
python实现字符串和字典的转换
2018/09/29 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
Python连接Impala实现步骤解析
2020/08/04 Python
幼儿园庆六一游园活动方案
2014/01/29 职场文书
企业指导教师评语
2014/04/28 职场文书
自主招生推荐信范文
2014/05/10 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
个人四风问题整改措施
2014/10/24 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
十七岁的单车观后感
2015/06/12 职场文书
高考升学宴主持词
2019/06/21 职场文书
Golang解析JSON对象
2022/04/30 Golang