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

Question

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

BottomNavigation 代码：

<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" />

底部菜单背景：

 <?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>

- Kacper Kogut

Answer 1

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

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+）。

详见：https://dev59.com/2VgR5IYBdhLWcg3wC5in#47203888

- hohteri

---

sel_navigation xml类在哪里？ - Vijendra patidar

这是一个常规的颜色选择器。<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/orange" android:state_pressed="true"/> <item android:color="@color/orange" android:state_checked="true"/> <item android:color="@color/darkGray"/> </selector> - hohteri

Answer 2

我使用了两个不同的可绘制对象，一个用于底部导航菜单中的渐变色着色，另一个用于未选中状态。我创建了一个扩展自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”

- Kacper Kogut

---

@kacper，你能否提供一个详细的答案吗？我也处于同样的情况，无法弄清楚该怎么做。 - Tarun Kumar

@TarunKumar 当然，我已经按照这个帖子中的答案（https://dev59.com/2VgR5IYBdhLWcg3wC5in）进行了操作。如果您仍然遇到此问题，请告诉我，我会在此处复制我的代码。 - Kacper Kogut

@KacperKogut，我有一个带有渐变的选中状态图标和不同图标的未选中状态图标。但是由于我需要在else中提供icontint属性，所以图标显示为白色，并且icontint属性不接受渐变可绘制对象。因此，我无法在bottomnavbar中设置渐变图标。我需要知道您如何实现在选定状态下设置渐变图标。 - Tarun Kumar

@TarunKumar，你不能这样做。你必须为选中和未选中状态创建可绘制对象，当用户按下图标时，你必须更改可绘制对象而不是颜色。我更新了我的答案以向你展示我是如何做到的。 - Kacper Kogut

@KacperKogut 非常感谢您的帮助。现在它正在运行。 - Tarun Kumar

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));

- Ali Doran