ShapeDrawable

Android 绘图
  1. corners（角）
  2. Padding
  3. Gradient(渐变)
  4. stroke描边
  5. ring

ShapeDrawble所支持的参数

此处输入图片的描述

corners（角）

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

1
2
3
4
5
6
<corners
        android:radius="integer"                   //设置全部角
        android:topLeftRadius="integer"            //设置左上角
        android:topRightRadius="integer"           // 设置右上角
        android:bottomLeftRadius="integer"         //设置右下角  没错确实是这样  
        android:bottomRightRadius="integer" />     // 设置左下角没错确实是这样

如果同时设置了radius跟topLeftRadius，则左上角显示出的将会是topLeftRadius设置的值

一般是怎么应用的呢，如下：
1）创建shape文件，如 res / drawable/ corners.xml：

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

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

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

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

Padding

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

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

在原来的基础上再加上padding效果，我们来看看吧
此处输入图片的描述
很明显，我们看到按钮上的文字明显比其他没设置padding按钮多了一些空间的出来，其实就跟我们平常认识的padding一样效果了

Gradient(渐变)

我们在 res / drawable/ 中 创建一个xml，代码如下

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <corners android:radius="15dip"/>
    <solid android:color="#0000FF"/>
    <gradient android:startColor="#FF0000"
        android:endColor="#00FF00"
        android:type="linear"/>
</shape>

由上面的代码，我们可以看到定义了圆角，实心填充蓝色和从红到绿的线性渐变，默认的渐变是从左到右的，可以通过下面的一个属性来改变渐变的方向：

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <corners android:radius="15dip"/>
    <gradient android:startColor="#FF0000"
        android:endColor="#00FF00"
        android:angle="90"
        android:type="linear"/>
</shape>

为了方便地来对比看一下各种颜色的变换，我们定义了几个不同的渐变颜色来看看效果，如下：

此处输入图片的描述

可以看到，从0到360，这个渐变的颜色会慢慢随着逆时针的方向来从水平变成垂直再变成水平。而这个角度的值必须是45的倍数，否则会出报错的。不过我们仔细看一下，好像45度跟0度也没啥不同，135度也好像就是从右到左而已，还不清楚为什么。

目前的渐变只是两种颜色的渐变，而Android还提供了一种中间的颜色的过渡，如下：

1
2
3
4
5
6
7
<gradient 
        android:startColor="#FF0000"
        android:centerColor="#0000FF"
        android:centerY="0.1"
        android:endColor="#00FF00"
        android:angle="90"
        android:type="linear"/>

对应最后一个按钮

android:centerColor 就提供了这样的功能，另外centerX/Y则可以改变这个中间的颜色相对的位置（当然，X就只对左右的渐变有用，而Y只对上下的渐变有用），效果如下

此处输入图片的描述

centerX/Y的值只能是从0到1.0的，从开始颜色开始（是开始颜色，如果我们的angle变成180，即从右到坐，0.1的值，还是从红色开始的，可以简单地认为红色就变成只有0.1了）

上面我们看到的都是线性的，而Android中关于gradient，提供了另外两种：radial 和 sweep

1）Radial 放射

关于Radial的，我们可以有如下定义：

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <corners android:radius="15dip"/>
    <gradient android:startColor="#FF0000"
        android:endColor="#00FF00"
        android:gradientRadius="100"
        android:type="radial"/>
</shape>

对应第二个
这里有一点要注意，当android:type=”raidal”的时候，gradientRadius的属性是一定要设置的，它设置了这个放射的半径，具体我们来看看效果吧
此处输入图片的描述

2）Sweep

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <corners android:radius="15dip"/>
    <gradient android:startColor="#FF0000"
        android:centerColor="#0000FF"
        android:centerX="0.1"
        android:endColor="#00FF00"
        android:type="sweep"/>
</shape>

对应第二个
在type=”sweep”中，angle的属性是一点用没有的，而centerX/Y跟radial一样，都是针对开始颜色的比例来设置的，x是针对开始颜色在X轴上面的比例，而y则是针对在Y轴上面的比例，具体看下面效果图：

此处输入图片的描述

stroke描边

它只有四个属性：
1）android:width，表示的是线的粗细。
2）android:color，表示的是线的颜色。
3）android:dashGap，表示的是一条虚线，gap表明是虚线中线与线间的的空隙。
4）android:dashWidth，这个属性表示的是虚线中线的长度，只有设置了dashGap来画一条虚线，这个属性值才能起作用。

代码如下：

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <solid android:color="#CCCCCC"/>
    <stroke android:width="1dp" android:color="#FF0000" android:dashWidth="10dp" android:dashGap="2dp"/>
</shape>

下面是效果：

此处输入图片的描述

最下面的按钮是把形状态变成了line的格式

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="line">
    <solid android:color="#CCCCCC"/>
    <stroke android:width="1dp" android:color="#FF0000" android:dashWidth="10dp" android:dashGap="2dp"/>
</shape>

关于stroke的属性其实就这么一点点，没了。不过我们讲到shape=”line“，我们之前做的例子都是rectangle（矩形），oval（椭圆），而line其实就是一条线，可以是虚线，也可以是直线，都是比较简单的。

注：可以利用此给按钮添加边框，就像上面图片中第二个按钮

ring

Android中提供了四种形状，rectangle（矩形），oval（椭圆），line（直线）和 ring（环），前面几种我们其实已经基本说到了，现在就说说最后的ring（环）吧。

先看看xml中的定义，我定义了三个，可以看一下区别：

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="ring"    
    android:useLevel="false">
    <gradient android:startColor="#FF0000"
        android:endColor="#00FF00"
        android:type="linear"/>
    <stroke android:width="1dp" android:color="#0000FF"/>
</shape>

1
2
3
4
5
6
7
8
<!-- Ring1 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="ring"
    android:innerRadiusRatio="3"    
    android:thicknessRatio="9"
    android:useLevel="false">
    ...
</shape>
1
2
3
4
5
6
7
8
<!-- Ring2 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="ring"
    android:innerRadiusRatio="2"  
    android:thicknessRatio="2"
    android:useLevel="false">
    ...
</shape>
1
2
3
4
5
6
7
8
9
<!-- Ring3 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="ring"    
    android:innerRadiusRatio="2"  
    android:innerRadius="30dp"
    android:thicknessRatio="2"
    android:useLevel="false">
    ...
</shape>

如果我们定义的形状是”ring”，我们必须把android:useLevel设为false，不然的话，这个环是显示不出来的。

关于Ring还有几个其特有的属性：
1）innerRadius，设置环内圆的半径。
2）innerRadiusRatio，设置的是内圆半径的比例，默认是3，表明是整个环的宽度的1/3，但是如果我们设置了innerRadius，即具体的宽度的话，这个属性是会被覆盖的。
3）thickness，设置环的厚度。
4）thincknessRatio，设置环的厚度的比较，默认是9，表明是整个环的宽度的1/9，但是如果设置了thickness，同样的，这个属性也会被覆盖的。

2,4 属性未弄懂

（我觉得官文文档那里应该是说反了）
下面是上面定义的4个环的效果图：
此处输入图片的描述
第一个是默认的，我们只设置了useLevel=false，其它都是默认值，然后第二个就设置其innerradiusratio = 3 和thicknessratio = 9了。
再从左下角的环，可以看出，设置内径和环的厚度的时候，会先设置内径的区域，而环的厚度如果超过了控件的范围，也就不显示了。
关于shape的基础用法基本就是这样，在更多的时候，我们是结合了layer和shape来实现自定义的效果，比如自定义的进度条，在以后的篇章中，再来慢慢说吧。

当前网速较慢或者你使用的浏览器不支持博客特定功能，请尝试刷新或换用Chrome、Firefox等现代浏览器