UICollectionView中Cell左右对齐、等间距

最近在开发软件的时候被要求,要让UICollectionView上面的cell之间的距离固定,但是cell的宽度不一定,所以一行有几个cell其实不固定,跟cell中的label的text有关,剩下的空白格平均分配的. 效果如下:

首先控制cell间的间距固定,左边对齐(这部分,我主要参照文章UICollectionView中Cell左对齐 居中 右对齐 等间距)

EqualSpaceFlowLayoutEvolve继承UICollectionViewFlowLayout。 .m文件的代码如下:

-(instancetype)init{     
        if(self = [super init]){
            self.scrollDirection = UICollectionViewScrollDirectionVertical;  
            self.minimumLineSpacing =5;
            self.minimumInteritemSpacing =5;
            self.sectionInset = UIEdgeInsetsMake(0,0,0,0);
            _betweenOfCell = 5.0;
            _cellType = AlignWithLeft;    
      }     
    return self;
} 

-(void)setBetweenOfCell:(CGFloat)betweenOfCell{
     _betweenOfCell = betweenOfCell;     
     self.minimumInteritemSpacing = betweenOfCell; 
} 

-(instancetype)initWthType:(AlignType)cellType{    
       if(self = [super init]){
            self.scrollDirection = UICollectionViewScrollDirectionVertical;         
            self.minimumLineSpacing =5;
            self.minimumInteritemSpacing =5;
            self.sectionInset = UIEdgeInsetsMake(0,0,0,0);
            _betweenOfCell =5.0;        
           _cellType = cellType;
     } 
    return self;
}  

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {    
      NSArray *layoutAttributes_t = [super layoutAttributesForElementsInRect:rect];
      NSArray *layoutAttributes = [[NSArray alloc] initWithArray:layoutAttributes_t copyItems:YES]; 
      //用来临时存放一行的Cell数组
      NSMutableArray *layoutAttributesTemp = [[NSMutableArray alloc] init]; 

      for(NSUInteger index =0; index < layoutAttributes.count ; index++) {

           UICollectionViewLayoutAttributes *currentAttr = layoutAttributes[index];// 当前cell的位置信息   
           UICollectionViewLayoutAttributes *previousAttr = index ==0? nil : layoutAttributes[index-1];// 上一个cell 的位置信    
           UICollectionViewLayoutAttributes *nextAttr = index +1== layoutAttributes.count ?    nil : layoutAttributes[index+1];//下一个cell 位置信息   
 
           //加入临时数组   
           [layoutAttributesTemp addObject:currentAttr];     
           _sumWidth += currentAttr.frame.size.width;    
           CGFloat previousY = previousAttr == nil ? 0: CGRectGetMaxY(previousAttr.frame);
           CGFloat currentY = CGRectGetMaxY(currentAttr.frame);    
           CGFloat nextY = nextAttr == nil ?0: CGRectGetMaxY(nextAttr.frame);

           //如果当前cell是单独一行    
           if(currentY != previousY && currentY != nextY){
                 if([currentAttr.representedElementKind isEqualToString:UICollectionElementKindSectionHeader]) {
                       [layoutAttributesTemp removeAllObjects];            
                       _sumWidth =0.0;
                 }else if([currentAttr.representedElementKind isEqualToString:UICollectionElementKindSectionFooter]){
                       [layoutAttributesTemp removeAllObjects];             
                       _sumWidth =0.0;
                 }else{
                       [self setCellFrameWith:layoutAttributesTemp];         
                 }        
            }     
//如果下一个cell在本行,这开始调整Frame位置        
           else if( currentY != nextY) {
                 [self setCellFrameWith:layoutAttributesTemp];     
            }     
      }     
    return layoutAttributes;
} 

-(void)setCellFrameWith:(NSMutableArray*)layoutAttributes{
    CGFloat nowWidth =0.0;
    switch(_cellType) {
         case AlignWithLeft: {
               nowWidth = self.sectionInset.left;         
               for(UICollectionViewLayoutAttributes * attributesinlayoutAttributes) {
                    CGRect nowFrame = attributes.frame;            
                    nowFrame.origin.x = nowWidth;             
                    attributes.frame = nowFrame;            
                    nowWidth += nowFrame.size.width + self.betweenOfCell;         
                }        
                _sumWidth =0.0;
                [layoutAttributes removeAllObjects];   
        } 
              break;
         case AlignWithCenter: {
               nowWidth = (self.collectionView.frame.size.width - _sumWidth - ((layoutAttributes.count -1) * _betweenOfCell)) /2;
               for(UICollectionViewLayoutAttributes * attributesinlayoutAttributes) {
                     CGRect nowFrame = attributes.frame;             
                     nowFrame.origin.x = nowWidth;             
                     attributes.frame = nowFrame;            
                     nowWidth += nowFrame.size.width + self.betweenOfCell;        
                }        
                _sumWidth =0.0;
                [layoutAttributes removeAllObjects];        
        } 
               break;
         case AlignWithRight: {
               nowWidth = self.collectionView.frame.size.width - self.sectionInset.right;         
               for(NSInteger index = layoutAttributes.count -1; index >=0; index-- ) {
                    UICollectionViewLayoutAttributes * attributes = layoutAttributes[index];            
                    CGRect nowFrame = attributes.frame;             
                    nowFrame.origin.x = nowWidth - nowFrame.size.width;             
                    attributes.frame = nowFrame;             
                    nowWidth = nowWidth - nowFrame.size.width - _betweenOfCell;             
                    if(index ==0) {
                         CGRect nowFrame = attributes.frame;                
                         nowFrame.origin.x = nowWidth;                
                         attributes.frame = nowFrame;             
                     }        
                 }        
                 _sumWidth =0.0;
                 [layoutAttributes removeAllObjects];   
          } 
                break;
     } 
}

然后在创建collectionView的地方写下如下代码:

EqualSpaceFlowLayoutEvolve *flowLayout = [[EqualSpaceFlowLayoutEvolve alloc]    initWthType:AlignWithLeft]; 
flowLayout.betweenOfCell =15;
flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical; 
flowLayout.sectionInset = UIEdgeInsetsMake(0,0,0,0);
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0,0,100,100) collectionViewLayout:flowLayout];

就这样就可以控制cell的间距固定,左边对齐了

cell右边对齐
首先一个数组存cell上label的text,然后调用一下方法:

- (void)calculateItemWidthsWith:(NSArray *)array{
       _itemWidths = [NSMutableArray array];    
      CGFloat maxWidth = self.view.frame.size.width -40;
      CGFloat sumWidth =0;
      int count =0;
      for(inti =0; i < array.count; i++) {
          CGFloat itemWidth = [array[i] boundingRectWithSize:CGSizeMake(maxWidth,33) options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading | NSStringDrawingTruncatesLastVisibleLine attributes:@{NSFontAttributeName: [UIFont systemFontOfSize:15]} context:nil].size.width +45;
          itemWidth = itemWidth > maxWidth ? maxWidth : itemWidth;     
          sumWidth += itemWidth;     
          count +=1;
          if(sumWidth > maxWidth && i !=0) {
              // XXX: 在iPhone5下,得减去一点点数值(0.00001),cell排序才不会乱           
              CGFloat subWidth = maxWidth - (sumWidth - itemWidth) -0.00001;
              CGFloat space = subWidth/(count -1);
              for(inth =1; h < count; h++) {
                   self.itemWidths[i-h] = [NSString stringWithFormat:@"%f", [_itemWidths[i-h] floatValue] + space];
              }        
              sumWidth = itemWidth;        
              count =1;
          }     
          [_itemWidths addObject:[NSString stringWithFormat:@"%f", itemWidth]];
      } 
}

最后调用一下方法即可

#pragma mark -  
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {     
    return CGSizeMake([self.itemWidths[indexPath.row] floatValue] -15,33);
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容