Android使用圓角

圓角Button

效果圖

綠色Button

 定義button_green.xml資源文件位於drawable文件夾下，可用做button的background屬性

 button_green.xml:
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 3     <item android:state_pressed="true">
 4         <shape>
 5             <!-- 填充 -->
 6             <solid android:color="@color/green" />
 7             <!-- 描邊 -->
 8             <stroke
 9                     android:width="1dp"
10                     android:color="@color/cyan" />
11             <!-- 圓角 -->
12             <corners android:radius="6dp"/>
13             <padding android:top="10dp" android:bottom="10dp"
14                 android:left="20dp"
15                 android:right="20dp"/>
16         </shape>
17     </item>
18     <item>
19         <shape>
20             <solid android:color="@android:color/transparent" />
21             <padding android:top="10dip" android:bottom="10dip"
22                 android:left="20dp"
23                 android:right="20dp"/>
24             <stroke
25                     android:width="1dp"
26                     android:color="@color/green" />
27 
28             <corners android:radius="6dp"/>
29         </shape>
30     </item>
31 </selector>

 附上colors.xml

1 colors.xml
2 <?xml version="1.0" encoding="utf-8"?>
3 <resources>
4     <color name="white">#FFFFFF</color>
5     <color name="cyan">#4421A5DD</color>
6     <color name="green">#98D264</color>
7 </resources>

colors.xml

帶漸變的橙色Button

定義button_orange.xml資源文件位於drawable文件夾下，代碼以下：

 1 button_orange.xml:
 2 <?xml version="1.0" encoding="utf-8"?>
 3 
 4 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 5     <item android:state_enabled="false">
 6         <shape>
 7             <gradient
 8                     android:startColor="#D0D0D0"
 9                     android:centerColor="#B0B0B0"
10                     android:centerY="0.75"
11                     android:endColor="#D0D0D0"
12                     android:angle="270"
13                     />
14             <corners android:radius="6dp"/>
15         </shape>
16     </item>
17     
18     <item android:state_pressed="true" android:state_enabled="true">
19         <shape>
20             <gradient
21                     android:startColor="#F5AA1C"
22                     android:centerColor="#F29600"
23                     android:centerY="0.75"
24                     android:endColor="#F5AA1C"
25                     android:angle="270"
26                     />
27             <stroke android:width="1dp" android:color="#FBB343" />
28             <corners android:radius="6dp" />
29         </shape>
30     </item>
31 
32     <item android:state_enabled="true">
33         <shape>
34             <gradient
35                  android:startColor="#FBB03B"
36                  android:centerColor="#FBB03B"
37                  android:centerY="0.75"
38                  android:endColor="#FBB03B"
39                  android:angle="270"
40                     />
41 
42             <stroke android:width="1dp" android:color="#FBB343" />
43             <padding android:left="20dp"
44                 android:right="20dp"
45                 android:top="10dp"
46                 android:bottom="10dp"/>
47             
48             <corners android:radius="6dp" />
49         </shape>
50     </item>
51 </selector>

button_orange.xml

自定義Button的使用

爲方便使用，定義GreenButton和OrangeButton風格的style，代碼以下：

 1 styles.xml:
 2 <resources>
 3 
 4     <!--
 5         Base application theme, dependent on API level. This theme is replaced
 6         by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
 7     -->
 8     <style name="AppBaseTheme" parent="android:Theme.Light">
 9         <!--
10             Theme customizations available in newer API levels can go in
11             res/values-vXX/styles.xml, while customizations related to
12             backward-compatibility can go here.
13         -->
14     </style>
15 
16     <!-- Application theme. -->
17     <style name="AppTheme" parent="AppBaseTheme">
18         <!-- All customizations that are NOT specific to a particular API-level can go here. -->
19     </style>
20 
21     <style name="GreenButton">
22         <item name="android:layout_width">wrap_content</item>
23         <item name="android:layout_height">wrap_content</item>
24         <item name="android:background">@drawable/button_green</item>
25         <item name="android:textColor">@color/button_green_color</item>
26     </style>
27  
28     
29     <style name="OrangeButton">
30         <item name="android:layout_width">wrap_content</item>
31         <item name="android:layout_height">wrap_content</item>
32         <item name="android:background">@drawable/button_orange</item>
33         <item name="android:textColor">@color/white</item>
34     </style>
35 </resources>

styles.xml

你們可能已經注意到了，上述GreenButton的style中還包含一個button_green_color的顏色，實際上，它也是一個xml文件，咱們在res目錄下新建一個color目錄，用於存放咱們自定義的color資源文件。

1 button_green_color.xml：
2 <?xml version="1.0" encoding="utf-8"?>
3 <selector xmlns:android="http://schemas.android.com/apk/res/android">
4     <item android:state_selected="true" android:color="@color/white" />
5     <item android:state_focused="true" android:color="@color/white" />
6     <item android:state_pressed="true" android:color="@color/white" />
7     <item android:color="@color/" />
8 </selector>

button_green_color.xml

如今，使用自定義的button就很簡單了，例如：

1  <Button 
2             style="@style/GreenButton"
3             android:text="GreenButton"/>
4 
5  <Button style="@style/OrangeButton"
6             android:text="OrangeButton"/>

自定義button的使用