底部导航视图 - 渐变图标色调

Question

我在按下图标时使用选择器和渐变颜色更改了 BottomNavigationView 中的图标色调，但是将图标色调更改为渐变 Android 使我所有的图标都变成了紫色。我的问题是是否有可能将 BottomNavigationView 中的图标色调更改为渐变色？

底部导航代码：

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_bottom_main"
        android:layout_width="match_parent"
        app:itemIconTint="@color/bottom_menu_background"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_navigation_main"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

bottom_menu_background:

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:color="@color/button_gradient_blue" android:state_checked="true" />
     <item android:color="@color/baseGray"/>
 </selector>

button_gradient_blue:

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="@dimen/base_button_radius" />
            <gradient android:angle="0" android:startColor="@color/light_blue_gradient_start"
            android:endColor="@color/light_blue_gradient_end"  />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="@dimen/base_button_radius" />
            <solid android:color="@color/button_pressed_color"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="@dimen/base_button_radius" />
            <gradient android:angle="0" android:startColor="@color/light_blue_gradient_start"
            android:endColor="@color/light_blue_gradient_end" />
        </shape>
    </item>
</selector>

Answer 1

好的，我设法通过使用两种不同的可绘制对象来做到这一点，一种具有渐变色调，另一种用于在底部导航菜单中未选中。

我创建了扩展自 BottomNavigationView 的自定义视图，并且创建了用于创建菜单的自定义方法：

fun initMenu(){
    itemIconTintList = null
    var firstStart = true
    setOnNavigationItemSelectedListener {
        val index = it.itemId
        firstStart = false
        menu.forEach {
            if (it.isChecked && !firstStart) {
                if (it.itemId == index)
                    return
                it.isChecked = false
                it.icon = ContextCompat
                    .getDrawable(context, UNSELECTED_MAP[it.itemId]!!)
        }

    }
    it.icon = ContextCompat.getDrawable(context, SELECTED_MAP[it.itemId]!!)

}

其中 UNSELECTED_MAP 和 SELECTED MAP 是一个 HashMap，项目菜单 ID 为 "key"，可绘制资源为 "value"

Answer 2

比创建子类更简单的实现方法是创建两个单独的可绘制对象，然后创建一个选择器，指定为底部导航视图的菜单图标。

activity.xml:

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    app:itemIconTint="@drawable/sel_navigation"
    app:itemTextColor="@drawable/sel_navigation_label"
    app:menu="@menu/navigation" />

menu/navigation.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/navigation_history"
    android:icon="@drawable/ic_history_selector"
    android:title="@string/title_history" />
</menu>

drawable/ic_history_selector.xml:

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_history_selected" android:state_pressed="true" />
<item android:drawable="@drawable/ic_history_selected" android:state_checked="true"/>
<item android:drawable="@drawable/ic_history"/>
</selector>

drawable/ic_history.xml:

<vector ...>
<path android:fillColor="@color/gradient_orange" .../>
</vector>

color/gradient_orange.xml:

<gradient xmlns:android="http://schemas.android.com/apk/res/android"
android:angle="0"
android:endColor="@color/orange"
android:startColor="@color/lightOrange"
android:startX="0"
android:endX="0"
android:startY="0"
android:endY="100"
android:type="linear" />

最后，您需要将图标色调列表设置为 null，这样它就不会使用 XML 中的图标色调颜色。与渐变效果完美 (API 24+).

参见：

Answer 3

在 java 中设置颜色 bottomNav.addItemNav(new ItemNav(this, R.drawable.ic_home, getResources().getString(R.string.home)).addColorAtive(R.color.yellow_selected_color).addColorInative(R.color.text_color));

底部导航视图 - 渐变图标色调

Bottom navigation view - gradient icon tint

android

gradient

material-design

bottomnavigationview