如何修改芯片的样式？

Question

我需要使用芯片制作以下UI

我已经实现了芯片并使其可检查，但是我不知道如何将其样式更改为图片

我更改了笔触颜色，背景颜色和笔触宽度

所以正常芯片没有问题，我的问题是检查的芯片是蓝色的

有人可以建议吗？

Answer 1

最简单的方法是使用ToggleButton或checked的{​​{1}}。作为not checked，您可以使用background设置文件。

您可以使用它们创建布局：

states

作为<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:padding="40dp"> <ToggleButton android:id="@+id/toggle_button" android:layout_width="100dp" android:layout_height="wrap_content" android:background="@drawable/background" /> <ToggleButton android:id="@+id/toggle_button2" android:layout_width="100dp" android:layout_height="wrap_content" android:layout_marginLeft="40dp" android:background="@drawable/background" android:checked="true" /> </LinearLayout> ，您可以设置包含状态列表的文件：

background

所有状态（<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/blue_shape" android:state_checked="true" /> <item android:drawable="@drawable/grey_shape" /> </selector> 和checked-最后一个状态）都可以是形状：

res>可绘制> grey_shape.xml

default

res>可绘制> blue_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#D6D6D6" />

    <corners android:radius="50dp" />

    <stroke
        android:width="2dp"
        android:color="#727272" />

</shape>

当按钮为<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#81D7FF" /> <corners android:radius="50dp" /> <stroke android:width="2dp" android:color="#1890D1" /> </shape> 和checked时，您会期望使用不同的背景

Answer 2

只需为您的Chip使用自定义样式：

<com.google.android.material.chip.Chip
      style="@style/Colors_Widget.MaterialComponents.Chip.Choice"
      ..>

具有这种样式：

  <style name="Colors_Widget.MaterialComponents.Chip.Choice" parent="Widget.MaterialComponents.Chip.Choice">
    <item name="chipBackgroundColor">@color/color_choice_chip_background_color</item>
    <item name="chipStrokeColor">@color/color_choice_chip_strokecolor_selector</item>
    <item name="chipStrokeWidth">1dp</item>
    <item name="android:textColor">@color/color_choice_chip_text_color</item>
  </style>

其中 chipBackgroundColor 是选择器。像这样：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- 24% opacity -->
  <item android:alpha="0.24" android:color="@color/primaryLightColor" android:state_enabled="true" android:state_selected="true"/>
  <item android:alpha="0.24" android:color="@color/primaryLightColor" android:state_enabled="true" android:state_checked="true"/>
  <!-- 12% of 87% opacity -->
  <item android:alpha="0.10" android:color="#FFF" android:state_enabled="true"/>
  <item android:alpha="0.12" android:color="#FFF"/>
</selector>

chipStrokeColor 和 android:textColor 是选择器，例如：

<selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:color="@color/primaryLightColor" android:state_enabled="true" android:state_selected="true"/>
  <item android:color="@color/primaryLightColor" android:state_enabled="true" android:state_checked="true"/>
  <!-- 87% opacity. -->
  <item android:alpha="0.87" android:color="#C6CCCD" android:state_enabled="true"/>
  <!-- 38% of 87% opacity. -->
  <item android:alpha="0.33" android:color="#C6CCCD"/>

</selector>

最终结果：