Android关于BottomNavigationView使用指南

目录
  • 前言
  • 一、初识BottomNavigationView
  • 二、BottomNavigationView中的颜色关键实现代码解析(举例)
  • 三、开始解决问题
    • 1.如何修改图标颜色
    • 2.如何使图标点击颜色不改变
    • 3.如何使点击时字体不改变大小
    • 4.当你的图标是多色系时
    • 5.不想要ActionBar
  • 四、总结

前言

好久不见,计蒙回来了,最近有粉丝投稿了几个关于BottomNavigationView的一些问题,今天发篇比较详细的文章总结一下,希望能够对你有所帮助。

提示:以下是本篇文章正文内容,下面案例可供参考

一、初识BottomNavigationView

常用属性:

  • app:itemTextColor 文字的颜色,可以通过selector来控制选中和未选中的颜色
  • app:itemIconTint 图标的颜色,可以通过selector来控制选中和未选中的颜色
  • app:itemIconSize 图标大小,默认24dp
  • app:iteamBackground 背景颜色,默认是主题的颜色
  • app:itemRippleColor 点击后的水波纹颜色
  • app:itemTextAppearanceActive 设置选中时文字样式
  • app:itemTextAppearanceInactive 设置默认的文字样式
  • app:itemHorizontalTranslationEnabled 在label visibility 模式为selected时item水平方向移动
  • app:elevation 控制控件顶部的阴影
  • app:labelVisibilityMode 文字的显示模式
  • app:menu 指定菜单xml文件(文字和图片都写在这个里面)

在Android Studio创建新项目时,会有很多小伙伴在模块中选择此类型的Activity,如下。

项目运行效果图如下:

二、BottomNavigationView中的颜色关键实现代码解析(举例)

是如何定义的颜色的。

关键代码如下(获取xml中的属性):

 ColorStateList backgroundTint =
        MaterialResources.getColorStateList(
            context, a, R.styleable.BottomNavigationView_backgroundTint);
    DrawableCompat.setTintList(getBackground().mutate(), backgroundTint);

    setLabelVisibilityMode(
        a.getInteger(
            R.styleable.BottomNavigationView_labelVisibilityMode,
            LabelVisibilityMode.LABEL_VISIBILITY_AUTO));
    setItemHorizontalTranslationEnabled(
        a.getBoolean(R.styleable.BottomNavigationView_itemHorizontalTranslationEnabled, true));

    int itemBackground = a.getResourceId(R.styleable.BottomNavigationView_itemBackground, 0);
    if (itemBackground != 0) {
      menuView.setItemBackgroundRes(itemBackground);
    } else {
      ColorStateList itemRippleColor =
          MaterialResources.getColorStateList(
              context, a, R.styleable.BottomNavigationView_itemRippleColor);
      setItemRippleColor(itemRippleColor);
    }

可以很明显的看到起到关键作用的是ColorStateList,而处理好这个传入的参数即可解决颜色问题。

三、开始解决问题

1.如何修改图标颜色

这里提供两种解决方式
xml中解决
首先:新建一个selector_color文件,设置两种状态的颜色

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#63F7DE" android:state_checked="true"  />
    <item android:color="@android:color/black" android:state_checked="false"/>
</selector>

然后在BottomNavigationView中调用此文件

app:itemIconTint="@color/selector_color"

java文件中解决:
传入一个自定义的ColorStateList。
并将其以参数传入view中

navView.setItemIconTintList();

2.如何使图标点击颜色不改变

在java中调用其setItemIconTintList,传参为空即可

navView.setItemIconTintList(null);

3.如何使点击时字体不改变大小

在dimens文件中设置以下两个的值为同一大小即可

    //防止字体出现变大效果
    <dimen name="design_bottom_navigation_active_text_size">10dp</dimen>
    <dimen name="design_bottom_navigation_text_size">10dp</dimen>

4.当你的图标是多色系时

在java中调用其setItemIconTintList,传参为空

navView.setItemIconTintList(null);

然后设置图片状态的item中drawable的选择,举例如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_home_black_24dp" android:state_checked="true"  />
    <item android:drawable="@drawable/ic_home_black_false_24dp" android:state_checked="false"/>
</selector>

最后在menu中调用此文件即可。举例文件名为:ic_home

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

为了节省时间,只修改了第一个,效果如下

5.不想要ActionBar

1.将xml中paddingTop这行删除

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">

2.在java中将以下这行删除

NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);

3.设置APP样式为NoActionBar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

四、总结

到此这篇关于Android关于BottomNavigationView使用指南的文章就介绍到这了,更多相关Android BottomNavigationView内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-01-09

Android BottomNavigationView底部导航效果

BottomNavigationView 很早之前就在 Material Design 中出现了,但是直到 Android Support Library 25 中才增加了 BottomNavigationView 控件.也就是说如果使用官方的BottomNavigationView控件必须让targetSdkVersion >= 25,这样才能引入25版本以上的兼容包. 接下来我们来看看如何使用BottomNavigationView. 使用BottomNavigationView 需要添加d

android SectorMenuView底部导航扇形菜单的实现代码

这次分析一个扇形菜单展开的自定义View, 也是我实习期间做的一个印象比较深刻的自定义View, 前后切换了很多种实现思路, 先看看效果展示 效果展示 效果分析 点击圆形的FloatActionBar, 自身旋转一定的角度 菜单像波纹一样扩散开来 显示我们添加的item 实现分析 使用adapter适配器去设置View, 用户可自定义性强, 不过每次使用需要去设置Adapter, 较为繁琐 直接调用ItemView, 将ImageView和TextView写死, 用户操作简单, 但是缺乏可定制性

Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果

BottomBar BottomBar是Github上的一个开源框架,因为从1.3.3开始不支持fragments了,要自己配置,弄了很久,不管是app的fragment还是V4 的程序总是总是闪退.于是就用这种方式实现了,效果还不错.github有详细说明,多余的就不说了. 这个roughike是这个项目的所有者(大神致敬). 我用的是Android studio开发,fragment全部导的V4的包(以为最开始就支持的是v4的,后面也支持了app.fragment). 首先是dependen

Android仿微信页面底部导航效果代码实现

大家在参考本地代码的时候要根据需要适当的修改,里面有冗余代码小编没有删除.好了,废话不多说了,一切让代码说话吧! 关键代码如下所示: .java里面的主要代码 public class MainActivity extends BaseActivity implements TabChangeListener { private Fragment[] fragments; private FragZaiXianYuYue fragZaiXianYuYue; private FragDaoLuJi

Android实现底部导航栏功能

本文实例为大家分享了Android实现底部导航栏功能的具体代码,供大家参考,具体内容如下 实验效果: (1)在drawable文件夹下新建tab_menu_bg.xml文件,具体代码如下: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item

Android实现底部导航栏功能(选项卡)

现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其中各个类的作用以及资源文件就不详细解释了,还有资源图片(在该Demo中借用了其它应用程序的资源图片)也不提供了,大家可以自行更换自己需要的资源图片.直接上各个布局文件或各个类的代码: 1. res/layout目录下的 maintabs.xml 源码: <?xml version="1.0&q

Android实现底部弹窗效果

本文实例为大家分享了Android实现底部弹窗效果的具体代码,供大家参考,具体内容如下 源代码地址:https://github.com/luoye123/Box 东西很简单,我就直接亮代码了: 1.activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/

Android BottomNavigationBar底部导航控制器使用方法详解

最近Google在自己推出的Material design中增加了Bottom Navigation导航控制.Android一直没有官方的导航控制器,自己实现确实是五花八门,有了这个规定之后,就类似苹果的底部Toolbar,以后我们的APP就会有一致的风格,先看一张效果: 这是官方在Material design中给出一张图,确实很不错. 1.BottomNavigationBar的下载地址 https://github.com/Ashok-Varma/BottomNavigation 2.使用

Android BottomNavigationBar底部导航的使用方法

简介:Google推出的BottomNavigationBar底部导航栏 1 .基本的使用(add和replace方式) 2.扩展添加消息和图形 3.修改图片大小与文字间距 版本更新:2019-5-13 补充布局文件activity_main <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/

Android实现底部导航栏的主界面

在主流app中,应用的主界面都是底部含有多个标签的导航栏,点击可以切换到相应的界面,如图: 接下来将描述下其实现过程. 1.首先是分析界面,底部导航栏我们可以用一个占满屏幕宽度.包裹着数个标签TextView.方向为横向horizontal的线性布局LinearLayout.上方则是一个占满剩余空间的FrameLayout. activity_main.xml <?xml version="1.0" encoding="utf-8"?> <Line