为什么我不能用渐变色android更改图标颜色和文本底部导航

Question

我想制作像示例图像一样的颜色。但是我在使用颜色 gradient 更改图标和文本时发现了一个问题，因为底部导航中的属性只接受颜色。 请帮助我，上帝保佑你。

https://imgur.com/aGKHhwW

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:theme="@style/Widget.BottomNavigationView"
    android:background="@drawable/bg_bottom_nav"
    app:itemIconTint="@drawable/bottom_nav_icon_color_selector"
    app:itemTextColor="@drawable/bottom_nav_icon_color_selector"
    app:labelVisibilityMode="labeled"
    app:layout_constraintBottom_toBottomOf="parent"
    app:itemIconSize="22dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/bottom_nav_menu" />

Answer 1

经过几个小时的尝试使文本渐变，我终于能够实现这个效果。关键是要到达BottomNavigationItemView里面的MaterialTextView。这是我在活动（Kotlin）的onCreate() 方法中使用的代码：

for (bottomNavigationItem in binding.bottomNavigation[0] as BottomNavigationMenuView) {
            (((bottomNavigationItem as BottomNavigationItemView)
                .getChildAt(1) as BaselineLayout)
                .getChildAt(1) as MaterialTextView)
                .setGradientText()
        }

setGradientText() 方法只是装饰文本。在您的情况下，您需要添加第三种颜色和设置角度：

fun MaterialTextView.setGradientText() {
    paint.shader = LinearGradient(
        0f,
        0f,
        paint.measureText(text.toString()),
        textSize,
        intArrayOf(
            ContextCompat.getColor(context, R.color.main_gradient_start),
            ContextCompat.getColor(context, R.color.main_gradient_end)
        ),
        null, Shader.TileMode.CLAMP
    )
}

此代码将装饰底部导航中的每个元素，并且仅在选择元素时它们才会渐变。我不确定是否可以同时对活动和非活动元素进行渐变。

另外，如果您需要我的BottomNavigationView 的代码：

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/black"
            app:itemTextColor="@drawable/bottom_menu_selector"
            app:labelVisibilityMode="labeled"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:menu="@menu/bottom_menu" />

总之，这是我目前达到的最好结果： Gradient text

关于图标：您需要为您的图标创建选择器并将它们添加到您的菜单文件中，如下所示：

样本选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Icon active gradient -->
    <item android:drawable="@drawable/ic_home_color" android:state_pressed="true"/>
    <item android:drawable="@drawable/ic_home_color" android:state_checked="true"/>
    <!-- Icon default -->
    <item android:drawable="@drawable/ic_home"/>
</selector>

菜单文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home"
        android:icon="@drawable/home_selector"
        android:title="@string/home" />
    <item
        android:id="@+id/catalogue"
        android:icon="@drawable/catalogue_selector"
        android:title="@string/catalogue" />
    <item
        android:id="@+id/collections"
        android:icon="@drawable/collections_selector"
        android:title="@string/collections" />
    <item
        android:id="@+id/profile"
        android:icon="@drawable/profile_selector"
        android:title="@string/profile" />
</menu>

Answer 2

我也在这样做，对于渐变图标，我使用了 2 个图像。至于文字渐变，我还在找方法。

图标渐变：

drawable/ic_home.xml: 图标

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Icon active gradient -->
    <item android:drawable="@drawable/icon_home_active" android:state_pressed="true"/>
    <item android:drawable="@drawable/icon_home_active" android:state_checked="true"/>
    <!-- Icon default -->
    <item android:drawable="@drawable/icon_home"/>
</selector>

menu.xml

<?xml version="1.0" encoding="utf-8"?>
<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" />
    ....
</menu>

并在Activity中添加如下代码：

bottomNavView.setItemIconTintList(null);