自定义瓷砖效果的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设置条目的背景就可以了
- 自定义瓷砖效果的GridView
- Android自定义控件StaggeredGridView-瀑布流效果的GridView
- Android自定义控件StaggeredGridView-瀑布流效果的GridView
- GridView的边框效果
- Windows Phone的瓷砖
- 自定义Gridview的表头
- 自定义可拖拽的GridView
- 自定义gridview的问题
- Android——实现等格子的类似W8系统瓷砖效果的布局
- Android自定义控件继承ViewGrop实现一个GridView的显示效果
- 3.CCFadeOutTRTiles,部落格效果,跳动的方块特效,3D瓷砖晃动特效,破碎的3D瓷砖特效,瓷砖洗牌特效,分多行消失特效,分多列消失特效
- gridview+div的ToopTip效果
- gridview中onmouseover的效果
- Gridview中onmouseover的效果
- GridView模拟Gallery的效果
- 取消GridView 的点击效果
- ListView实现GridView的效果
- 自定义的GridView的使用
- Js中Dom对象,控制Html元素
- matlab中Signal Builder模块的用法总结
- Android中事件的分发机制
- 类和对象 三角形(2)
- 青春的记忆(原创纪实小说)
- 自定义瓷砖效果的GridView
- Django REST framework教程三: 基于类的视图
- ios 如何绘制一像素
- Android减少布局层次--有关Activity根视图DecorView的思考
- LeetCode 16. 3Sum Closest
- J2EE中applicationContext.xml路径
- LongWayToGo
- 【BZOJ4521】【CQOI2016】手机号码 数位DP
- 分享8年开发经验,浅谈java程序员职业规划