19、android 自定义虚线

一、介绍

android 中经常使用到虚线，横着的虚线直接使用 shape实现。但是要想使用shape实现竖着的虚线却不是那么方便。于是想到使用View自定义一个虚线 。

横着的虚线很好实现，直接上代码 shape_h_dottedline.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line" >

    <stroke
        android:dashGap="6px"
        android:dashWidth="6px"
        android:color="#C7B299" />

</shape>

照例使用shape 写了竖虚线 shape_votec_dottedline.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90">
    <shape android:shape="line">
        <stroke
            android:width="1dp"
            android:color="#cf152b"
            android:dashGap="10px"
            android:dashWidth="10px" />
    </shape>
</rotate>

布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:layout_height="match_parent">

    <RelativeLayout
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="100dp">

        <com.cloud.wd.custom.widget.JDottedLine
            android:layout_marginTop="10dp"
            android:layout_width="20dp"
            android:layout_height="160dp" />
    </RelativeLayout>

    <ImageView
        android:layerType="software"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp"
        android:background="@drawable/shape_votec_dottedline"
        android:layout_width="20dp"
        android:layout_height="160dp"/>
    <ImageView
        android:layerType="software"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp"
        android:background="@drawable/shape_h_dottedline"
        android:layout_width="100dp"
        android:layout_height="160dp"/>
</LinearLayout>

可是呢？

竖着的线却是不能显示完整的

无奈搜索了好久，最终直接未果！于是想到了 自己使用path 画一个虚线；

实现代码很简单：

/**
 * Created by fmm on 2017/7/11.
 */

public class JDottedLine extends View {

    private Paint mDotPaint;

    public JDottedLine(Context context) {
        super(context);
        initView();
    }

    public JDottedLine(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    public JDottedLine(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public JDottedLine(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initView();
    }

    private void initView() {
        mDotPaint = new Paint();
        mDotPaint.setColor(Color.GRAY); //画笔颜色
        mDotPaint.setStrokeWidth(1); //画笔宽度
        // 1、STROKE 描边
        // 2、FILL_AND_STROKE 填充内部和描边
        // 3、FILL：填充内部
        mDotPaint.setStyle(Paint.Style.STROKE);
        //1、Cap.BUTT 这条路径结束，而不是超越它。
        //2、Cap.ROUND 结束是个半圆
        //3、Cap.SQUARE 结束是个方形
        mDotPaint.setStrokeCap(Paint.Cap.ROUND);//
        //设置抗锯齿
        mDotPaint.setAntiAlias(true);
        //设置是否抖动
        mDotPaint.setDither(true);


    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float startY = getHeight();
        float startX = getWidth() / 2;
        DashPathEffect dashPathEffect =
                new DashPathEffect(new float[]{8, 10, 8, 10}, 0);
        mDotPaint.setPathEffect(dashPathEffect);

        Path path = new Path();
        path.moveTo(startX,0);
        path.lineTo(startX,startY);
        canvas.drawPath(path,mDotPaint);
    }
}

使用方式 和布局文件中的一样。

---

无意中发现一个良心的博主：

http://www.gcssloop.com/customview/CustomViewIndex/