使用自定义样式管理过滤器的最佳方法答案

【问题标题】：best way to manage filters with a custom style使用自定义样式管理过滤器的最佳方法
【发布时间】：2022-01-10 11:27:20
【问题描述】：

我在开发一个 Android 应用，我需要根据应用设计指南实施过滤器。

有2种过滤器：

带有图标
没有图标

过滤器可以选择/取消选择（或选中/取消选中）

每个案例都可以在这里看到：

过滤器将通过GridView 显示在多行的 3 列中。

我想知道哪种原生控件更适合实现此目的？

我尝试使用Chip，它有一个checked 参数，但似乎无法更改chipIcon 的位置。

我也试过Button，它允许用app:iconGravity改变图标位置，但是没有checked参数。

我也见过ToggleButtons，但它需要使用MaterialButtonToggleGroup，而我需要通过GridView 显示每个过滤器。

那么我需要创建一个自定义控件来实现这一点吗？

【问题讨论】：

标签： android android-layout button material-design android-chips

【解决方案1】：

您可以使用带有顶部可绘制对象的ToggleButton，如下所示：

<ToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/background_selector"
    android:checked="false"
    android:drawableTop="@drawable/car"
    android:drawablePadding="8dp"
    android:drawableTint="@drawable/icon_text_colors"
    android:padding="8dp"
    android:textColor="@drawable/icon_text_colors"
    android:textOff="Car wash"
    android:textOn="Car wash"
    android:textSize="14sp" />

background_selector.xml 在哪里

<selector>
    <item android:drawable="@android:color/darker_gray" android:state_checked="true"/>
    <item android:drawable="@android:color/holo_blue_light" />
</selector>

和 icon_text_colors.xml 看起来像这样：

<selector>
    <item android:color="@android:color/white" android:state_checked="true"/>
    <item android:color="@android:color/black" android:state_checked="false"/>
</selector>

未选中状态如下所示：

而选中状态如下所示：

对于没有图标的按钮，您根本不会为顶部指定可绘制对象。

这些不是你想要的颜色，但这就是想法。

【讨论】：

【解决方案2】：

我终于通过MaterialButton 和android:checkable 属性实现了这一点：

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.button.MaterialButton
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/CheackableCell"    
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:icon="@drawable/ic_carwash"
    app:iconGravity="textTop"
    app:iconPadding="12dp"
    tools:text="Car Wash"
    android:textAlignment="gravity"
    android:gravity="top|center"
    android:paddingBottom="4dp"
    android:checkable="true"/>

这与 Cheticamp 给出的解决方案非常接近。

【讨论】：