如何给gridview的单元格加上分割线

原文链接:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2013/1227/1582.html

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

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

代码不多,只需重载一个方法dispatchDraw即可:

  1. public class LineGridView extends GridView{
  2. public LineGridView(Context context) {
  3. super(context);
  4. // TODO Auto-generated constructor stub
  5. }
  6. public LineGridView(Context context, AttributeSet attrs) {
  7. super(context, attrs);
  8. }
  9. public LineGridView(Context context, AttributeSet attrs, int defStyle) {
  10. super(context, attrs, defStyle);
  11. }
  12. @Override
  13. protected void dispatchDraw(Canvas canvas){
  14. super.dispatchDraw(canvas);
  15. View localView1 = getChildAt(0);
  16. int column = getWidth() / localView1.getWidth();
  17. int childCount = getChildCount();
  18. Paint localPaint;
  19. localPaint = new Paint();
  20. localPaint.setStyle(Paint.Style.STROKE);
  21. localPaint.setColor(getContext().getResources().getColor(R.color.grid_line));
  22. for(int i = 0;i < childCount;i++){
  23. View cellView = getChildAt(i);
  24. if((i + 1) % column == 0){
  25. canvas.drawLine(cellView.getLeft(), cellView.getBottom(), cellView.getRight(), cellView.getBottom(), localPaint);
  26. }else if((i + 1) > (childCount - (childCount % column))){
  27. canvas.drawLine(cellView.getRight(), cellView.getTop(), cellView.getRight(), cellView.getBottom(), localPaint);
  28. }else{
  29. canvas.drawLine(cellView.getRight(), cellView.getTop(), cellView.getRight(), cellView.getBottom(), localPaint);
  30. canvas.drawLine(cellView.getLeft(), cellView.getBottom(), cellView.getRight(), cellView.getBottom(), localPaint);
  31. }
  32. }
  33. if(childCount % column != 0){
  34. for(int j = 0 ;j < (column-childCount % column) ; j++){
  35. View lastView = getChildAt(childCount - 1);
  36. canvas.drawLine(lastView.getRight() + lastView.getWidth() * j, lastView.getTop(), lastView.getRight() + lastView.getWidth()* j, lastView.getBottom(), localPaint);
  37. }
  38. }
  39. }
  40. }

dispatchDraw方法中,我们对每一个子view的边界按照一定的方式绘上了边框,一般一个格子只需绘制其中两条边,需要注意的是最边上的格子需要特殊处理。super.dispatchDraw(canvas);一定要调用,不然格子中的内容(子view)就得不到绘制的机会,结果就如下面这样:

仔细看代码你会发现这个实现方式是很好的,但是代码并不完美,因为每条线的绘制我们都是以第一个子view 的宽高为基准的,如果某个格子的高度和第一个格子不一致,那么可能出现错位。如果你能确保每个格子大小均匀,直接拿来用,否则还需要些修改。这里是重写的dispatchDraw,其实我我们重写onDraw方法也可以得到相同的结果。要完全弄明白的话,就得看看FrameWork中GridView的源码了。

如何给GridView添加网格的更多相关文章

  1. Android GridView 添加 网格线解决办法

    在使用 GridView 网格布局时,默认情况下 GridView  是没有网格线的,但是有些时候我们需要让GridView显示分割线,怎么办呢?查了不少资料,找到了一种为GridView添加网格线的 ...

  2. RCP:给GEF编辑器添加网格和标尺。

    网格和标尺效果如上图所示. 添加网格比较简单,也可以自己实现,主要思路是为编辑器添加一个GridLayer.但是还是建议参考eclipse自己的GEF样例来实现. 需要注意两个部分: 1.重写org. ...

  3. ASP.NET 为GridView添加序号列,且支持分页连续累计显示

    为GridView添加序号列,且支持分页连续累计显示,废话不多说,直接上代码: <%@ Page Language="C#" AutoEventWireup="tr ...

  4. gridview添加header

    gridview是不能添加header的,这里的解决方法是将listview改造成gridview使用,功能很好用,唯一的缺点是列数不能自适应 示例代码下载地址http://pan.baidu.com ...

  5. C++、GDAL创建shapefile,并向矢量文件中添加网格

    //总体来说这个过程就是构建数据源->构建层->构建要素->构建形状->关闭数据源. //要包含的GDAL头文件 #include <gdal_priv.h> #i ...

  6. Flutter利用GridView实现网格的商品布局

    GridView.count 生成的是静态网格 效果: 代码: import 'package:flutter/material.dart'; void main() { runApp(MyApp() ...

  7. Android——GridView(网格视图)相关知识总结贴

    Android API中文文档GridView http://www.apkbus.com/android-14131-1-1.html   Android API 中文 (15) —— GridVi ...

  8. asp.net 中给gridview添加自动序号

    第一种方式,直接在Aspx页面GridView模板列中.这种的缺点是到第二页分页时又重新开始了. 代码如下: <asp:TemplateField HeaderText="序号&quo ...

  9. GridView添加事件监听和常用属性解析

    1. 使用流程 graph LR 准备数据源-->新建适配器 新建适配器-->绑定数据源 绑定数据源-->加载适配器 2. 常用属性 android:columnWidth:每一列的 ...

随机推荐

  1. 8. UIViewController

    1. UIViewController 的认识 UIViewController在iOS开发中占据很重要的位置,iOS的整个UI开发的核心思想也是MVC的架构,从UIViewController的命名 ...

  2. mysqlDBA(1-3年)

    1.熟悉Aliyun操作系统的管理.配置和系统调优: 2.熟悉mysql管理 3.熟悉mysql主从复制,主主复制 4.熟悉数据库的备份策略,监控策略,性能测量策略 5.熟悉linux/unix操作系 ...

  3. js 数组删去重复的加上没有的元素

    为了一个数组的删除操作竟然费了一个多小时,下面分享一下我的代码: 代码功能:判断数组里是否有我要看的元素,如果没有就添加到数组里,如果有就去掉. var selectArr=[]; function ...

  4. 【笔记】js操作cookie

    $.cookie('the_cookie'); // 读取 cookie            $.cookie('the_cookie', 'the_value', { expires: 7 }); ...

  5. 【转载】mysql慢查询

    mysql> show variables like 'long%'; 注:这个long_query_time是用来定义慢于多少秒的才算“慢查询” +-----------------+---- ...

  6. QuartZ2D __ 简单用法 1

    一. 简单做一个画板 1. 建立一个UIView类 2. 在.m里建立一个延展 3. 分别定义一个起点, 一个终点的结构体属性 . 在建立一个存储路径的数组 @interface DrawView ( ...

  7. ****LINUX命令(含GIT命令)个人总结

    参考文章: 每日一个linux命令 http://www.cnblogs.com/peida/tag/%E6%AF%8F%E6%97%A5%E4%B8%80linux%E5%91%BD%E4%BB%A ...

  8. Office文档在线预览

    工具说明:通过传入文档的Web地址,即可进行Office文档的在线预览. 使用方式: 在http://office.qingshanboke.com地址后,通过url参数传入您想预览的文件路径. 如: ...

  9. fatal error LNK1169: 找到一个或多个多重定义的符号

    申明全局变量,全局函数一定要在cpp中申明,其他类引用该全局变量就include该cpp的h文件,然后extern一下就好了.否则容易出现该重复定义错误. 这个"容易"是如何解释的 ...

  10. CozyRSS开发记录-中断

    接下来会对CozyRSS做一堆的修改,包括界面和功能.因为比较杂乱,而且大多是体力活,所以就不记录了.等下次再发的时候,见到的就是一个有可用性的CozyRSS了!