如何修改芯片的样式？

Question

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

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

我更改了描边颜色和背景颜色以及描边宽度

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

谁能给点建议？

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>

最终结果：

Answer 2

最简单的方法是使用ToggleButton，它可以是checked 或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 和 default - 最后一个）都可以是形状：

res > drawable > gray_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>

res > drawable > 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="#81D7FF" />

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

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

</shape>

当按钮为checked 和not checked 时，您可以期待不同的背景