android - 如何修改芯片的样式？

Question

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

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

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

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

任何人都可以建议吗？

标签： androidmaterial-designmaterial-components-androidandroid-chips

Answer 1

只需为您使用自定义样式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>

最终结果：