1. 程式人生 > >layer-list 實現自定義RadioButton佈局:同心圓

layer-list 實現自定義RadioButton佈局:同心圓

        有些簡單的圖形完全可以用程式碼實現,減少了程式大小也提高了執行效率,layer-list實現佈局和RelativeLayout相似,一層一層往上放,最後的item節點放置在最上面。

        新建layer-list和新建drawable資源中的shape一樣,將標籤select換成layer-list即可。

一、實現同心圓

外面一個環型裡面一個圓形搞定。

效果圖:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="30dp"
            android:shape="ring"
            android:thickness="2dp"
            android:useLevel="false">

            <solid android:color="@color/theme" />
        </shape>
    </item>

    <item
        android:bottom="30dp"
        android:left="30dp"
        android:right="30dp"
        android:top="30dp">
        <shape android:shape="oval">
            <solid android:color="@color/theme" />
            <size
                android:width="30dp"
                android:height="30dp" />
        </shape>
    </item>

</layer-list>

也可以外面一個圓加個邊框,裡面一個小圓,外圓設定成透明顏色的話和上圖是一樣的效果。

效果圖:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:dither="true"
            android:shape="oval">
            <solid android:color="@color/red" />
            <stroke
                android:color="@color/theme"
                android:width="1dp" />
        </shape>
    </item>

    <item
        android:bottom="20dp"
        android:left="20dp"
        android:right="20dp"
        android:top="20dp" >
        <shape
            android:shape="oval" >
            <solid android:color="@color/theme" />
            <size
                android:width="30dp"
                android:height="30dp" />

        </shape >
    </item >

</layer-list>

自己定義一個選中和一個未選中狀態的樣式,呼叫資原始檔直接程式碼:

選擇selector.xml:

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

寫個style:

<!--自定義RadioButton主題-->
    <style name="radio_button_style">
        <item name="android:button">@null</item>
        <item name="android:drawableStart">@drawable/selector</item>
        <item name="android:drawablePadding">5dp</item>
        <item name="android:background">@null</item>
    </style>

看屬性button設定成null,將系統的按鈕置空,drawableStart設定按鈕樣式位置的,這裡是設定按鈕在文字的左邊,你可以自己設定上下左右。將自定義樣式的傳進去即可。

drawablePadding設定按鈕和文字的距離,設定背景為空,不然就會出現點選效果很恐怖,嚇尿。

在佈局檔案中呼叫:

<RadioGroup
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb_owner_login"
            style="@style/radio_button_style"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:checked="true"
            android:text="@string/owner_login"
            android:textSize="15sp" />

        <RadioButton
            android:id="@+id/rb_clerk_login"
            style="@style/radio_button_style"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/clerk_login"
            android:textSize="15sp" />
    </RadioGroup>

加陰影效果等,可以用在RadioButton的選中和未選中狀態,導航欄選中等也是同樣的道理,自己多多體會吧。selestor中環或者圓統一使用,別用了環又用圓,會有誤差的。