如何修改筹码样式？

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

最简单的方法是使用ToggleButtonwhich 可以是checkedor 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 > 可绘制 > grey_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 > 可绘制 > 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