美文网首页iOS技术帖
解决 UICollectionViewCell 之间不应有的分割

解决 UICollectionViewCell 之间不应有的分割

作者: 何以_aaa | 来源:发表于2016-11-15 17:52 被阅读2284次

    1.出现问题:

    项目中UICollectionViewCell的宽度为 屏幕宽度 / 7,且最小间距已设置为0 , 但是展示的cell间总有莫名其妙的分割线 , 如下图:

    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    CGFloat itemWidth = self.frame.size.width / 7;
    layout.itemSize = CGSizeMake(itemWidth, itemWidth);
    layout.minimumInteritemSpacing = 0;```
    
    
    ![有分割线的cell.jpeg](http:https://img.haomeiwen.com/i2890959/ba8d6bd6a083a187.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    ##2.测试原因:
    创建新类 FYCalendarCellFlowLayout 继承 UICollectionViewFlowLayout,重写下面方法,打印每个cell的frame,结果如下:
    >该方法官方解释:返回所有布局属性
    return an array layout attributes instances for all the views in the given rect
    
    
    • (NSArray)layoutAttributesForElementsInRect:(CGRect)rect
      {
      NSMutableArray
      attributes = [[super layoutAttributesForElementsInRect:rect] mutableCopy];

      for (UICollectionViewLayoutAttributes *attr in attributes) {
      NSLog(@"%@", NSStringFromCGRect([attr frame]));
      }
      return attributes;
      }```
      此时我用的iPhone5s的模拟器,宽320,每个cell的宽度约等于45.7(并未除尽),而2个cell的x轴的间距却不完全等于这个数,也就是会有间距。

    {{0, 0}, {45.714285714285715, 45.714285714285715}}
    {{45.5, 0}, {45.714285714285715, 45.714285714285715}}
    {{91.5, 0}, {45.714285714285715, 45.714285714285715}}
    {{137, 0}, {45.714285714285715, 45.714285714285715}}
    {{183, 0}, {45.714285714285715, 45.714285714285715}}
    {{228.5, 0}, {45.714285714285715, 45.714285714285715}}
    {{274.5, 0}, {45.714285714285715, 45.714285714285715}}
    {{0, 45.5}, {45.714285714285715, 45.714285714285715}}
    {{45.5, 45.5}, {45.714285714285715, 45.714285714285715}}
    {{91.5, 45.5}, {45.714285714285715, 45.714285714285715}}
    ......

    3.解决办法:

    依旧是重写上述方法,添加如下代码, 最后使用FYCalendarCellFlowLayout创建UICollectionView,再次运行,解决问题。

    - (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
    {
        NSMutableArray* attributes = [[super layoutAttributesForElementsInRect:rect] mutableCopy];
        
        //从第2个循环到最后一个
        for(int i = 1; i < [attributes count]; ++i) {
            //当前attributes
            UICollectionViewLayoutAttributes *currentLayoutAttributes = attributes[i];
            //上一个attributes
            UICollectionViewLayoutAttributes *prevLayoutAttributes = attributes[i - 1];
            //设置最大间距,可根据需要改
            NSInteger maximumSpacing = 0;
            //前一个cell的最右边
            NSInteger origin = CGRectGetMaxX(prevLayoutAttributes.frame);
            //如果当前一个cell的最右边加上我们想要的间距加上当前cell的宽度依然在contentSize中,我们改变当前cell的原点位置
            //不加这个判断的后果是,UICollectionView只显示一行,原因是下面所有cell的x值都被加到第一行最后一个元素的后面了
            if(origin + maximumSpacing + currentLayoutAttributes.frame.size.width < self.collectionViewContentSize.width) {
                CGRect frame = currentLayoutAttributes.frame;
                frame.origin.x = origin + maximumSpacing;
                currentLayoutAttributes.frame = frame;
            }
        }
        
        return attributes;
    }```
    
    
    ![无分割线的cell.jpeg](http:https://img.haomeiwen.com/i2890959/d11b94e11c282fd5.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    此时,因为是用的前一个cell的最大X值加上0作为下一个cell的X值,而最开始的X值已经有误差了,最后累加的无车形成明显的空隙,因此改为用 **每个cell的宽* 列索引** 作为X值;
    
    • (NSArray)layoutAttributesForElementsInRect:(CGRect)rect
      {
      NSMutableArray
      attributes = [[super layoutAttributesForElementsInRect:rect] mutableCopy];

      //从第2个循环到最后一个
      for(int i = 1; i < [attributes count]; ++i) {

        UICollectionViewLayoutAttributes *currentLayoutAttributes = attributes[i];
        
        UICollectionViewLayoutAttributes *prevLayoutAttributes = attributes[i - 1];
        //设置最大间距,可根据需要改
        NSInteger maximumSpacing = 0;
        
        NSInteger maxX = CGRectGetMaxX(prevLayoutAttributes.frame);
      
        int col_idx = i % 7;
        float W = SCREEN_WIDTH/7;
        //如果当前一个cell的最右边加上我们想要的间距加上当前cell的宽度依然在contentSize中,我们改变当前cell的原点位置
        //不加这个判断的后果是,UICollectionView只显示一行,原因是下面所有cell的x值都被加到第一行最后一个元素的后面了
        if(maxX + maximumSpacing + currentLayoutAttributes.frame.size.width < self.collectionViewContentSize.width) {
            CGRect frame = currentLayoutAttributes.frame;
            frame.origin.x = col_idx * W;
            currentLayoutAttributes.frame = frame;
        }
      

      }

      return attributes;
      }```

    无分割线无空隙的cell.jpeg

    相关文章

      网友评论

      • 第六梦:使用之后中间的线没了,出现在最右边了。。。。
        第六梦:OK,是的,解决了,最后一段代码
        何以_aaa:没理解的你的问题,难道不是文章最后一部分代码解决的问题吗
      • 青春flame:[[super layoutAttributesForElementsInRect:rect] 现在显示UIView没有声明此方法
        何以_aaa:这是 UICollectionViewFlowLayout 类的方法,不是UIView的,自定义FlowLayout类继承UICollectionViewFlowLayout,然后创建collectionView时应用FlowLayout

      本文标题:解决 UICollectionViewCell 之间不应有的分割

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