为什么我无法使用渐变颜色安卓更改图标颜色和文本底部导航

Question

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

https://i.stack.imgur.com/9FHeb.jpg

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

总之，这是我目前达到的最好的结果： 渐变文本

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

样品选择器

<?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 张图像。至于文本渐变，我仍在寻找一种方法。

图标渐变：

可绘制/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>

菜单.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>

在"活动"中，添加以下代码：

bottomNavView.setItemIconTintList(null);