Android Shape自定義純色圓角按鈕

版權聲明：分享技術，傳播快樂。若是本博客對你有幫助，請在個人博客首頁爲我打賞吧！

 在Android開發中，爲響應美化應用中控件的效果，使用Shape定義圖形效果，能夠解決圖片過多的問題。

首先看一下效果圖：

整個頁面佈局爲：

  1 <?xml version="1.0" encoding="utf-8"?>  
  2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3     android:layout_width="fill_parent"  
  4     android:layout_height="fill_parent"  
  5     android:background="#e6e6e6"  
  6     android:orientation="vertical"  
  7     android:gravity="center_vertical" >  
  8       
  9   
 10     <ImageView  
 11         android:id="@+id/iv1"  
 12         android:layout_width="match_parent"  
 13         android:layout_height="wrap_content"  
 14         android:layout_gravity="center"  
 15         android:layout_marginTop="20dp"  
 16         android:layout_marginLeft="@dimen/activity_horizontal_margin"  
 17         android:layout_marginRight="@dimen/activity_horizontal_margin"  
 18         android:layout_above="@id/account_editor"  
 19         android:src="@drawable/head" />  
 20       
 21     <EditText  
 22         android:id="@+id/account_editor"  
 23         android:layout_width="fill_parent"  
 24         android:layout_height="@dimen/edit_box_height"  
 25         android:layout_below="@id/title_bar"  
 26         android:layout_marginLeft="@dimen/activity_horizontal_margin"  
 27         android:layout_marginRight="@dimen/activity_horizontal_margin"  
 28         android:layout_marginTop="@dimen/activity_vertical_margin"  
 29         android:background="@drawable/input_box"  
 30         android:ellipsize="end"  
 31         android:gravity="center_vertical"  
 32         android:hint="@string/mobile_hint"  
 33         android:inputType="numberDecimal"  
 34         android:maxLength="11"  
 35         android:paddingLeft="@dimen/input_box_left_padding"  
 36         android:paddingRight="40.0dip"  
 37         android:singleLine="true"  
 38         android:textColor="@color/grey_text"  
 39         android:textSize="@dimen/font_normal" />  
 40   
 41     <TextView  
 42         android:id="@+id/error"  
 43         android:layout_width="fill_parent"  
 44         android:layout_height="wrap_content"  
 45         android:layout_below="@+id/account_editor"  
 46         android:layout_marginLeft="@dimen/activity_horizontal_margin"  
 47         android:layout_marginRight="@dimen/activity_horizontal_margin"  
 48         android:layout_marginTop="@dimen/notice_vertical_padding"  
 49         android:ellipsize="end"  
 50         android:singleLine="true"  
 51         android:textColor="@color/red_text"  
 52         android:textSize="@dimen/font_small"  
 53         android:visibility="gone" />  
 54   
 55   
 56   
 57     <EditText  
 58         android:id="@+id/psw_editor"  
 59         android:layout_width="fill_parent"  
 60         android:layout_height="@dimen/edit_box_height"  
 61         android:layout_below="@+id/error"  
 62         android:layout_marginLeft="@dimen/activity_horizontal_margin"  
 63         android:layout_marginRight="@dimen/activity_horizontal_margin"  
 64         android:layout_marginTop="@dimen/activity_vertical_margin"  
 65         android:background="@drawable/input_box"  
 66         android:ellipsize="end"  
 67         android:gravity="center_vertical"  
 68         android:hint="@string/psw_hint"  
 69         android:inputType="textPassword"  
 70         android:maxLength="16"  
 71         android:paddingLeft="@dimen/input_box_left_padding"  
 72         android:singleLine="true"  
 73         android:textColor="@color/grey_text"  
 74         android:textSize="@dimen/font_normal" />  
 75   
 76       
 77   
 78     <Button  
 79         android:id="@+id/login"  
 80         style="@style/common_button_style"  
 81         android:layout_below="@id/psw_editor"  
 82         android:layout_marginLeft="@dimen/activity_horizontal_margin"  
 83         android:layout_marginRight="@dimen/activity_horizontal_margin"  
 84         android:layout_marginTop="@dimen/activity_vertical_margin"  
 85         android:text="@string/login"  
 86          />  
 87   
 88     <RelativeLayout  
 89         android:layout_width="wrap_content"  
 90         android:layout_height="30.0dip"  
 91         android:layout_below="@+id/login"  
 92         android:layout_centerHorizontal="true"  
 93         android:layout_marginTop="25.0dip" >  
 94   
 95         <TextView  
 96             android:id="@+id/register"  
 97             android:layout_width="wrap_content"  
 98             android:layout_height="wrap_content"  
 99             android:layout_marginLeft="@dimen/activity_horizontal_margin"  
100             android:clickable="true"  
101             android:text="@string/register"  
102             android:textColor="@color/black_text"  
103             android:textSize="@dimen/font_normal" />  
104   
105         <TextView  
106         android:id="@+id/forgot_psw"  
107         android:layout_width="wrap_content"  
108         android:layout_height="wrap_content"  
109         android:layout_alignParentRight="true"  
110         android:layout_marginRight="@dimen/activity_horizontal_margin"  
111         android:clickable="true"  
112         android:text="@string/forgot_psw"  
113         android:textColor="@color/black_text"  
114         android:textSize="@dimen/font_normal" />  
115     </RelativeLayout>  
116   
117   
118 </RelativeLayout>  

 

其中自定義Button的相關佈局代碼爲：

1 <Button  
2         android:id="@+id/login"  
3         style="@style/common_button_style"  
4         android:layout_below="@id/psw_editor"  
5         android:layout_marginLeft="@dimen/activity_horizontal_margin"  
6         android:layout_marginRight="@dimen/activity_horizontal_margin"  
7         android:layout_marginTop="@dimen/activity_vertical_margin"  
8         android:text="@string/login"  
9          />  

首先咱們看看這個自定義的樣式：

 1 <style name="common_button_style">  
 2         <item name="android:layout_width">match_parent</item>  
 3         <item name="android:layout_height">@dimen/btn_next_height</item>  
 4         <item name="android:background">@drawable/selector_red_corners_button</item>  
 5         <item name="android:padding">6.0dip</item>  
 6         <item name="android:textColor">@android:color/white</item>  
 7         <item name="android:textSize">@dimen/font_large</item>  
 8         <item name="android:layout_gravity">center_horizontal</item>  
 9           
10     </style> 

其中重點關注的就是它的backgroud屬性了。

selector_red_corners_button.xml

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

shape_red_corners_button_pressed.xml

1 <?xml version="1.0" encoding="utf-8"?>  
2 <shape  
3   xmlns:android="http://schemas.android.com/apk/res/android">  
4     <corners android:radius="20.0px" />  
5     <solid android:color="@color/red_dark" />  
6 </shape>  

shape_red_corners_button.xml

1 <?xml version="1.0" encoding="utf-8"?>  
2 <shape  
3   xmlns:android="http://schemas.android.com/apk/res/android">  
4     <corners android:radius="20.0px" />  
5     <solid android:color="@color/red_light" />  
6 </shape> 

其中圓角弧度的大小能夠經過修改android:radius="20.0px"的大小來控制。

1 <color name="red_dark">#ffb52121</color>  
2     <color name="red_light">#ffcd2222</color> 

代碼下載（注意：因爲是本身工做時候的工程，就刪除了部分，但你值得擁有啊）

 

http://download.csdn.net/detail/jdsjlzx/8365315

 

 

Shape的屬性：

 

•  solid

 

       描述：內部填充

       屬性：android:color 填充顏色

 

•   size

 

       描述：大小

       屬性：

                 android:width 寬

                 android:height 高

 

•  gradient

 

        描述：漸變色

        屬性：

                   android:startColor漸變起始顏色

                   android:endColor漸變結束顏色

                   android:centerColor漸變中間顏色

                   android:angle 漸變的角度，angle=0時，漸變色是從左向右，而後逆時針方向轉；當angle=90時，漸變色從上往下。angle必然是45的倍數

                   android:type 漸變類型：linear(線性)、radial(放射性，以開始色爲中心)、sweep(掃描線式漸變)

                   android:userLevel若是要使用LevelListDrawable對象，就要設置爲true。設置true無漸變色，false有漸變色

                   android:grdientRadial漸變半徑，只有設置type爲radial時，此值才生效

                   android:centerX 漸變中心X點座標的相對位置

                   android:centerY 漸變中心Y點座標的相對位置 

 

• stroke

 

        描述：描邊

        屬性： 

                   android:width 描邊寬度

                   android:color 描邊顏色

                   android:dashwidth描邊樣式爲虛線時的寬度，值爲0時爲實線，值大於0時爲虛線

                   android:dashGap 描邊爲虛線時，虛線之間的間隔

 

• corners

 

        描述：圓角

        屬性：

                   android:radius 四個角半徑值

                   android:topLeftRadius左上角半徑值

                   android:topRightRadius右上角半徑值

                   android:bottomLeftRadius右下角半徑值

                   android:bottomRightRadius左下角半徑值

 

• padding

 

        描述：內邊距

        屬性：

                   android:left 左內邊距

                   android:right 右內邊距

                   android:top 上內邊距

                   android:bottom 下內邊距

 

 

實例代碼

 1 <?xml version="1.0" encoding="utf-8"?>  
 2 <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
 3   
 4     <corners android:radius="5dp" />  
 5   
 6     <size  
 7         android:height="30dp"  
 8         android:width="20dp" />  
 9   
10     <gradient   
11         android:startColor="#9933cc"  
12         android:endColor="#aa66cc"  
13         android:angle="90"  
14         />  
15       
16     <padding android:left="5dp"  
17         android:right="5dp"  
18         android:top="5dp"  
19         android:bottom="5dp"/>  
20   
21 </shape>  

1 <Button  
2        android:id="@+id/btn"  
3        android:layout_width="wrap_content"  
4        android:layout_height="wrap_content"  
5        android:layout_below="@+id/tv_test"  
6        android:background="@drawable/btn_shape"  
7        android:text="按鈕" />