修改radiobutton圓圈樣式

用Android Studio做安卓開發的時候，使用RadioButton會有系統默認樣式，比如：在unchecked狀態下是黑色邊框+空心圓樣式；checked狀態下是粉紅色邊框+中間一個粉紅色原點（如下）。

  

但是有時候我們想要改變前面圓圈的樣式，那麼怎麼修改呢？

可能很多同學網上找到的解決方案，大都是在/drawable下新建一個radio**.xml文件，在<selector>下的<item>下設置當android:state_checked爲true/false時，設置android:drawable爲/drawable下的不同狀態的圖片。

那麼問題來了，如果我並沒有兩種狀態的圖片，比如只是想改一下邊框顏色、點擊後的顏色這些呢？

其實原理也很簡單，而且跟上面的圖片替換也很類似，不過上面的是替換/drawable文件夾下的圖片，這裏介紹的方法是替換/drawable文件夾下的.xml樣式文件。步驟如下：

1、先在/drawable文件夾下創建RadioButton狀態切換文件，比如radio_button_style.xml

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

    <item
        android:state_enabled="true"
        android:state_checked="false"
        android:drawable="@drawable/radiobtn_unchecked_style"
        />

</selector>

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

    <item
        android:state_enabled="true"
        android:state_checked="false"
        android:drawable="@drawable/radiobtn_unchecked_style"
        />

</selector>

    <selector>標籤下的兩個<item>標籤分別定義兩種狀態：checked和unchecked（從上面的state_checked反映）。當被checked時，RadioButton切換到radiobtn_checked_style狀態；否則，切換radiobtn_unchecked_style狀態。

2、好了，上面兩個狀態其實是/drawable文件夾下的兩個.xml佈局文件radiobtn_checked_style.xml和radiobtn_unchecked_style.xml。以下分別是兩個佈局文件的代碼：

radiobtn_checked_style.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:radius="@dimen/pswRadioButtonWidth"/>

    <solid
        android:color="@color/buttonColorIn"/>

    <size
        android:height="@dimen/pswRadioButtonWidth"
        android:width="@dimen/pswRadioButtonWidth"/>

    <stroke
        android:width="@dimen/pswRadioButtonStrokeWidth"
        android:color="@color/buttonStroke"/>


</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:radius="@dimen/pswRadioButtonWidth"/>

    <solid
        android:color="@color/buttonColorIn"/>

    <size
        android:height="@dimen/pswRadioButtonWidth"
        android:width="@dimen/pswRadioButtonWidth"/>

    <stroke
        android:width="@dimen/pswRadioButtonStrokeWidth"
        android:color="@color/buttonStroke"/>


</shape>

radiobtn_unchecked_style.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:radius="@dimen/pswRadioButtonWidth"/>

    <solid
        android:color="@color/buttonColor"/>

    <size
        android:height="@dimen/pswRadioButtonWidth"
        android:width="@dimen/pswRadioButtonWidth"/>

    <stroke
        android:width="@dimen/pswRadioButtonStrokeWidth"
        android:color="@color/buttonStroke"/>

</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:radius="@dimen/pswRadioButtonWidth"/>

    <solid
        android:color="@color/buttonColor"/>

    <size
        android:height="@dimen/pswRadioButtonWidth"
        android:width="@dimen/pswRadioButtonWidth"/>

    <stroke
        android:width="@dimen/pswRadioButtonStrokeWidth"
        android:color="@color/buttonStroke"/>

</shape>

 (1)根標籤必須改爲<shape>

    (2)<size>標籤，定義RadioButton的大小（寬高）

    (3)<corners>標籤，定義原來矩形4個直角的完全程度（與width/heigth一致則爲圓角）

    (4)<solid>爲中間填充顏色

    (5)<stroke>爲邊框屬性

    （當然shape還有一些其他屬性，在這裏沒用上就沒寫出來）

3、好了，定義好佈局，最後在整體佈局的RadioButton下把狀態切換文件radio_button_style.xml加到android:button屬性下即可。比如：

<RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/pswRadioBtn1"
        android:layout_marginTop="20dp"
        android:checked="false"
        android:layout_below="@+id/hintText"
        android:layout_alignEnd="@+id/button1"
        android:clickable="false"
        android:button="@drawable/radio_button_style" />

<RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/pswRadioBtn1"
        android:layout_marginTop="20dp"
        android:checked="false"
        android:layout_below="@+id/hintText"
        android:layout_alignEnd="@+id/button1"
        android:clickable="false"
        android:button="@drawable/radio_button_style" />

4、最後展示一下我寫的RadioButton，在沒有添加切換圖片下的自定義效果：

unchecked:

checked:

很像iOS的效果是不是!!