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 相关文章推荐
SpringBoot项目中控制台日志的保存配置操作
Jun 18 Java/Android
springboot项目以jar包运行的操作方法
Jun 30 Java/Android
详解Spring Boot使用系统参数表提升系统的灵活性
Jun 30 Java/Android
maven依赖的version声明控制方式
Jan 18 Java/Android
利用Sharding-Jdbc进行分库分表的操作代码
Jan 22 Java/Android
Java详细解析==和equals的区别
Apr 07 Java/Android
Android studio 简单计算器的编写
May 20 Java/Android
解决spring.thymeleaf.cache=false不起作用的问题
Jun 10 Java/Android
SpringBoot项目部署到阿里云服务器的实现步骤
Jun 28 Java/Android
SpringBoot详解自定义Stater的应用
Jul 15 Java/Android
JDK8中String的intern()方法实例详细解读
Sep 23 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
咖啡与牛奶
2021/03/03 冲泡冲煮
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
python实现比较文件内容异同
2018/06/22 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
员工拓展培训方案
2014/02/15 职场文书
工程资料员岗位职责
2014/03/10 职场文书
新闻发布会主持词
2014/03/28 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
鲁迅故居导游词
2015/02/05 职场文书
大学生党员个人总结
2015/02/13 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
图解上海144收音机
2021/04/22 无线电
python单元测试之pytest的使用
2021/06/07 Python
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android
MySQL数据库 任意ip连接方法
2022/05/20 MySQL