关于ShapeDrawable应用的一些介绍（上）

在Android中， 很多时候系统原生的控件的格式并不能满足我们的需求，我们想要更加好看点的样式，像什么圆角矩形啊，颜色渐变啊，阴影效果啊等等的，这个时候就是我们的 ShapeDrawable发挥效果的时候了，接下来我们这两篇文章就来说一下Shape的一些应用吧，掌握点基础知识，才能好好更好地去应用啊。

其实很多东西并不难，我们也不是不懂，但是关键得懂得总结呀，对吧。

1）首先，我们要在res/drawable/ 路径下创建一个xml文件，其格式如下（这是在Android的官方文档中拿出来的，我觉得真的很丰满，一目了然）：

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape
3. xmlns:android="http://schemas.android.com/apk/res/android"
4. android:shape=["rectangle" | "oval" | "line" | "ring"] >
5. <corners
6. android:radius="integer"
7. android:topLeftRadius="integer"
8. android:topRightRadius="integer"
9. android:bottomLeftRadius="integer"
10. android:bottomRightRadius="integer" />
11. <gradient
12. android:angle="integer"
13. android:centerX="integer"
14. android:centerY="integer"
15. android:centerColor="integer"
16. android:endColor="color"
17. android:gradientRadius="integer"
18. android:startColor="color"
19. android:type=["linear" | "radial" | "sweep"]
20. android:useLevel=["true" | "false"] />
21. <padding
22. android:left="integer"
23. android:top="integer"
24. android:right="integer"
25. android:bottom="integer" />
26. <size
27. android:width="integer"
28. android:height="integer" />
29. <solid
30. android:color="color" />
31. <stroke
32. android:width="integer"
33. android:color="color"
34. android:dashWidth="integer"
35. android:dashGap="integer" />
36. </shape>

shape是根元素，其android:shape属性定义了这个xml文件定义的形状，可以是retangle，oval，line 和 ring。

接下来我们结合代码和实际效果，一个一个地将这些元素都给过一遍吧。

corners（角）

<corners>表示的是矩形的四个角，只能用在android:shape = "rectangle" 的时候，一般情况下就是用来实现圆角矩形的效果，它只有5个子元素，如下：

1. <corners
2. android:radius="integer"
3. android:topLeftRadius="integer"
4. android:topRightRadius="integer"
5. android:bottomLeftRadius="integer"
6. android:bottomRightRadius="integer" />

一般是怎么应用的呢，如下：

1）创建shape文件，如 res / drawable/ corners.xml：

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
3. android:shape="rectangle">
4. <corners android:radius="15dp"/>
5. </shape>

2）在xml中定义按钮的时候，将其android:background设置成上面的corners文件，如下：

1. <Button
2. android:layout_margin="5dp"
3. android:layout_width="200dp"
4. android:layout_height="50dp"
5. android:background="@drawable/corners"
6. android:text="Corner" />

3）然后就可以了，不过我这里多定义了几个样式的，大家可以看着，对比一下，效果图如下：

咦，怎么全黑了？？？哦！！！其实是因为默认填充的是黑色了，而按钮上的字体又是黑色的，所以就看不见了。

既然说到这，那就来说说solid属性吧。

Solid（填充）

Solid只有一个属性，就是填充的颜色，如下：

1. <shape xmlns:android="http://schemas.android.com/apk/res/android"
2. android:shape="rectangle">
3. <corners android:radius="15dp"/>
4. <solid android:color="#716283"/>
5. </shape>

好，我们现在把填充的颜色给换了，不要黑色，再来看看效果吧。

这次对了，我们可以看到按钮上黑色的字体了，也可以看出一个一个的圆角了。

其中：

1）Corner按钮：

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
3. android:shape="rectangle">
4. <corners android:radius="15dp"/>
5. <solid android:color="#716283"/>
6. </shape>

我们可以看到4个角都变成圆角了，说明android:radius属性是对四个角都起作用的。

2）TopLeft 和 TopRight, BottomLeft 和 BottomRight 按钮

1. <corners android:topLeftRadius="15dp"/>

如果只定义topLeftRadius的话，则只有左上角会变成圆角，同理，topRightRadius也只会改变右上角。

至于BottomLeftRadius，咦？？？又不对了，怎么反过来了？？？？没错！！！！真的就是反过来了。。。我也不知道为什么会是这样，反正BottomLeft就是改变了右下角，BottomRight就是改变了左下角，大家这一点可要记好了。

3）如果同时定义radius跟topLeftRadius的话，会怎么样呢？

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
3. android:shape="rectangle">
4. <corners
5. android:radius="10dp"
6. android:topLeftRadius="15dp"
7. android:bottomRightRadius="15dp"/>
8. <solid android:color="#716283"/>
9. </shape>

则可以看到定义了radius的10dp就还是10dp，而topLeftRadius和bottomRightRadius，则会覆盖radius定义的10dp。

好了，现在我们看完corners和radius了，接下来再看看padding吧。

Padding

Padding支持四个属性，分别是left,right,top 和 bottom。

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
3. android:shape="rectangle">
4. <corners android:topLeftRadius="15dp"/>
5. <solid android:color="#716283"/>
6. <padding android:left="30dp"/>
7. </shape>

在原来的基础上再加上padding效果，我们来看看吧。

很明显，我们看到按钮上的文字明显比其他没设置padding按钮多了一些空间的出来，其实就跟我们平常认识的padding一样效果了。

关于gradient（渐变）就在下一篇中再说吧。

关于ShapeDrawable应用的一些介绍（中）之Gradient