代码改变世界

Android使用圆角

2014-07-28 22:09  肖恩也有梦想  阅读(341)  评论(0)  编辑  收藏  举报

圆角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的使用