【Android进阶】如何给gridview的单元格加上分割线

原文地址：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2013/1227/1582.html

有时候需要给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的源码了。

PS：实际使用过程中发现最下面也有线，我的布局是三列，所以下面做了一些修改，下面的不是通用做法，其他更好的方法我没想到~~~~(>_<)~~~~

布局文件：

<com.example.views.LineScrollGridView
                        android:id="@+id/gridview_create"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:padding="8dp"
                        android:numColumns="3" >
	
                    </com.example.views.LineScrollGridView>

我的LineScrollGridV

package com.example.views;

import com.dream.makerspace.R;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.GridView;

public class LineScrollGridView extends GridView {

	public LineScrollGridView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}

	public LineScrollGridView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
	
	public LineScrollGridView(Context context, AttributeSet attrs, int defStyle) {   
        super(context, attrs, defStyle);   
    }

	/**
	 * 设置不滚动
	 */
	public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
				MeasureSpec.AT_MOST);
		super.onMeasure(widthMeasureSpec, expandSpec);

	}
	/**
	 * 重绘分割线
	 */
	
	@Override
	protected void dispatchDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		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){         	
            	if (i != childCount -1){
            		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);
                if (i != childCount -2 && i != childCount -3){
                	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);
            }
        }
    }
	

}