每個App都會用到分割線，一個兩邊頂?shù)筋^的分割線只需要使用<View>配合background屬性就能夠輕松實現(xiàn)。
常見的分割線形式還有如下這種兩端或者一端留出一定空白距離的分割線。

實現(xiàn)這種效果有很多解決方案，我能想到的有三種：

第一種，也是最簡單的一種實現(xiàn)方式是：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/divider_height"
    android:background="@android:color/white"
    android:paddingLeft="@dimen/divider_padding"
    android:paddingRight="@dimen/divider_padding">
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:background="@android:color/white"/>
</LinearLayout>

這種實現(xiàn)方式會引起不必要的overdraw，因為容器的背景繪制了一次，然后分割線再繪制了一次。

第二種，可以用三個不同background的<View>來避免overdraw

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/divider_height"
    android:orientation="horizontal">
    <View
        android:layout_width="@dimen/divider_padding"
        android:layout_height="match_parent" 
        android:background="@android:color/white"/>
    <View
        android:layout_width="@dimen/divider_padding"
        android:layout_height="match_parent" 
        android:layout_weight="1.0"
        android:background="@color/divider_color"/>
    <View
        android:layout_width="@dimen/divider_padding"
        android:layout_height="match_parent" 
        android:background="@android:color/white"/>
</LinearLayout>    

這個方案解決了overdraw問題，但也并非完美，因為為了實現(xiàn)分割線增加了一層嵌套。那么接下來就引出了本篇想要記錄的重點

第三種，自定義View繪制分割線

這樣最終分割線的布局代碼非常簡練：

<Divider
    android:layout_width="match_parent"
    android:layout_height="@dimen/divider_height"
    custom:dividerLineColor="@color/divider_color"
    custom:dividerPaddingLeft="@dimen/divider_padding"
    custom:dividerPaddingRight="@dimen/divider_padding" />

具體自定義View的細節(jié)不做詳細記錄，這里只記錄一下在canvas上畫線的重點代碼

@Override
protected void onDraw(Canvas canvas){
    Paint paint = new Paint();
    // canvas的寬度和高度
    int lineWidth = getWidth();
    int lineHeight = getHeight();
    // 設(shè)置線的粗細為canvas的高度
    paint.setStrokeWidth(lineHeight);  
    // 畫左端的白線，假設(shè)兩端留白長度是30
    paint.setColor(Color.WHITE); 
    canvas.drawLine(0, lineHeight/2, 30, lineHeight/2, paint);
    // 畫中間的分割線
    paint.setColor(Color.BLACK); 
    canvas.drawLine(30, lineHeight/2, lineWidth-30, lineHeight/2, paint);
    // 畫右端的白線，假設(shè)兩端留白長度是30
    paint.setColor(Color.WHITE); 
    canvas.drawLine(lineWidth-30, lineHeight/2, lineWidth, lineHeight/2, paint);
}

上面代碼的關(guān)鍵是
1、畫線方法：drawLine方法的前四個參數(shù)組成了兩組坐標，參數(shù)和坐標的關(guān)系如下圖：

2、上面的代碼中的startY和stopY都是lineHeight/2，這代表了兩層含義
（1）畫的是一條水平的線
（2）分割線的寬度，是從中間往上下兩側(cè)擴散的
所以設(shè)置startY、stopY為lineHeight/2之后，這條線就處于canvas的垂直中間位置，如果再設(shè)置線寬度為canvas的高度，那么這個時候line的高度就正好占滿了canvas的高度