android开发之shape详解

很多时候，使用shape能够实现的效果，你用一张图片也能够实现，但问题是一张图片无论你怎么压缩，它都不可能比一个xml文件小，因此，为了获得一个高性能的手机App，我们在开发中应该遵循这样一个原则：能够用shape实现的效果尽量不使用图片来实现。

今天我们就一起来看看shape的使用。

首先，使用shape画的图形，这个xml文件的根节点是shape，如下：

 

<span style="font-size:14px;"><shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle|oval|line|ring" >
</span><pre name="code" class="java"><span style="font-size:14px;"><shape</span>></pre>

 

shape取值有四种，可以是rectangle（长方形），oval（椭圆），line（线条），ring（圆环），如果设置的话默认是长方形，只有当我们要画的图形是ring的时候，下面这几个属性才会生效：

 

1. android:innerRadius：内环的半径。
2. android:innerRadiusRatio：内环的比例，比如这个值为2，那么内环的半径就为环半径除以2，如果设置了第一个属性，则这个属性不起作用。
3. android:thickness：环的厚度。
4. android:thicknessRatio：环的厚度比例，比如这个值为2，那么环的厚度就为环半径除以2，如果设置了第三个属性，则这个属性不起作用。
5. android:useLevel：只有当我们的shape使用在LevelListDrawable中的时候，这个值为true，否则为false。

 

以上是shape节点，在shape节点中我们还可以定义其他的节点：

 

圆角：

 

<span style="font-size:14px;"><corners
    android:radius="20dp"
    android:topLeftRadius="20dp"
    android:topRightRadius="20dp"
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    /></span>

android:radius表示长方形四个角的半径，当然也可以每个角单独设定，后面单独设定的圆角半径会覆盖android:radius。

 

 

渐变：

 

<span style="font-size:14px;">    <gradient
        android:angle="90"
        android:centerColor="#9ACD32"
        android:endColor="#9AC0CD"
        android:startColor="#9AFF9A"
        android:type="linear"
        android:useLevel="false" /></span>

 

 

1. android:angle="90"表示渐变的起始位置，这个值必须为45的倍数，包括0，0表示从左往右渐变，逆时针旋转，依次是45，90，135.....，90表示从下往上渐变，270表示从上往下渐变，剩下的大家依次去推理。
2. android:startColor="#9AFF9A"，表示渐变的起始颜色
3. android:centerColor="#9ACD32"表示渐变的过渡颜色
4. android:endColor="#9AC0CD"表示渐变的结束颜色
5. type表示渐变的类型，有三种，分别是linear（线性变化）,radial（辐射渐变）以及sweep（扫描渐变）
6. 当type为radial时，我们要设置android:gradientRadius=""，这个表示渐变的半径（线性渐变和扫描渐变不需要设置）

填充：

 

<span style="font-size:14px;"><solid android:color="#ADFF2F" /></span>

这个比较简单，不多说。

 

 

描边：

 

<span style="font-size:14px;color:#000000;"><stroke
    android:width="1dp"
    android:color="#FFFF00"
    android:dashWidth="15dp"
    android:dashGap="5dp"
    /></span>

 

 

1. android:dashWidth表示虚线的宽度
2. android:dashGap表示虚线之间的间隔
3. 以上两个属性如果不设置则为实线

 

大小：

 

 

<span style="font-size:14px;"><size
    android:width="1dp"
    android:height="1dp"
    /></span>

这个表示该shape的大小，默认情况下，shape的大小与它所在的容器大小成正比。如果我们在ImageView中使用这个shape，那么可以通过android:scaleType="center"属性来限制这种缩放。

 

当然，还有一种padding，这和我们在xml文件中用的一样，我这里就不多说了。

 

最后，基于以上几种特性，我做了以下几种效果供大家参考。

 

 

示例效果代码下载https://github.com/lenve/shape

非常炫的效果