最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

BottomNavigationView选择后图片与文字切换等使用技巧总结

Android 太平洋学习网 浏览 评论

小编在使用BottomNavigationView控件之后,遇到了一些问题,比如BottomNavigationView导航icon图片没有保持原始图片的颜色;导航的icon图片与文字没有同时显示;在选择Tab选项的时候,不知道怎么切换选择后的图片以及文字的颜色等效果。

如图所示是小编实现自定义BottomNavigationView之后的效果,这就实现了导航选择之后的图片与文字的切换,在没有选择的情况下,图片是保持原始图片颜色的:

image.png

实现BottomNavigationView图片切换效果的前提:

要想实现BottomNavigationView的图片切换效果,首先要设置icon图标与文字的同时显示,因为默认情况下,BottomNavigationView控件只有在被选中的情况下,才会显示导航下方的文字,上图中默认状况下同时显示了icon图标与文字,是因为在“<android.support.design.widget.BottomNavigationView>”标签内加了如下这行代码:

app:labelVisibilityMode="labeled" #同时显示icon与文字描述

接着这样还不行,在默认状态下,即使我们的icon图标是黄色的,你把它放在BottomNavigationView里面的话,icon的图标都可能会变成绿色或者蓝色,失去了原来的色泽,这个时候我们就需要使用如下方法将icon图标的颜色设置成该图片的原始颜色,代码如下:

//修改为原图片颜色
mBottomNavigationView.setItemIconTintList(null);

经过上面这些步骤之后,我们就要开始学习如何切换selected选择后的图片与文字了,上方图片,小编是将灰白色的图片与文字,选择之后改成了橘黄色的样式,这个就需要用到color选择器与drawable选择器来实现文字与图片的切换了。

实现步骤:

小编在activity_main.xml文件中加入了BottomNavigationView的标签,用于实现app的底部导航,代码如下:

<android.support.design.widget.BottomNavigationView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottom_navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="start"
    android:background="@color/colorPrimary"
    app:itemTextColor="@color/navigation_item_color"
    app:labelVisibilityMode="labeled"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/bottom_navigation_items" />

标签说明:

“navigation_item_color”是一个color选择器的xml文件名称,itemTextColor设置的就是导航的文字颜色,颜色来源于color选择器,color选择器的新建过程是在res目录下右键点击new-->new resource directory之后,选择resource type为color即可,具体步骤请百度一下,然后加入如下代码,分别设置了导航选择之后与未选择状态下的颜色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--选择状态下的颜色-->
    <item android:color="@color/colorSelectedBar"  android:state_enabled="true" android:state_checked="true" />
    <!--未选择状态下的颜色-->
    <item android:color="@color/colorDefaultBar" android:state_enabled="true" android:state_checked="false" />
</selector>

“bottom_navigation_items”这个xml里面放置的是每个menu菜单的图片与文字说明,如果我们想改变切换后的图片,就需要在这每项Item菜单下加入一个drawable选择器,“android:icon”表示每项菜单的图片,后面的“navigation_home_icon”选择器分别设置选择后的图片与未选择的图片,如下是上图中的每项菜单的配置:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_home"
        android:enabled="true"
        android:icon="@drawable/navigation_home_icon"
        android:title="首页"
        app:showAsAction="ifRoom" />
		
     #其它item菜单省略。。。。
</menu>

要实现图片的切换功能,只需要在“android:icon=”这里加入每项菜单的drawable选择器即可,"navigation_home_icon"就是其中的一个drawable选择器xml文件,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <!--选择状态下的图片-->
    <item android:drawable="@mipmap/icon_home_selected" android:state_checked="true"/>
    <!--未选择状态下的图片-->
    <item android:drawable="@mipmap/icon_home" android:state_checked="false"/>
</selector>

所有菜单项的icon图标与文字颜色选择器加入完成之后,就会像如图所示这样:

image.png

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/android/2019/0131/891.html

    与本文相关的文章

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)

    网友最新评论