Android开发——Drawable绘制图形之Shape

相信大家在开发过程中经常需要绘制一些比较简单的图形，例如：分割线、按钮、圆形...等。但是笔者在开发初期总是遇到各种问题，以至于一个简单的效果都实现不了。网上也没有比较全面系统的介绍文章。今天就把自己整理出来的一些东西分享出来，希望可以帮助到一下开发新手，因为毕竟我现在也还算是一个新手嘛。(PS:大神勿喷)

简介：

Drawable 是 android.graphics.drawable 包下的一个类。

直接已知子类有：

BitmapDrawable,ClipDrawable,ColorDrawable,DrawableContainer,GradientDrawable,InsetDrawable,LayerDrawable,NinePatchDrawable,PictureDrawable,RotateDrawable, ScaleDrawable, ShapeDrawable

顾名思义，Drawable这个类就是主要用来实现图形的绘制的。

Shape 的用法总结：

shape是比较基础的形状绘制工具，一般用shape定义的xml文件存放在drawable目录下，若项目没有该目录则新建一个，而不要将它放到drawable-hdpi等目录中。

　　使用shape可以自定义形状，支持下面四种类型的形状，通过android:shape 属性指定：

　　rectangle : 矩形，常用于绘制矩形、圆角矩形、按钮背景等。

　　oval : 椭圆形，用得比较多的是画正圆吧，笔者没怎么用过。

　　line : 线形，可以画实线和虚线。

　　ring : 环形，可以画环形进度条。

　　 solid : 设置形状填充的颜色，只有android:color一个属性

　　android:color 填充的颜色

　　padding : 设置内容与形状边界的内间距，可分别设置左右上下的距离

　　android:left 左内间距

　　android:right 右内间距

　　android:top 上内间距

　　android:bottom 下内间距

　　gradient : 设置形状的渐变颜色，可以是线性渐变、辐射渐变、扫描性渐变

　　android:type 渐变的类型

　　linear 线性渐变，默认的渐变类型

　　radial 放射渐变，设置该项时，android:gradientRadius也必须设置

　　sweep 扫描性渐变

　　android:startColor 渐变开始的颜色

　　android:endColor 渐变结束的颜色

　　android:centerColor 渐变中间的颜色

　　android:angle 渐变的角度，线性渐变时才有效，必须是45的倍数，0表示从左到右，90表示从下到上

　　android:centerX 渐变中心的相对X坐标，放射渐变时才有效，在0.0到1.0之间，默认为0.5，表示在正中间

　　android:centerY 渐变中心的相对X坐标，放射渐变时才有效，在0.0到1.0之间，默认为0.5，表示在正中间

　　android:gradientRadius 渐变的半径，只有渐变类型为radial时才使用

　　android:useLevel 如果为true，则可在LevelListDrawable中使用

　　corners : 设置圆角，只适用于rectangle类型，可分别设置四个角不同半径的圆角，当设置的圆角半径很大时，就可变成弧形边了

　　android:radius 圆角半径，会被下面每个特定的圆角属性重写

　　android:topLeftRadius 左上角的半径

　　android:topRightRadius 右上角的半径

　　android:bottomLeftRadius 左下角的半径

　　android:bottomRightRadius 右下角的半径

　　stroke : 设置描边，可描成实线或虚线。

　　android:color 描边的颜色

　　android:width 描边的宽度

　　android:dashWidth 设置虚线时的横线长度

　　android:dashGap 设置虚线时的横线之间的距离

一、line 绘制直线

1、绘制一条实线

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

</shape>

一般 只需要通过stroke来绘制， width 表示实线的宽度，color 即实线的颜色。

2、绘制一条虚线

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

同样只需要借助stroke即可。这里的dashWidth 表示短实线的长度，dashGap 表示实线之间的间隙宽度。

注意：

在绘制虚线时，经常会出现运行在手机或虚拟机上依旧显示为实线，经笔者研究是因为硬件加速导致的，需要手动设置关闭硬件加速就可以显示出虚线效果了。常见关闭硬件加速的效果有以下几种：

(1)、在 xml 文件中设置 android:layerType="software"

(2)、通过 findViewById() 找到对应的控件来设置

(3)、可以对单个的Activity控制是否启用硬件加速：

(4)、在Applciation级别控制硬件加速的开关：

提示：硬件加速的问题可以查阅：http://blog.chenming.info/blog/2012/09/18/android-hardware-accel/

3、绘制竖虚线

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="90">

    <shape
        android:shape="line">
        <stroke
            android:width="1dp"
            android:color="@color/colorPrimaryDark"
            android:dashGap="6dp"
            android:dashWidth="6dp"/>

    </shape>
</rotate>

绘制出来的直线默认是横线，如果想要绘制竖线，需要在 xml 文件的 shape 标签外边加上 rotate 标签通过 fromDegree 属性来制定旋转的角度，从而达到绘制竖线的目的。笔者在绘制竖虚线的过程中发现虽然旋转后可以绘制出竖线，但是在引用布局中的宽高设置有些问题，倒是竖线不能显示足够的长度，只能显示一小截。需要根据需要将引用的宽高设置到一定值，再通过 margin 设置赋值来抵消对周围控件位置的影响。总是较为复杂，建议还是让美工提供切图比较合理一些。