完美解决GridView的item重叠问题

来源:互联网 发布:单片机vs1003做mp3 编辑:程序博客网 时间:2024/05/20 08:41

完美解决GridView的item重叠问题

作者:周文豪

前言,在项目开发中,使用了GridView来做两列显示的需求,item是textview,但是内容未知,可长可短。于是乎,遇到了一个bug,如下图:

图1

我们可以看到每行的底部和下一行的顶部有重叠。不说废话,先看最初的代码截图:如图:item的代码截图:

图2

如图:activity的xml截图:
图3

如图:MainActivity的截图:
图4

如图:adapter的截图:
图5

=================华丽丽的分割线===============================

得到的结果就是图1所示。那么这是为什么呢?
经过log可以看到:

图6

第0个item的getview执行了两次,第0次GridView的高度为0,表示还未计算出GridView的高度,第1次就得到了GridView的高度,而且高度就不再变化了。由此我们推断GridView的高度是由第0项的高度*行数而得。
再看绘制之后的子项高度:

图7

次数和getview的调用次数一致。而且,我发现762 = 254*3。由此可以确认GridView的高度确实是由第0项的高度*行数而得。

=================华丽丽的分割线===============================

但是,为什么GridView这么高,但是子项重叠了还剩余了这么大的一块空的空间呢?
继续看子项高度log,我们发现,子项的高度是由这一排的最后一个的高度决定的,当这一排最后一个高度小于前面的高度,就会出现显示不完会遮挡下面的情况。

拍黑板,划重点,考点来了啊。我们可以知道GridView有两个高度:
1:控件高度由第0项的高度*行数而得;
2:每一行的高度由该行最后一项的高度而得;
当控件高度低于所有行高和就会产生滑动。《如果需要滑动,请不要修改GridView的高度》

=================华丽丽的分割线===============================

那么,我们要怎么改呢?
问题我们已经找到了,我们先来改第二个点:
既然他是取的该行最后一项的高度,那么我们能不能改成取该行文字最长即高度最高的高度作为该行的高度呢?答案是可以的。
请看代码:

图8

我们来一部分一部分的看。第一部分代码用于获取子项控件的宽度,
API小于16的需要手动计算子项的宽度,我们需要控件宽度减掉列间距减掉padding值除以列数再减去子项的margin值。
如下:
图9

当中API小于16的用到了反射机制,请看如下代码:

图10

我们再来看第二部分代码:代码关键就是手动计算出子项高度。具体请看注释。
如下:
图11

我们再来看第三部分代码:将每一行的最高的高度记录下来,然后对该行的每一个手动设置高度。
如下:

图12

效果如图:
图13
至此,我们已经解决了重叠问题。

=================华丽丽的分割线===============================

我们来改第一个问题:1:控件高度由第0项的高度*行数而得;
我们可以如下思考,将每一行的最高高度加到一起就是控件的高度。
这样子就简单了,请看代码:

图14

再来看效果图:

图15

至此:完美解决。
完结撒花撒花!!!

代码传送门:github项目

阅读全文
1 0
原创粉丝点击