Android 自定义虚线View

虚线的需求，总是觉得要是用图片没得那么看着舒心，适配性也不好。定义一个虚线DashedLineView继承自View。
效果图：

自定义第一步是永远都不变的自定义属性，在attrs.xml中：

<resources>
        <!--自定义虚线-->
    <declare-styleable name = "dashedline">
        <attr name = "lineColor" format= "color" />
        <attr name="lineLength" format="dimension"/>
        <attr name = "lineSpace" format= "dimension" />
    </declare-styleable >
</resources>

然后就是在view的构造方法中来获取：

        TypedArray typedArray = context.obtainStyledAttributes(attributeSet,R.styleable.dashedline);
        lineColor = typedArray.getColor(R.styleable.dashedline_lineColor, Color.BLACK);
        lineLength =(int) typedArray.getDimension(R.styleable.dashedline_lineLength,10);
        lineSpace =(int) typedArray.getDimension(R.styleable.dashedline_lineSpace,10);        
        typedArray.recycle();

接下来就是初始化画笔和路径了：

        this.mPaint = new Paint();
        this.mPath = new Path();
        this.mPaint.setStyle(Paint.Style.STROKE);
        this.mPaint.setColor(lineColor);
        this.mPaint.setAntiAlias( true);//消除锯齿
        this.mPaint.setStrokeWidth(4);//画笔的尺寸

然后使用DashPathEffect这个效果来做虚线。
这个东西有两个参数new DashPathEffect(float[] float, int offset),
假如float = { 1, 2, 3, 4},效果即是：绘制长度1的实线,再绘制长度2的空白,再绘制长度3的实线,再绘制长度4的空白,依次重复下去。

使mian_activity.xml：

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

    <com.lxj.dashedlineview.DashedLineView 
        android:id="@+id/line_1"
        android:layout_width="match_parent"
        android:layout_height="30dp"       
        lxj:lineColor="#000000"
        lxj:lineLength="10dp"
        lxj:lineSpace="10dp"
        android:layout_marginTop="50dp"
        />

     <com.lxj.dashedlineview.DashedLineView 
         android:id="@+id/line_2"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        lxj:lineColor="#ff0000"
        android:layout_marginTop="50dp"
        />
</LinearLayout>

MainActivity中：其实这部分完全可以直接写到自定义view中去。

public class MainActivity extends Activity {
     private DashedLineView line_1,line_2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // line_1 默认效果
        line_2 = (DashedLineView) findViewById(R.id.line_2);
        line_2.setMyStyle(new DashPathEffect(new float[]{5,2,10,5}, 1));
    }

}

最后贴一个DashedLineView的完整代码：

public class DashedLineView extends View {
    private int lineColor;
    private int lineLength;
    private int lineSpace;
    private Paint mPaint = null;
    private Path mPath = null;
    private PathEffect pe = null;
    private float[] arrayOfFloat;

    public DashedLineView(Context paramContext) {
        this(paramContext, null);
    }

    public DashedLineView(Context context, AttributeSet attributeSet) {
        super(context, attributeSet);
        TypedArray typedArray = context.obtainStyledAttributes(attributeSet,R.styleable.dashedline);
        lineColor = typedArray.getColor(R.styleable.dashedline_lineColor, Color.BLACK);
        lineLength =(int) typedArray.getDimension(R.styleable.dashedline_lineLength,10);
        lineSpace =(int) typedArray.getDimension(R.styleable.dashedline_lineSpace,10);        
        typedArray.recycle();

        this.mPaint = new Paint();
        this.mPath = new Path();
        this.mPaint.setStyle(Paint.Style.STROKE);
        this.mPaint.setColor(lineColor);
        this.mPaint.setAntiAlias( true);//消除锯齿
        this.mPaint.setStrokeWidth(4);//画笔的尺寸
        arrayOfFloat = new float[2];
        //假如arrayOfFloat = { 1, 2, 3, 4};效果即是：绘制长度1的实线,再绘制长度2的空白,再绘制长度3的实线,再绘制长度4的空白,依次重复下去
        arrayOfFloat[0] =px2sp(context,lineLength);//线长度
        arrayOfFloat[1] =px2sp(context,lineSpace);//空隙长度
        this.pe = new DashPathEffect(arrayOfFloat, 1);//参数1为偏移量
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        this. mPath.moveTo(0.0F, 0.0F);//画笔移动到x=0；y=0位置，
        this. mPath.lineTo(getMeasuredWidth(), 0.0F);//从到（0,0）位置，画线到（getMeasuredWidth(),0）；
        this. mPaint.setPathEffect(this.pe);
        canvas.drawPath(this.mPath,this.mPaint);
    }

    public void setMyStyle(PathEffect p){
        this.pe = p;
        invalidate();
    }

    public static int px2sp(Context context, float pxValue) {
        float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (pxValue / fontScale + 0.5f);
    }
}

demo下载地址：http://download.csdn.net/detail/u010886975/9656163