着色器tint+颜色选择器color_selector轻松实现组件的点击反馈效果(反馈色)

1,362 阅读1分钟

实现组件点击反馈色一般有四种方法。

  1. 动态实现(太麻烦)
  2. drawable_selector(如果是图片资源,需要两张图片,正常效果图和反馈效果图)
  3. background="?attr/selectableItemBackground"设置点击背景色,有局限性
  4. 通过CardView标签进行设置

现在发现了另一个更简便好用的方法。

将反馈色写进color_selector赋给tint或backgroundTint属性。优势:当有多个组件需要实现相同的反馈效果(修改png图片颜色或是修改背景色)时,只需要写一个color_selector即可。 (如果是用drawable_selector方法,每个组件都需要单独写一个selector,且每个selector都需要两个drawable资源)。

tint可以直接对png资源的有效部分进行着色,当要修改资源图片的颜色时,直接添加tint属性覆盖相应颜色,如果要修改背景色,使用backgroundTint指定覆盖颜色。 示例代码:

<ImageView
        android:id="@+id/iv_star_1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/ic_star"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/iv_star_2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/ic_star"
        android:tint="@color/purple_200"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/iv_star_1"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/v_star_3"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@drawable/ic_star"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/iv_star_2"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/v_star_4"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@drawable/ic_star"
        android:backgroundTint="@color/purple_200"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/v_star_3"
        app:layout_constraintTop_toTopOf="parent" />

ic_star:(五角星里面是白色线条,不是镂空的,所以也会被着色)

ic_star.png 截屏2021-04-01下午6.51.51.png

效果图:

截屏2021-04-01下午6.48.28.png

如果要实现按钮的点击反馈效果,将反馈色写进selector再赋给tint即可。 在res下新建color文件夹,新建color_tint文件,设置按下时的反馈颜色:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/purple_200" android:state_pressed="true" />
</selector>

使用:

<ImageButton
    android:id="@+id/bt_test"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@null"
    android:scaleType="fitCenter"
    android:src="@drawable/home_ic_report_ele"
    android:tint="@color/color_tint"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent" />
<Button
    android:id="@+id/bt_test2"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@drawable/home_ic_report_ele"
    android:backgroundTint="@color/color_tint"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/bt_test" />

感谢观看(效果请自行脑补)