Android中shape详解

た入场券 2022-03-10 15:56 289阅读 0赞

<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android" >  
  
<solid  
android:color="\#B2B2B2"  
/>  
  
  
<size  
android:width="200dp"  
android:height="50dp"  
/>  
  
  
<gradient  
android:startColor="\#DBDCDD"  
android:endColor="\#B8B9BB"  
android:centerColor="\#ADADAF"  
android:angle="270"  
/>  
  
  
  
<stroke  
android:width="2dp"  
android:color="\#3D4148"  
/>  
  
  
<corners  
android:radius="5dp"  
/>  
  
<padding  
android:left="10dp"  
android:top="10dp"  
android:right="10dp"  
android:bottom="10dp"  
/>  
  
</shape>  
  
<!--  
  
1、 solid  
描述：内部填充  
属性 android:color 填充颜色  
  
  
2、size  
描述：size: 大小  
属性：  
android:width 表示形状的宽度  
android:height 表示形状的高度  
  
3、gradient  
  
描述： 渐变色  
  
属性：  
android:startColor 起始颜色  
android:endColor 结束颜色  
android:angle 渐变角度(PS：当angle=0时，渐变色是从左向右。 然后逆时针方向转，当angle=90时为从下往上。angle必须为45的整数倍)  
android:type 渐变类型(取值：linear、radial、sweep)  
linear 线性渐变，这是默认设置  
radial 放射性渐变，以开始色为中心。  
sweep 扫描线式的渐变。  
android:centerColor 渐变中间颜色，即开始颜色与结束颜色之间的颜色  
android:useLevel 如果要使用LevelListDrawable对象，就要设置为true。设置为true无渐变。false有渐变色  
android:gradientRadius 渐变色半径.当 android:type="radial" 时才使用。单独使用 android:type="radial"会报错。  
android:centerX 渐变中心X点坐标的相对位置  
android:centerY 渐变中心Y点坐标的相对位置  
4、stroke  
  
描述: stroke:描边 相当于html中的盒子模型的border  
  
属性：  
android:width 描边的宽度  
android:color 描边的颜色  
android:dashWidth 表示描边的样式是虚线的宽度，  
值为0时，表示为实线。值大于0则为虚线。  
android:dashGap 表示描边为虚线时，虚线之间的间隔 即“ - - - - ”  
  
5、corners  
  
描述: corners: 圆角  
  
属性：  
android:radius 半径  
android:topLeftRadius 左上角半径  
android:topRightRadius 右上角半径  
注意一下两个属性比较不同：  
android:bottomLeftRadius 右下角半径  
android:bottomRightRadius 左下角半径  
6、padding  
  
描述：内部边距，即内容与边的距离  
  
属性：  
android:left 左内边距  
android:top 上内边距  
android:right 右内边距  
android:bottom 下内边距

\-->

大体的就是这样，以下是一个使用的具体示例：用在Selector中作为Button的背景，分别定义了按钮的一般状态、获得焦点状态和按下时的状态，具体代码如下：

复制到剪贴板 XML/HTML代码

1.  main.xml: 
2.  <Button
3.  android:layout\_width="wrap\_content"
4.  android:layout\_height="wrap\_content"
5.  android:text="TestShapeButton"
6.  android:background="@drawable/button\_selector"
7.  />
8.  >

button\_selector.xml:

复制到剪贴板 XML/HTML代码

1.  <?xmlversion="1.0"encoding="utf-8"?>
2.  <selector
3.  xmlns:android="http://schemas.android.com/apk/res/android">
4.  <itemandroid:state\_pressed="true">
5.  <shape>
6.  
7.  <gradient
8.  android:startColor="\#ff8c00"
9.  android:endColor="\#FFFFFF"
10. android:type="radial"
11. android:gradientRadius="50"/>
12. 
13. <stroke
14. android:width="2dp"
15. android:color="\#dcdcdc"
16. android:dashWidth="5dp"
17. android:dashGap="3dp"/>
18. 
19. <corners
20. android:radius="2dp"/>
21. <padding
22. android:left="10dp"
23. android:top="10dp"
24. android:right="10dp"
25. android:bottom="10dp"/>
26. </shape>
27. </item>
28. <itemandroid:state\_focused="true">
29. <shape>
30. <gradient
31. android:startColor="\#ffc2b7"
32. android:endColor="\#ffc2b7"
33. android:angle="270"/>
34. <stroke
35. android:width="2dp"
36. android:color="\#dcdcdc"/>
37. <corners
38. android:radius="2dp"/>
39. <padding
40. android:left="10dp"
41. android:top="10dp"
42. android:right="10dp"
43. android:bottom="10dp"/>
44. </shape>
45. </item>
46. <item>
47. <shape>
48. <solidandroid:color="\#ff9d77"/>
49. <stroke
50. android:width="2dp"
51. android:color="\#fad3cf"/>
52. <corners
53. android:topRightRadius="5dp"
54. android:bottomLeftRadius="5dp"
55. android:topLeftRadius="0dp"
56. android:bottomRightRadius="0dp"
57. />
58. <padding
59. android:left="10dp"
60. android:top="10dp"
61. android:right="10dp"
62. android:bottom="10dp"/>
63. </shape>
64. </item>
65. </selector>

运行效果如下图：  
一般状态：  
![13035350763XcCcNix.png][]  
  
获得焦点状态：  
![1303535076kdGsPNVI.png][]  
  
按下状态：  
![1303535076WxVcejxy.png][]

[13035350763XcCcNix.png]: /images/20220310/f64f706845624757ad3892e63e83b889.png
[1303535076kdGsPNVI.png]: /images/20220310/5c43fbba15514a198aaa33a1c116c266.png
[1303535076WxVcejxy.png]: /images/20220310/fd02aac7a9b04fa78e9637f04a17c17f.png