android canvas_Android自定义View之绘制虚线

开发中遇到需要画虚线，我们首先就会想到ShapeDrawable，在布局中加一个View，并给它添加一个虚线背景，是挺简单的。

<?xml version="1.0" encoding="utf-8"?>    android:shape="line">                android:dashGap="4dp"        android:dashWidth="8dp"        android:width="1dp"        android:color="#ffeaebf0" />

       android:layout_width="match_parent"       android:layout_height="2dp"       android:layout_gravity="center_vertical"       android:layerType="software"       android:background="@drawable/shape_dash_line" />

添加虚线背景，好理解，可是android:layerType="software"是干什么的？ 这是因为我们现在的手机默认都是开启了硬件加速的， 而dashGap不支持硬件加速，我们需要把硬件加速关了就好了。 使用ShapeDrawable实现虚线的方式虽然简单，但是简单就意味着不灵活。 比如说要求虚线是根据用户操作来判断要不要添加的， 要实现动态改变虚线的粗细和颜色等样式呢， 不可能一个颜色写一个ShapeDrawable吧， 这种情况下就不如使用Canvas来实现方便了。 我们都知道Canvas只有drawLine方法，没有画虚线的方法， 但是我们可以用画笔Paint的setPathEffect(PathEffect effect)方法， PathEffect一共有五个子类： ComposePathEffect, CornerPathEffect, DashPathEffect, DiscretePathEffect,  PathDashPathEffect, SumPathEffect,  其中的DashPathEffect就是可以用来实现虚线效果的， 但是通过查阅资料发现它有一个弊端： 不支持硬件加速！好吧，那我们用drawPath来绘制路径吧。

public class DashLineView extends View {    private Paint mPaint;    private Path mPath;    //虚线颜色    private int backgroundColor;    //虚线粗细    private int strokeWidth;    //虚线宽度    private int dashWidth;    //虚线隔断宽度    private int dashSpaceWidth;    public DashLineView(Context context) {        super(context);        initView();    }    public DashLineView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        obtainAttributes(context, attrs);        initView();    }    public DashLineView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        obtainAttributes(context, attrs);        initView();    }    private void obtainAttributes(Context context, AttributeSet attrs) {        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.DashLineView);        backgroundColor = ta.getColor(R.styleable.DashLineView_pt_backgroundColor, getResources().getColor(R.color.line));        strokeWidth = ta.getInt(R.styleable.DashLineView_pt_strokeWidth, ScreenUtil.dip2px(context, 1));        dashWidth = ta.getInt(R.styleable.DashLineView_pt_dashWidth, ScreenUtil.dip2px(context, 4));        dashSpaceWidth = ta.getInt(R.styleable.DashLineView_pt_dashSpaceWidth, ScreenUtil.dip2px(context, 3));        ta.recycle();    }    private void initView(){        //使用isInEditMode解决可视化编辑器无法识别自定义控件的问题        if (isInEditMode()) {            return;        }        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);        // 需要加上这句，否则画不出东西        mPaint.setStyle(Paint.Style.STROKE);        mPath = new Path();    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        //自定义的View能够使用wrap_content或者是match_parent的属性        setMeasuredDimension(getMeasuredWidth(), getMeasuredHeight());    }    @Override    protected void onDraw(Canvas canvas) {        mPaint.setColor(backgroundColor);        mPaint.setStrokeWidth(strokeWidth);        mPaint.setPathEffect(new DashPathEffect(new float[] { dashWidth, dashSpaceWidth }, 0));        int centerY = getHeight() / 2;        mPath.reset();        mPath.moveTo(0, centerY);        mPath.lineTo(getWidth(), centerY);        canvas.drawPath(mPath, mPaint);    }    public void setDashLineColor(int bgColor) {        this.backgroundColor = getResources().getColor(bgColor);    }}

我这里只提供了setDashLineColor方法动态设置虚线的颜色，大家可以根据需求自行添加方法。

/**     * 虚线颜色     * @param color     */    public void setLineViewColor(int color){        mDashLineView.setDashLineColor(color);    }

attr.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="DashLineView">        <attr name="pt_backgroundColor" format="color"/>        <attr name="pt_strokeWidth" format="dimension"/>        <attr name="pt_dashWidth" format="dimension"/>        <attr name="pt_dashSpaceWidth" format="dimension"/>    declare-styleable>resources>

ScreenUtil.java

public static int dip2px(Context context, float dpValue) {        final float scale = context.getResources().getDisplayMetrics().density;        return (int) (dpValue * scale + 0.5f);    }

原理上还真的是比较简单的，公司项目用到，以作记录之用。以下是实现出的效果图

到这里就结束啦。 往期精彩回顾：

• Android实现短信验证码自动填充功能

• Android仿echo精美弹幕功能

• Android实现头像重叠排列功能

• Android仿QQ个性标签功能

• Android仿QQ侧滑删除的功能