android shape(如自訂Button)

標籤：android   style   blog   class   code   java   

Shape

前言：有時候會去自己去畫一些Button的樣式來展現在UI當中，其中主要用到的就是Shape

先來看一段代碼：

 1 <?xml version="1.0" encoding="utf-8"?> 2 <shape xmlns:android="http://schemas.android.com/apk/res/android" 3     android:shape="rectangle" > 4  5     <solid android:color="#FFF0F5" /> 6  7     <stroke 8         android:width="2dp" 9         android:color="#6A5ACD" />10 11     <corners android:radius="16dp" />12 13     <gradient14         android:angle="270"15         android:endColor="#B0E0E6"16         android:startColor="#000080"17         android:type="linear" >18     </gradient>19 20     <padding21         android:left="50dp"22         android:top="50dp" />23 24 </shape>

1）solid：實心，就是填充的意思
　　android:color指定填充的顏色

2）gradient：漸層
　　android:startColor和android:endColor分別為起始和結束顏色，ndroid:angle是漸層角度，必須為45的整數倍。
　　另外漸層預設的模式為android:type="linear"，即線性漸層，可以指定漸層為放射狀漸層，android:type="radial"，放射狀漸層需要指定半徑android:gradientRadius="50"。

3）stroke：描邊
　　android:width="2dp" 描邊的寬度，android:color 描邊的顏色。
　　我們還可以把描邊弄成虛線的形式，設定方式為：
　　android:dashWidth="5dp" 
　　android:dashGap="3dp"
　　其中android:dashWidth表示‘-‘這樣一個橫線的寬度，android:dashGap表示之間隔開的距離

4）corners：圓角
　　android:radius為角的弧度，值越大角越圓。
　　我們還可以把四個角設定成不同的角度，方法為：
　　<corners 
        android:topRightRadius="20dp"    右上方
        android:bottomLeftRadius="20dp"    右下角
        android:topLeftRadius="1dp"    左上方
        android:bottomRightRadius="0dp"    左下角
 　　/>
　　這裡有個地方需要注意，bottomLeftRadius是右下角，而不是左下角，

5）padding：間隔
    就是框內的內容離邊框的距離

6）下面就通過一個例子來說明：

當Button沒有被點擊時候是這個樣式的：                                               被點擊是時候的樣式：

　　　　　　　　　　　　　　  　　　　　　　　　　　　　　　　

在drawable檔案夾下default_shape.xml    這是按鈕沒有被點擊時候的樣式:

 1 <?xml version="1.0" encoding="utf-8"?> 2 <shape xmlns:android="http://schemas.android.com/apk/res/android" 3     android:shape="rectangle" > 4  5     <solid android:color="#FFF0F5" /> 6  7     <stroke 8         android:width="2dp" 9         android:color="#6A5ACD" />10 11     <corners android:radius="16dp" />12 13     <gradient14         android:angle="270"15         android:endColor="#B0E0E6"16         android:startColor="#000080"17         android:type="linear" >18     </gradient>19 20     <padding21         android:left="50dp"22         android:top="50dp" />23 24 </shape>

drawable檔案夾下pressed_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="#d1d1d1" />    <!-- 邊框 -->    <stroke        android:width="2dp"        android:color="#FFB6C1" />    <!-- 定義成圓角的 -->    <corners android:radius="30dp" />    <gradient        android:endColor="#F5FFFA"        android:startColor="#FFB6C1"        android:type="linear" >    </gradient></shape>

 

drawable中按鈕的selector的xml檔案，btn_style.xml ：

1 <?xml version="1.0" encoding="utf-8"?>2 <selector xmlns:android="http://schemas.android.com/apk/res/android">3 4     <item android:drawable="@drawable/pressed_shape" android:state_pressed="true"></item>5     <item android:drawable="@drawable/default_shape"></item>6 7 </selector>

activity的XML檔案：

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2     xmlns:tools="http://schemas.android.com/tools" 3     android:layout_width="match_parent" 4     android:layout_height="match_parent" 5     android:gravity="center" 6     android:orientation="vertical" 7     tools:context=".MainActivity" > 8  9     <Button10         android:id="@+id/btn"11         android:layout_width="150dp"12         android:layout_height="150dp"13         android:background="@drawable/btn_style"14         android:text="改變形狀"15         android:textColor="@drawable/text_style" />16 17 </LinearLayout>

主要程式就在上面了，然後運行程式就可以看見前面的效果

源碼下載：源碼