自定义瓷砖效果的GridView

有时候需要给gridview加上分割线，没有现成的解决方案，这里写好一个可以直接用的自定义gridview，就叫做LineGridView吧。先上图，zaker客户端第三方分享的gridview样式：

可以看到靠边的格子都是半封闭的，要实现这种效果仅仅靠美工给图片恐怕不行。反编译zaker的代码，虽然看不到整个代码，但是从中可以摸索出zaker是重写了gridview的dispatchDraw实现的，知道了思路下面我就写出了自己的实现方式。

我们都知道view有一个onDraw()方法,但是和dispatchDraw()有什么区别呢?

绘制VIew本身的内容，通过调用View.onDraw(canvas)函数实现
绘制自己的孩子通过dispatchDraw（canvas）实现
View组件的绘制会调用draw(Canvas canvas)方法，draw过程中主要是先画Drawable背景，对 drawable调用setBounds()然后是draw(Canvas c)方法.有点注意的是背景drawable的实际大小会影响view组件的大小，drawable的实际大小通过getIntrinsicWidth()和getIntrinsicHeight()获取，当背景比较大时view组件大小等于背景drawable的大小
画完背景后，draw过程会调用onDraw(Canvas canvas)方法，然后就是dispatchDraw(Canvas canvas)方法, dispatchDraw()主要是分发给子组件进行绘制，我们通常定制组件的时候重写的是onDraw()方法。值得注意的是ViewGroup容器组件的绘制，当它没有背景时直接调用的是dispatchDraw()方法, 而绕过了draw()方法，当它有背景的时候就调用draw()方法，而draw()方法里包含了dispatchDraw()方法的调用。因此要在ViewGroup上绘制东西的时候往往重写的是dispatchDraw()方法而不是onDraw()方法，或者自定制一个Drawable，重写它的draw(Canvas c)和 getIntrinsicWidth(),
getIntrinsicHeight()方法，然后设为背景。

知道了这些,下面我们就上代码吧

package com.fanday.mobilesafe.view;

import com.fanday.mobilesafe.R;

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

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<column){
            	if(i==column-1){
            		canvas.drawLine(cellView.getLeft(), cellView.getBottom(), cellView.getRight(), cellView.getBottom(), localPaint);
                	canvas.drawLine(cellView.getLeft(), cellView.getTop(), cellView.getRight(), cellView.getTop(), localPaint);
                	continue;
            	}
            	canvas.drawLine(cellView.getLeft(), cellView.getBottom(), cellView.getRight(), cellView.getBottom(), localPaint);
            	canvas.drawLine(cellView.getLeft(), cellView.getTop(), cellView.getRight(), cellView.getTop(), localPaint);
            	canvas.drawLine(cellView.getRight(), cellView.getTop(), cellView.getRight(), cellView.getBottom(), localPaint);
            	}
            else{
            	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);
                }
            }
            
        }
    }
}

这样我们就实现了这种效果了,另外gridView点击时的默认效果是不是有点丑,怎么改呢

只需要给它的条目设置一个selector,点击时更改一下背景颜色就ok了

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<!-- 点击时调用 -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <gradient android:angle="270" android:endColor="#f00" android:startColor="#00f" />
        </shape>
    </item>
    <!-- 获取焦点时调用 -->
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <!-- 给背景颜色设置一个渐变 -->
            <gradient android:angle="270.0" android:endColor="#f00" android:startColor="#00f" />

        </shape>
    </item>
    <!-- 默认状态 -->
    <item>
        <shape android:shape="rectangle">
            <!-- 描边,描出边缘的线条 -->
            <!-- <stroke android:width="1.0px" android:color="@color/line" /> -->
        </shape>
   </item>
</selector>

把这个selector设置条目的背景就可以了