美文网首页
解决Collection 间隙问题

解决Collection 间隙问题

作者: JohnXych | 来源:发表于2020-02-11 10:47 被阅读0次

UICollectionView解决item之间的间隙问题

在项目中需要使用网格组件来显示列表信息,因此封装了一个iOS的网格组件GridView,demo地址: GitHub

在实现过程中发现一个问题,在iPhone8中,UICollectionView 展示的item之间总有间隙,即使设置了item等宽,也设置了UICollectionViewFlowLayout 的 minimumInteritemSpacing 为 0,都不管用,于是Google一番,发现问题普遍存在,做了以下问题说明和解决办法

参考文章:UICollectionView 缝隙修复

简要说明问题产生原因:

1、iPhone中屏幕的 逻辑像素(pt)和 物理像素(px)的对应关系,在iPhone6s plus(包含)之后都是一个pt对应3个px,iPhone4 ~iPhone6s都是一个pt对应3个px,从 [[UIScreen mainScrenn] scale] 可以得出对应比例。

2、举例说明:当在iPhone8中 UICollectionView 显示4个等宽的item时,item的 width 为 375.0/4 = 93.75 (375为iPhone8 逻辑像素宽度), 按照1个pt由3个px来渲染的逻辑,最后的 0.75 只有 0.66 的部分由2个px渲染,剩下的 0.09没法渲染,因此产生了临近的 1px空白间隙。

解决问题:

解决方式与参考文章的做法不同,这里是主动规避。

既然有1px空白间隙,那就避免产生这个间隙,在计算 itemSize 的时候,假设item等宽为 width,item 的个数为 num,除了第一个item,其他item的宽度都取值 floor(width) ,然后第一个item 宽度为 CGRectGetWidth(collectionView.bounds) - floor(width) * num ; 这样就可以避免出现带小数宽度,从而没了那个1px空白。

贴一下计算代码:

在方法

-(CGSize)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout )collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath 中写入:

NSInteger num = 4;

CGFloat width = CGRectGetWidth(collectionView.bounds)/num;

CGFloat height = 100.0;

if(indexPath.row == 0){

    //第一列的width比其他列稍大一些,消除item之间的间隙

    CGFloat realWidth = CGRectGetWidth(collectionView.bounds) - floor(width) * (num - 1);

    return CGSizeMake(realWidth, height);

}else{

    return CGSizeMake(floor(width), height);

}

原文链接:https://blog.csdn.net/ayuapp/article/details/80360745

相关文章

  • 解决Collection 间隙问题

    UICollectionView解决item之间的间隙问题 在项目中需要使用网格组件来显示列表信息,因此封装了一个...

  • 解决图片底部间隙问题

    如图所示 当容器不设置宽高时, 加入 img 标签后会自动撑开那么问题来了, 为什么图片底部为什么会有一点间隙而不...

  • MySQL 间隙锁

    间隙锁 间隙锁在MySQL中解决了幻读问题,在MySQL中通过RR也能解决幻读。 但是使用间隙锁时有两个坑需要注意...

  • 行内元素间隙问题的解决方式

    行内元素间隙问题的解决方式 方法一: 此方法可解决图片上下间距问题 如上图所示 方法二 此方法也是解决图片上下间距...

  • [1] Collection View 自定义布局

    问题描述: Collection View 的cell 根据内容调整高度(或宽度),实现瀑布流布局。 解决方案: ...

  • flex布局换行后间隙问题

    问题描述今天遇到flex布局换行后产生间隙的问题,本来预期得到以下结果 得到如下结果: 解决方法其实解决方法很简单...

  • img间隙问题

    如果是行内元素问题,将img设置为block; 如果是对齐方式是和父级vertical-align:baselin...

  • 2019-06-10

    解决UITableView的group类型听不或者section留有间隙的问题: 不加这些代码前:

  • 解决行内元素存在间隙的bug问题

    行内元素之间会产生间隙bug问题的场景: 1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。 如下...

  • 多个img出现间隙问题

    解决方法一:去掉每个img之间的间隙,这个间隙是指代码间隙 解决方法二:给父节点上增加font-size:0

网友评论

      本文标题:解决Collection 间隙问题

      本文链接:https://www.haomeiwen.com/subject/elwtfhtx.html