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

Question

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

有两种过滤器：

带有图标
没有图标

过滤器可以是selected/unselected（或checked/unchecked）

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

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

我想知道哪个原生控件更适合实现这个？

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

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

我也看过 ToggleButtons 但它需要使用 MaterialButtonToggleGroup，而我需要通过 GridView.

显示每个过滤器

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

Answer 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>

未选中状态如下所示：

选中状态如下所示：

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

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

Answer 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 给出的解决方案。

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

best way to manage filters with a custom style

android

button

android-layout

material-design

android-chips