如何給gridview的單元格加上分割線

有時候需要給gridview加上分割線，沒有現成的解決方案，這里寫好一個可以直接用的自定義gridview，就叫做LineGridView吧。先上圖，zaker客戶端第三方分享的gridview樣式：

可以看到靠邊的格子都是半封閉的，要實現這種效果僅僅靠美工給圖片恐怕不行。反編譯zaker的代碼，雖然看不到整個代碼，但是從中可以摸索出zaker是重寫了gridview的dispatchDraw實現的，知道了思路下面我就寫出了自己的實現方式。

代碼不多，只需重載一個方法dispatchDraw即可：

public class LineGridView extends GridView{
    public LineGridView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }
    public LineGridView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public LineGridView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
    @Override
    protected void dispatchDraw(Canvas canvas){
        super.dispatchDraw(canvas);
        View localView1 = getChildAt(0);
        int column = getWidth() / localView1.getWidth();
        int childCount = getChildCount();
        Paint localPaint;
        localPaint = new Paint();
        localPaint.setStyle(Paint.Style.STROKE);
        localPaint.setColor(getContext().getResources().getColor(R.color.grid_line));
        for(int i = 0;i < childCount;i++){
            View cellView = getChildAt(i);
            if((i + 1) % column == 0){
                canvas.drawLine(cellView.getLeft(), cellView.getBottom(), cellView.getRight(), cellView.getBottom(), localPaint);
            }else if((i + 1) > (childCount - (childCount % column))){
                canvas.drawLine(cellView.getRight(), cellView.getTop(), cellView.getRight(), cellView.getBottom(), localPaint);
            }else{
                canvas.drawLine(cellView.getRight(), cellView.getTop(), cellView.getRight(), cellView.getBottom(), localPaint);
                canvas.drawLine(cellView.getLeft(), cellView.getBottom(), cellView.getRight(), cellView.getBottom(), localPaint);
            }
        }
        if(childCount % column != 0){
            for(int j = 0 ;j < (column-childCount % column) ; j++){
                View lastView = getChildAt(childCount - 1);
                canvas.drawLine(lastView.getRight() + lastView.getWidth() * j, lastView.getTop(), lastView.getRight() + lastView.getWidth()* j, lastView.getBottom(), localPaint);
            }
        }
    }
}

在dispatchDraw方法中，我們對每一個子view的邊界按照一定的方式繪上了邊框，一般一個格子只需繪制其中兩條邊，需要注意的是最邊上的格子需要特殊處理。super.dispatchDraw(canvas);一定要調用，不然格子中的內容（子view）就得不到繪制的機會，結果就如下面這樣：

仔細看代碼你會發現這個實現方式是很好的，但是代碼并不完美，因為每條線的繪制我們都是以第一個子view 的寬高為基準的，如果某個格子的高度和第一個格子不一致，那么可能出現錯位。如果你能確保每個格子大小均勻，直接拿來用，否則還需要些修改。這里是重寫的dispatchDraw，其實我我們重寫onDraw方法也可以得到相同的結果。要完全弄明白的話，就得看看FrameWork中GridView的源碼了。