Android自定義資源之圓角按鈕、變色按鈕、漸變線條、虛線等等

1.android shape

使用方法

      a.在res下新建drawable文件夾，然後新建一個xml文件，並編寫對應代碼

      b.在佈局文件中使用background 或 src 調用該drawable資源

效果

1.1自身屬性

        rectangle（矩形）、oval（橢圓型）、line（線性）、ring（環形） 默認爲矩形

        第一個

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:centerColor="#0f0"
        android:endColor="#00f"
        android:startColor="#f00" />
</shape>

        第二個和第三個是一樣的，只是在佈局控件中設置的寬高不同而已

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <gradient
        android:endColor="#0f0"
        android:startColor="#f00" />
</shape>

        第四個

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

    <gradient
        android:endColor="#00f"
        android:startColor="#f00" />

</shape>

       innerRadius 爲內環半徑

       thickness 環的寬度

       userLevel 默認值爲false 只是在環形狀態下使用

       第五個

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line" >
    <stroke
        android:dashGap="10px"
        android:dashWidth="10px"
        android:width="1dp"
        android:color="#0f0" />
</shape>

        dashGap 虛線中間隔的寬度

        dashWidth 虛線中實線的寬度

        width 虛線的厚度

android:layout_height的值必須大於android:width的值，否則虛線不會顯示。如果不設置，默認android:width爲0

在佈局控件做需加上 android:layerType="software" 否則失效   

     第六個 漸變線

     使用的shape 代碼就是矩形的shape代碼類容，只是高設置爲1即可

     1.2 子標籤屬性 先看效果圖 圓角按鈕即圓角邊框

      對應XML代碼依次如下

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

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
	<corners android:bottomLeftRadius="10dp"/>
	<solid android:color="#0f0"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners
        android:bottomLeftRadius="10dp"
        android:topRightRadius="10dp" />
    <solid android:color="#00f" />
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
    <gradient
        android:centerColor="#0f0"
        android:endColor="#00f"
        android:startColor="#f00" />
</shape>

         corners  定義圓角

    <corners
        android:radius="10dp"     \\定義全部圓角的半徑
        android:bottomLeftRadius="10dp"  \\左下方圓角
        android:bottomRightRadius="10dp" \\左下方圓角
        android:topLeftRadius="10dp"     \\左下方圓角
        android:topRightRadius="10dp"    \\左下方圓角
        />

         solid  定義內部顏色

<solid android:color="#f00" />

        gradient 設置顏色變化

    <gradient
        android:type  //設置漸變類型 linear（線性漸變）、radial（放射性漸變）、sweep（掃描式漸變）
        android:angle="10" //漸變角度
        android:gradientRadius="100dp" //漸變的半徑
        android:startColor="#f00"  //設置頭部顏色
        android:centerColor="#0f0" //設置中部顏色
        android:endColor="#00f"    //設置尾部顏色
        />

        stroke 設置描邊類容

    <stroke android:width="20dp"
        android:color="#f0f"
        android:dashWidth="10dp"
        android:dashGap="1dp"/>

二.android selector 選擇器

     用法與shape類似，在佈局文件中調用drawable資源

     android:state_focused 獲得焦點，true則可點擊，false不可點擊

     通過判斷是否被選中或者被點擊來切換圖片或顏色

    代碼

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="#FFF"/>
    <item android:state_pressed="false" android:color="#000"/>
</selector>

    仿微信底部按鈕

    原理爲 RadioGroup 包含四個RadioButton 然後RadioButton調用選擇器selcter資源 部分代碼如下

    選擇器 selecter

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/chat_press" android:state_checked="true"></item>
    <item android:drawable="@drawable/chat_normal" android:state_checked="false"></item>

</selector>

    RadioGroup

   <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/check_selctor"
            android:text="微信" />

        <!-- 剩下三個RadioButton 略 -->
    </RadioGroup>