自定义瓷砖效果的GridView

来源:互联网 发布:1050ti 知乎 编辑:程序博客网 时间:2024/03/28 18:07

有时候需要给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设置条目的背景就可以了

0 0