Android开发样式(1)-shape

Android原生的控件一般都不怎么好看。记得刚开始学Android时，看着自己完全用系统控件写出的不忍直视的界面，对于如何做出不一样的按钮，让它们在不同状态下有不一样的效果很是好奇。一开始以为那些炫酷效果都是要上网搜各种背景图片贴上去的，后来才知道居然有shape，selector之类的好东西。

那么，shape可以干什么呢：做渐变，做圆角，画框…好多好多。

经常会用到，所以想把它总结一下，萌新表示：妈妈再也不用为我的界面担心了。

1、使用前的准备

在 drawable 文件夹下新建drawable resource file资源文件，如图：

然后根节点改为shape，就能开始使用了。

2、shape开发样式

2.1 标签属性

属性名	用途
solid	填充颜色
padding	内容和控件边缘的间隙
corners	设置圆角
gradient	梯度，用来做渐变的
stroke	怎么说呢，可以理解为描边吧
size	大小

2.2 solid

solid属性即为填充颜色，可以是 #fff000 这种当场选择的，也可以是在color资源文件中事先定义好的。比如我的代码是这样的，

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#66a1c5"/>
</shape>

就会填充蓝色出来。

2.3 padding

padding属性就和控件里的padding一样。我们在shape中设置了padding，当控件用到这个shape时，padding属性就会自动生效。比如代码是这样的，加了个padding标签，表示和控件下面相距20dp。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#66a1c5"/>
    <padding android:bottom="20dp"/>
</shape>

然后我在button中使用这个shape，

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是按钮"
        android:textColor="#fff"
        android:background="@drawable/shape1"/>

就是这个样子的。

不多解释，看下一条。

2.4 corners

这个属性是用来给控件设置圆角的，其中radius指定的为圆的半径，也就是所画圆弧的半径。

那么我在上面代码的基础上加上圆角标签属性后

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#66a1c5"/>
    <padding android:bottom="20dp"/>
    <corners android:radius="6dp"/>
</shape>

按钮就变成这样了，是不是好看了一点呢？

当然，你也可以只设置一个圆角或多个圆角。比如我用的左上角

android:topLeftRadius="8dp"

效果是这样的。

当然了，如果你把半径设置得大于过等于控件的一半了，那么两个圆角就相当于合并成一个半圆了。比如我们在corners标签下写左上角和左下角的半径为24dp，代码如下：

<corners
        android:topLeftRadius="24dp"
        android:bottomLeftRadius="24dp"/>

运行效果就是这样的，挺好玩的哈！

2.5 gradient

gradient（查看标准翻译）标签用来做渐变色的。设置里面的startColor，centerColor和endColor属性，系统就会帮你实现颜色的平滑过渡，从而实现渐变。

举个最常见的例子，QQ的标题栏就是从深蓝→浅蓝的一个渐变。那么我们就这样写，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="@color/blue_1"
              android:endColor="@color/blue_2"/>
</shape>

<color name="blue_1">#4986f8</color>
<color name="blue_2">#69cafb</color>

得出的效果就是这样的。（这两个颜色是我随便选的，你们也可以自己调颜色，调到满意为止哦）

顺便提一下，系统默认是从左往右填充颜色的，我们还可以用angle属性控制填充的角度，但是要注意angle里面只能填45，90，135，-45等等，这些45的倍数的数字，否则角度无效。

好的，接下来说一说type。在type属性中有3中方式可选，分别是linear，radial和sweep。

linear线性的渐变，也就是默认情况下的type。

radial放射性的，从中间向四周扩散。举个栗子。设置type为radial，然后设置扩散半径为24dp，那么按钮就会变成这样。

android:type="radial"
android:gradientRadius="24dp"

sweep从0度开始顺时针扫过一圈。不多逼逼，直接上运行结果

android:type="sweep"

2.6 stroke

stroke（看了也没用的翻译）这个标签就很神奇了，效果也是超棒的哦，可以理解为画笔里面的描边属性。用文字描述解释不清楚，来看看它的效果就一目了然它的作用了。

首先我填充颜色为蓝色，然后设置宽度为2dp。这个宽度是什么呢，就是描边时描的线的宽度。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="@color/blue_1"
        android:width="2dp"/>
</shape>

还是用之前的按钮来看看运行效果吧。（我把字偷偷换成黑色了）

什么？还不理解宽度是啥？好，那我把宽度改为6dp，再看看效果。

android:width="6dp"

这样就很明显了吧。

你以为这就完了吗？stroke还有更好玩的属性呢。

• dashGap设置间隔效果中空隙的长度
• dashWidth间隔效果中画出的每一段的宽度

费多看码。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="@color/blue_1"
        android:width="4dp"
        android:dashGap="6dp"
        android:dashWidth="8dp"/>
</shape>

运行结果就是酱子，每一段蓝色之间间隔6dp，每一段长度为8dp。

那么，当我把dashWidth改为1dp之后又会发生什么呢？就是每一段蓝色就只有1dp这么长了，但还是相隔6dp，如下图。

3、总结

再次回顾所有的属性，你应该在心里面都已经对它们的用法和效果都了如指掌了吧。

属性名	用途
solid	填充颜色
padding	内容和控件边缘的间隙
corners	设置圆角
gradient	梯度，用来做渐变的
stroke	怎么说呢，可以理解为描边吧
size	大小

PS：好久没写了，深感愧疚，看着以前好多篇草稿都只写了一半，决定把他们写完。下一篇说不定是开发样式这一系列的selector，但也说不定是写别的。