有時候 ，爲了滿足一些需求，我們要用到 shape 去定義 一些背景，shape 的用法 跟圖片一樣 ，可以給View設置 android:background=”@drawable/shape”, 定義的shape 文件，放在 res/shape 目錄下
通常我們可以用shape 做 button 的背景選擇器，也可以做切換tab 時，底部的下劃線。
先看我們用shape 都可以做什麼
[XML] 純文本查看 複製代碼
|
1
2
3
4
5
6
7
8
|
<?xml
version="1.0"
encoding="utf-8"?> <gradient android:type="linear" android:angle="0" android:endColor="#F028A2" android:startColor="#2A99F3"
/></shape> |
先看看shape 都能做什麼圖
shape下面 一共有6個子節點， 常用的 就只有 四個，padding 和size 一般用不到。
corners ———-圓角
gradient ———-漸變
padding ———-內容離邊界距離
size ————大小
solid ———-填充顏色
stroke ———-描邊
[XML] 純文本查看 複製代碼
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<?xml
version="1.0"
encoding="utf-8"?> <!--
圓角 --> <corners android:radius="9dp" android:topLeftRadius="2dp" android:topRightRadius="2dp" android:bottomLeftRadius="2dp" android:bottomRightRadius="2dp"/><!--
設置圓角半徑 --> <!--
漸變 --> <gradient android:startColor="@android:color/white" android:centerColor="@android:color/black" android:endColor="@android:color/black" android:useLevel="true" android:angle="45" android:type="radial" android:centerX="0" android:centerY="0" android:gradientRadius="90"/> <!--
間隔 --> <padding android:left="2dp" android:top="2dp" android:right="2dp" android:bottom="2dp"/><!--
各方向的間隔 --> <!--
大小 --> <size android:width="50dp" android:height="50dp"/><!--
寬度和高度 --> <!--
填充 --> <solid android:color="@android:color/white"/><!--
填充的顏色 --> <!--
描邊 --> <stroke android:width="2dp" android:color="@android:color/black" android:dashWidth="1dp" android:dashGap="2dp"/></shape> |
拿shape 做虛線,shape 設置爲line ， stroke 是描邊屬性，其中 dashGap dashWidth 兩個屬性彼此一起存在才生效。
dashGap ：兩段之間的空隙寬度、dashWidth ：一段線的寬度
[XML] 純文本查看 複製代碼
|
1
2
3
4
5
6
7
8
|
android:shape="line"
> <stroke android:dashGap="3dp" android:dashWidth="8dp" android:width="1dp" android:color="#009999"
/></shape> |
拿shape做漸變實線
gradient 表示漸變
angle 漸變角度，45的倍數。
startColor endColor centerColor 起 止 中 的顏色
[XML] 純文本查看 複製代碼
|
1
2
3
4
5
6
7
8
|
<gradient android:type="linear" android:angle="0" android:endColor="#F028A2" android:startColor="#2A99F3"
/></shape> |
shape 做view背景選擇器
這裏注意 ，item 的 state_pressed=true 是選擇狀態，按下，另一個不設置 就是 正常狀態。
solid ：是填充顏色
corners：設置 四個角的弧度
[XML] 純文本查看 複製代碼
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<?xml
version="1.0"
encoding="utf-8"?> <item
android:state_pressed="true"
> android:shape="rectangle"> <!--填充色
--> <solid android:color="#ffffff"
/> <!--
描邊 --> <!--
dashGap：- 與- 虛線之間的間隔 dashWidth: 實線的寬度width： color:--> <!--
<stroke android:dashGap="10dp" android:dashWidth="5dp" android:width="1dip" android:color="#d3d3d3" />
--> <!--
圓角 --> <corners android:topRightRadius="10dp" android:bottomLeftRadius="10dp" android:topLeftRadius="10dp" android:bottomRightRadius="10dp" /> </shape> </item> <item
> <!--shape:oval
橢圓 rectangle:方形 line：線性--> android:shape="rectangle"> <gradient android:startColor="#55B4FE" android:endColor="#3d8FFB" android:type="linear"/> <!--
描邊 --> <!--
<stroke android:dashGap="10dp" android:dashWidth="5dp" android:width="1dip" android:color="#d3d3d3" />
--> <!--
圓角 上下左右四個角 弧度--> <corners android:topRightRadius="10dp" android:bottomLeftRadius="10dp" android:topLeftRadius="10dp" android:bottomRightRadius="10dp" />
</shape> </item></selector> |
shape 做矩形
android:shape=”rectangle”選爲矩形
[XML] 純文本查看 複製代碼
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<?xml
version="1.0"
encoding="utf-8"?> android:shape="rectangle"> <!--
漸變 --> <gradient android:type="linear" android:startColor="@android:color/holo_blue_bright" android:centerColor="@android:color/holo_green_dark" android:endColor="@android:color/holo_red_light" android:useLevel="true" android:angle="45"/> <!--
填充 --><!--
<solid android:color="@android:color/white"/>填充的顏色
--> <!--
描邊 --> <stroke android:width="2dp" android:color="@android:color/black"/></shape> |
shape 作描邊矩形 和 橢圓
這裏注意shape
android:shape=”oval” 橢圓
[XML] 純文本查看 複製代碼
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<?xml
version="1.0"
encoding="utf-8"?> android:shape="rectangle"> <!--
填充 --> <solid android:color="@android:color/holo_blue_bright"/><!--
填充的顏色 --> <!--
描邊 --> <stroke android:width="2dp" android:color="@android:color/black" android:dashWidth="1dp" android:dashGap="2dp"/> <corners android:topLeftRadius="20dp" android:topRightRadius="20dp" android:bottomLeftRadius="20dp" android:bottomRightRadius="20dp" android:radius="50dp"/></shape> |
[XML] 純文本查看 複製代碼
|
01
02
03
04
05
06
07
08
09
10
11
|
<?xml
version="1.0"
encoding="utf-8"?> android:shape="oval"> <!--
填充 --> <solid android:color="@android:color/holo_orange_light"/><!--
填充的顏色 --> <!--
描邊 --> <stroke android:width="2dp" android:color="@android:color/black"/></shape> |
ShapeDemo代碼： http://download.csdn.net/detail/u011733020/8880615
