如何给GridView添加网格

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

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

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

如何给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)就得不到绘制的机会,结果就如下面这样:

如何给GridView添加网格

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

上一篇:java第二节 基本数据类型


下一篇:MapReduce数据连接