Android 實現膠囊式按鈕組

阿新 • • 發佈：2022-05-27

效果圖：

實現過程：

一個RadioGroup+三個RadioButton，為每個RadioButton的background、textColor設定selector。

1.首先為RadioGroup設定圓角背景，在drawable資原始檔下新建group_radio_shape_bg.xml

點選檢視程式碼

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="30px"/>
    <solid android:color="#d7dce0"/>
</shape>

2.為RadioButton設定選中、未選中時的背景顏色、字型顏色，新建btn_radio_shape.xml檔案

點選檢視程式碼

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/group_radio_shape_check_bg" />
</selector>

新建btn_radio_color_selector.xml

點選檢視程式碼

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/colorWhite"/>
    <item android:state_checked="false" android:color="@color/colorBlack"/>
</selector>

全部程式碼如下：

說明幾個屬性：

（1）android:button="@null" 去掉RadioButton的圓點
（2）android:checked="true" 預設被選中

點選檢視程式碼

<RadioGroup
            android:layout_width="wrap_content"
            android:layout_height="64px"
            android:layout_marginTop="20px"
            android:gravity="center"
            android:background="@drawable/group_radio_shape_bg"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/radioButton4"
                android:layout_width="300px"
                android:layout_height="match_parent"
                android:background="@drawable/btn_radio_shape"
                android:button="@null"
                android:gravity="center"
                android:text="低"
                android:textColor="@drawable/btn_radio_color_selector"
                android:textSize="30px" />

            <RadioButton
                android:id="@+id/radioButton5"
                android:layout_width="300px"
                android:layout_height="match_parent"
                android:background="@drawable/btn_radio_shape"
                android:button="@null"
                android:gravity="center"
                android:checked="true"
                android:text="中"
                android:textColor="@drawable/btn_radio_color_selector"
                android:textSize="30px" />

            <RadioButton
                android:id="@+id/radioButton6"
                android:layout_width="300px"
                android:layout_height="match_parent"
                android:background="@drawable/btn_radio_shape"
                android:button="@null"
                android:gravity="center"
                android:text="高"
                android:textColor="@drawable/btn_radio_color_selector"
                android:textSize="30px" />
        </RadioGroup>