android开发 画虚线

在安卓app开发中,可能会遇到需要画虚线的时候,一般可以用shape来画。但为了操作方便,在借鉴了其他开发者的写法后,在此总结一种自定义view的方式
先上自定义view

public class DashView extends View {
    private static final String TAG = "DashView";
    public static final int DEFAULT_DASH_WIDTH = 100;
    public static final int DEFAULT_LINE_WIDTH = 100;
    public static final int DEFAULT_LINE_HEIGHT = 10;
    public static final int DEFAULT_LINE_COLOR = 0x9E9E9E;

    /**虚线的方向*/
    public static final int ORIENTATION_HORIZONTAL = 0;
    public static final int ORIENTATION_VERTICAL = 1;
    /**默认为水平方向*/
    public static final int DEFAULT_DASH_ORIENTATION = ORIENTATION_HORIZONTAL;
    /**间距宽度*/
    private float dashWidth;
    /**线段高度*/
    private float lineHeight;
    /**线段宽度*/
    private float lineWidth;
    /**线段颜色*/
    private int lineColor;
    private int dashOrientation;

    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private int widthSize;
    private int heightSize;

    public DashView(Context context) {
        this(context,null);
    }

    public DashView(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.DashView);
        dashWidth = typedArray.getDimension(R.styleable.DashView_dashWidth,DEFAULT_DASH_WIDTH);
        lineHeight = typedArray.getDimension(R.styleable.DashView_lineHeight, DEFAULT_LINE_HEIGHT);
        lineWidth = typedArray.getDimension(R.styleable.DashView_lineWidth, DEFAULT_LINE_WIDTH);
        lineColor = typedArray.getColor(R.styleable.DashView_lineColor, DEFAULT_LINE_COLOR);
        dashOrientation = typedArray.getInteger(R.styleable.DashView_dashOrientation,DEFAULT_DASH_ORIENTATION);
        mPaint.setColor(lineColor);
        mPaint.setStrokeWidth(lineHeight);
        typedArray.recycle();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        widthSize = MeasureSpec.getSize(widthMeasureSpec)-getPaddingLeft()-getPaddingRight();
        heightSize = MeasureSpec.getSize(heightMeasureSpec - getPaddingTop() - getPaddingBottom());
        Log.d(TAG, "onMeasure: "+widthSize+"----"+heightSize);
        Log.d(TAG, "dashOrientation: "+dashOrientation);
        if(dashOrientation == ORIENTATION_HORIZONTAL){
            //不管在布局文件中虚线高度设置为多少,虚线的高度统一设置为实体线段的高度
            setMeasuredDimension(widthSize, (int) lineHeight);
        }else{
            setMeasuredDimension((int) lineHeight, heightSize);
        }

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        switch (dashOrientation){
            case ORIENTATION_VERTICAL:
                drawVerticalLine(canvas);
                break;
            default:
                drawHorizontalLine(canvas);
        }
    }

    /**
     * 画水平方向虚线
     * @param canvas
     */
    public void drawHorizontalLine(Canvas canvas){
        float totalWidth = 0;
        canvas.save();
        float[] pts = {0,0,lineWidth,0};
        //在画线之前需要先把画布向下平移办个线段高度的位置,目的就是为了防止线段只画出一半的高度
        //因为画线段的起点位置在线段左下角
        canvas.translate(0,lineHeight/2);
        while(totalWidth<=widthSize){
            canvas.drawLines(pts,mPaint);
            canvas.translate(lineWidth + dashWidth,0);
            totalWidth += lineWidth + dashWidth;
        }
        canvas.restore();
    }

    /**
     * 画竖直方向虚线
     * @param canvas
     */
    public void drawVerticalLine(Canvas canvas){
        float totalWidth = 0;
        canvas.save();
        float[] pts = {0,0,0,lineWidth};
        //在画线之前需要先把画布向右平移半个线段高度的位置,目的就是为了防止线段只画出一半的高度
        //因为画线段的起点位置在线段左下角
        canvas.translate(lineHeight/2,0);
        while(totalWidth<=heightSize){
            canvas.drawLines(pts,mPaint);
            canvas.translate(0,lineWidth + dashWidth);
            totalWidth += lineWidth + dashWidth;
        }
        canvas.restore();
    }
}

代码中用到了自定义属性,在res的values中新建attrs.xml,编写如下:

 <!--画虚线-->
    <declare-styleable name="DashView">
        <attr name="dashWidth" format="dimension"/>
        <attr name="lineWidth" format="dimension"/>
        <attr name="lineHeight" format="dimension"/>
        <attr name="lineColor" format="color"/>
        <attr name="dashOrientation" format="integer"/>

    </declare-styleable>

配置完成,在布局中调用即可

 <DashView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginLeft="10dp"
      android:layout_marginRight="10dp"
      app:dashWidth="2dp"
      app:lineWidth="4dp"
      app:lineColor="@color/DashView_line_color"
      app:dashOrientation="0"
      app:lineHeight="1dp"/>

其中,属性介绍:
dashWidth:两段线段之间的间距
lineWidth:每条线段宽度
lineColor:线段颜色
dashOrientation:虚线方向 0,水平,1,竖直
lineHeight:线段高度

注意:注意事项 当设定虚线的方向时,对应方向的wrap_content显示效果为match_parent,因为在实际情况中,虚线的尺寸总是固定的数值。

再次注意:本文是在其他开发者代码的基础上进行整理的,我感觉好用并且实用,比找美工给切一个虚线的图片要省内存。现在附上原作者博客链接和git地址
csdn: http://blog.csdn.net/small_lee/article/details/52153557
github: https://github.com/SmallLee/DashView

再次感谢 原作者!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值