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使用jmeter进行压力测试
Jul 09 Java/Android
java多态注意项小结
Oct 16 Java/Android
springboot如何接收application/x-www-form-urlencoded类型的请求
Nov 02 Java/Android
关于Spring配置文件加载方式变化引发的异常详解
Jan 18 Java/Android
springmvc直接不经过controller访问WEB-INF中的页面问题
Feb 24 Java/Android
使用HttpSessionListener监听器实战
Mar 17 Java/Android
Java实现二分搜索树的示例代码
Mar 17 Java/Android
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
Mar 21 Java/Android
SpringCloud Function SpEL注入漏洞分析及环境搭建
Apr 08 Java/Android
Java 数组的使用
May 11 Java/Android
Java异常体系非正常停止和分类
Jun 14 Java/Android
Java界面编程实现界面跳转
Jun 16 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&amp;&amp;mysql)一
2006/10/09 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
js跳转页面方法总结
2014/01/29 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
vuejs选中当前样式active的实例
2018/08/22 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
探究Python中isalnum()方法的使用
2015/05/18 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
python逆向入门教程
2018/01/15 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
对Python 数组的切片操作详解
2018/07/02 Python
Python日志模块logging基本用法分析
2018/08/23 Python
浅析Python3 pip换源问题
2020/01/06 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
汽车专业毕业生自荐信
2013/11/03 职场文书
4s客服专员岗位职责
2013/12/01 职场文书
测控技术自荐信
2014/06/05 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
银行贷款委托书范本
2014/10/11 职场文书
母亲去世追悼词
2015/06/23 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
Java 多线程并发FutureTask
2022/06/28 Java/Android