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