在Android开发中，为响应美化应用中控件的效果，使用Shape定义图形效果，可以解决图片过多的问题。
首先看一下效果图：
整个页面布局为：
[html] view plain copy
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的相关布局代码为：
[html] view plain copy
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. />
首先我们看看这个自定义的样式：
[html] view plain copy
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
[html] view plain copy
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
[html] view plain copy
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
[html] view plain copy
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"的大小来控制。
相关的颜色：
[html] view plain copy
1. <color name="red_dark">#ffb52121</color>
2. <color name="red_light">#ffcd2222</color>
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 下内边距
实例代码
[html] view plain cop
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>
[html] view plain cop
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="按钮" />
