Android绘制竖直虚线完美解决方案—自定义View

开发中我们经常会遇到绘制虚线的需求，一般我们使用一个drawable文件即可实现，下面我会先列举常规drawable文件的实现方式。

使用drawable绘制水平虚线

水平方向的虚线最好绘制，drawable文件如下所示：

drawable/imaginary_line.xml:<?xml version="1.0" encoding="utf-8"?>

在布局中使用如下：

这里我们需要注意一下几点，第一最好设置android:layerType="software"属性，第二View的高度，最好大于drawable中设置的虚线高度。不然都可能导致虚线不显示。

使用drawable绘制竖直方向虚线

与水平方向虚线相比，竖直方向虚线就麻烦的多了，而且有很多缺陷。

drawable代码如下所示：

drawable/vertical_imaginary_line.xml:<?xml version="1.0" encoding="utf-8"?>

可以看出，实质上是通过View动画，对水平方向的View进行了旋转操作。

具体使用如下：跟水平方向使用方式一样。

因为View是先绘制水平方向的虚线，然后进行旋转，所以竖直虚线默认就会有偏移量，我们需要手动的去调整位置。

实现效果如下所示：

image

单个虚线还好说，如果需要绘制图表的网格线之类的需求，那就要欲哭无泪了。

自定义DividerView

接下来祭出我们的大杀器自定义View。

先定义下需求，我们的虚线需要支持自定义背景色，支持自定义虚线宽度，支持水平和竖直方向，支持虚线的dash宽度和dash间隔，所以我们的自定义属性就如下所示：

attrs.xml:<?xml version="1.0" encoding="utf-8"?>

接下来我们看下DividerView的具体实现：
自定义View的第一步，通常是获取自定义的属性值，具体如下所示：

public DividerView(Context context, AttributeSet attrs) {    super(context, attrs);    int dashGap, dashLength, dashThickness;    int color;    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DividerView, 0, 0);    try {        dashGap = a.getDimensionPixelSize(R.styleable.DividerView_dashGap, 5);        dashLength = a.getDimensionPixelSize(R.styleable.DividerView_dashLength, 5);        dashThickness = a.getDimensionPixelSize(R.styleable.DividerView_dashThickness, 3);        color = a.getColor(R.styleable.DividerView_divider_line_color, 0xff000000);        orientation = a.getInt(R.styleable.DividerView_divider_orientation, ORIENTATION_HORIZONTAL);    } finally {        a.recycle();    }    mPaint = new Paint();    mPaint.setAntiAlias(true);    mPaint.setColor(color);    mPaint.setStyle(Paint.Style.STROKE);    mPaint.setStrokeWidth(dashThickness);    mPaint.setPathEffect(new DashPathEffect(new float[]{dashGap, dashLength,}, 0));}

我们通过TypedArray获取到我们设置的自定义属性值，并给各个属性设置默认值；接着初始化我们的画笔paint。

初始化工作完毕后，就是绘制工作了，代码如下所示：

@Overrideprotected void onDraw(Canvas canvas) {    if (orientation == ORIENTATION_HORIZONTAL) {        float center = getHeight() * 0.5f;        canvas.drawLine(0, center, getWidth(), center, mPaint);    } else {        float center = getWidth() * 0.5f;        canvas.drawLine(center, 0, center, getHeight(), mPaint);    }}

具体使用如下所示：

横向虚线：

竖向虚线：

效果图如下所示：

image

DividerView项目地址

参考：
Android竖虚线绘制

Android绘制竖直虚线完美解决方案—自定义View