Question

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

<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

我也在这样做，对于渐变图标，我使用2张图像。至于文本渐变，我还在寻找一种方法。

图标渐变：

drawable / ic_home.xml：图标

from tkinter import *
import communication


class afficher_valeur:

    def __init__(self, master):
        frame= Frame(master)
        frame.pack()
        self.printButton = Button(frame, text="Show weight", command=self.printWeight)
        self.printButton.pack(side=LEFT)

    def printWeight(self):
        weight = communication.get_data()
        print(weight)

root = Tk()
b = afficher_valeur(root)
root.mainloop()

menu.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 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>

Answer 2

经过几个小时的尝试使文字渐变，我终于能够达到这个效果。关键是要到达 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>

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

2 个答案: