規(guī)則流水布局與不規(guī)則流水布局

規(guī)則流水布局

1.首先自定義布局繼承于流水布局.
在流水布局的基礎(chǔ)上進(jìn)行布局的重新設(shè)置
2.重寫布局中的方法, 讓每個(gè)Item根據(jù)自己想要尺寸進(jìn)行對(duì)應(yīng)設(shè)置.
3.設(shè)置contentSize,設(shè)置滾動(dòng)區(qū)域

// 1.對(duì)每一個(gè)Item進(jìn)行布局
- (nullable NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    
//    [self.layoutAtts removeAllObjects];

    // 如果只是在原基礎(chǔ)上進(jìn)行修改,則調(diào)用
//     NSArray *layoutAtts = [super layoutAttributesForElementsInRect:rect];
    
    // 返回 cell的個(gè)數(shù),進(jìn)行一個(gè)個(gè)重新布局
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    
    CGFloat W = self.collectionView.frame.size.width * 0.5;
    CGFloat H = 0;
    CGFloat Y = 0;
    CGFloat X = 0;
    
    for (int i = 0; i < count ; i ++) {
        
        NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
        
        UICollectionViewLayoutAttributes *layoutAtt = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
        
        if (i == 0) {
             H = W;
             X = 0;
             Y = 0;
        }else if (i == 1){
             H = W * 0.5;
             X = W;
             Y = 0;
        }else if (i == 2){
             H = W * 0.5;
             X = W;
             Y = W * 0.5;
        }else if (i == 3){
             H = W * 0.5;
             X = 0;
             Y = W;
        
        }else if (i == 4){
             H = W * 0.5;
             X = 0;
             Y = H *3;
        }else if (i == 5){
             H = W;
             Y = W;
             X = W;
        }else{
            
            // 取出 上一輪的 ,進(jìn)行改變,然后再 在 原來值的基礎(chǔ)上的Y值進(jìn)行修改,得到新的Y值,再進(jìn)行賦值賦值
            UICollectionViewLayoutAttributes *lastLayoutAtt = self.layoutAtts[i - 6];
            
            CGRect lastFrame = lastLayoutAtt.frame;
            
            H =  lastFrame.size.height;
            Y =  lastFrame.origin.y + 2 * W;
            X =  lastFrame.origin.x;
        }
        
        layoutAtt.frame = CGRectMake(X, Y, W, H);
        [self.layoutAtts addObject:layoutAtt];
    }

//        UICollectionViewLayoutAttributes *layoutAtt = (UICollectionViewLayoutAttributes *) self.layoutAtts.lastObject;
    
//    self.collectionView.contentSize = CGSizeMake( self.collectionView.frame.size.width,CGRectGetMaxY(layoutAtt.frame));
    

    return self.layoutAtts;
}
// 2.設(shè)置滾動(dòng)區(qū)域ContentSize
// 布局 必須寫到 get方法中,是屬于 系統(tǒng)自調(diào)的方法。
- (CGSize)collectionViewContentSize
{
//    NSLog(@"%zd",self.layoutAtts.count);
//     NSInteger rows = (self.layoutAtts.count + 2) / 3;
// 根據(jù)最后一個(gè)Itme來決定滾動(dòng)區(qū)域    
    UICollectionViewLayoutAttributes *layoutAtt = (UICollectionViewLayoutAttributes *) self.layoutAtts.lastObject;
//    return CGSizeMake( self.collectionView.frame.size.width,CGRectGetMaxY(layoutAtt.frame));

    
    if (layoutAtt.frame.origin.x == 0){

        return CGSizeMake( self.collectionView.frame.size.width,CGRectGetMaxY(layoutAtt.frame));

    }else{
        return CGSizeMake(self.collectionView.frame.size.width, (CGRectGetMaxY(layoutAtt.frame) + layoutAtt.size.height));
    
    }
    
    
//    CGFloat cellH = self.collectionView.frame.size.width * 0.5;
//    
//    return CGSizeMake(self.collectionView.frame.size.width, cellH * rows);
}

不規(guī)則布局


圖形實(shí)例, 除第一行以外,所有的Item都是現(xiàn)排在最短的一列中.
所以我們需要做的是:
1.自定義布局由于修改部分較多,所以不必繼承于流水布局,可以自己設(shè)置布局元素
2.重寫對(duì)每個(gè)Item的布局
2.1.建立數(shù)組用于保存每一列現(xiàn)有的高度
2.2. 求出最小的高度,最為下一個(gè)item的初始高度, 當(dāng)Item寫入,更新當(dāng)前列的高度.

  1. 計(jì)算滾動(dòng)區(qū)域,最長(zhǎng)列決定
//.h文件
@class LXLWaterFlowLayout;
// 設(shè)置代理
@protocol LXLWaterFlowLayoutDelegate<NSObject>
@required

- (CGFloat)waterFlowLayout:(LXLWaterFlowLayout *)waterFlowLayout indexPath:(NSIndexPath *)indexPath withWidth:(CGFloat)width;

@end
@interface LXLWaterFlowLayout : UICollectionViewLayout

// 提供方法,供外界調(diào)用
- (void)setHorzontalMargin:(CGFloat) horizontalMargin;
- (void)setVerticalMargin:(CGFloat) verticalMargin;
- (void)setMaxColumns:(NSInteger) maxColumns;
- (void)setInserts:(UIEdgeInsets) inserts;

// 設(shè)置代理,用于從外界拿到高度
@property(nonatomic,weak) id<LXLWaterFlowLayoutDelegate> delegate;

// .m文件

@interface LXLWaterFlowLayout ()
// 添加成員變量
{
    // 用來設(shè)置水平間距
    CGFloat _horizontalMargin ;
    // 用來設(shè)置豎直間距
    CGFloat _verticalMargin ;
    // 最大的列數(shù)
    NSInteger _maxColumns ;
    // 每個(gè)item的四邊劇
    UIEdgeInsets _insets;
    
}
// 加入相關(guān)屬性
// 保存每一列的高度
@property (strong, nonatomic) NSMutableArray *perColumnMaxHeights;
// 保存所有元素的相關(guān)屬性
@property (strong, nonatomic) NSMutableArray *layoutAtts;

@end

@implementation LXLWaterFlowLayout

- (instancetype)init
{
    if (self = [super init]) {
        
// 當(dāng)外界沒有數(shù)據(jù)則按初始化數(shù)據(jù)執(zhí)行
        _maxColumns = 3;
        _horizontalMargin = 10;
        _verticalMargin = 10;
        
        _insets = UIEdgeInsetsMake(0, 0, 0, 0);
    }

    return self;

}

- (NSMutableArray *)layoutAtts
{
    if (!_layoutAtts) {
        _layoutAtts = [NSMutableArray array];
    }

    return _layoutAtts;
}

- (NSMutableArray *)perColumnMaxHeights
{
    if (!_perColumnMaxHeights) {
        _perColumnMaxHeights = [NSMutableArray array];
        
    }
    
    return _perColumnMaxHeights;
    
}

// 因?yàn)樵?“l(fā)ayoutAttributesForElementsInRect”可能調(diào)用多次,計(jì)算多次, 而導(dǎo)致每次的隨機(jī)數(shù),都不一樣, 而造成覆蓋現(xiàn)象
// 所以在 預(yù)布局中處理, 可以只計(jì)算一次
- (void)prepareLayout
{
    [self.perColumnMaxHeights removeAllObjects];
    [self.layoutAtts removeAllObjects];
    
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    // 初始化數(shù)組高度,因?yàn)榈谝恍?不需要按照高度大小添加
    for (int i = 0; i < _maxColumns; i ++) {
        [self.perColumnMaxHeights addObject:@(_insets.top)];
    }
    
    CGFloat W = (self.collectionView.frame.size.width - _insets.left - _insets.right - (_maxColumns - 1) * _horizontalMargin ) / _maxColumns;
    
    
    CGFloat H ;
    
    CGFloat X,Y;
    
    for (int i = 0; i < count; i++) {
        
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        
        UICollectionViewLayoutAttributes *layoutAtt = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
        
        // 求出高度最小的列, 計(jì)算出 Y值
        Y = [self.perColumnMaxHeights[[self minColumn]] floatValue]+ _verticalMargin;
        // 計(jì)算出 X 值
        X = _insets.left +[self minColumn] * (W + _horizontalMargin) ;
        
        // 通過代理計(jì)算出 高度
        if ([self.delegate respondsToSelector:@selector(waterFlowLayout:indexPath:withWidth:)]) {
           
                H = [self.delegate waterFlowLayout:self indexPath:indexPath withWidth:W];
        }else{
        H = 70 + arc4random_uniform(100);
        }
        
        // 將新算出來的高度,替換 原來數(shù)組中對(duì)應(yīng)的最低高度位置
        [self.perColumnMaxHeights replaceObjectAtIndex:[self minColumn] withObject:@(Y + H)];
        
        layoutAtt.frame = CGRectMake(X, Y, W, H);
        
        [self.layoutAtts addObject:layoutAtt];
    }

}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
  
    return self.layoutAtts;
}

// 計(jì)算最小高度的列
- (NSInteger)minColumn
{
    NSInteger minColumn = 0;
    
    CGFloat minHeight = [self.perColumnMaxHeights[0] floatValue];
    
    for (int i = 1; i < self.perColumnMaxHeights.count; i ++) {
        
        CGFloat height = [self.perColumnMaxHeights[i] floatValue];
        if (height < minHeight) {
            minHeight = height;
            minColumn = i;
        }
    }
    
    return minColumn;
}

// 計(jì)算最大高度的列 ,(用在設(shè)置 contensize)
- (NSInteger)maxColumn
{
    NSInteger maxColumn = 0;
    
    CGFloat maxHeight = [self.perColumnMaxHeights[0] floatValue];
    
    for (int i = 1; i < self.perColumnMaxHeights.count; i ++) {
        
        CGFloat height = [self.perColumnMaxHeights[i] floatValue];
        if (height > maxHeight) {
            maxHeight = height;
            maxColumn = i;
        }
    }
    
    return maxColumn;
}


- (CGSize)collectionViewContentSize
{


    if (self.perColumnMaxHeights.count == 0) {
        
        return CGSizeZero;
             }

    return CGSizeMake(self.collectionView.bounds.size.width,  [self.perColumnMaxHeights[[self maxColumn]] floatValue] + _insets.bottom);


}

- (void)setHorzontalMargin:(CGFloat)horizontalMargin
{
    _horizontalMargin = horizontalMargin;

}
- (void)setVerticalMargin:(CGFloat)verticalMargin
{

    _verticalMargin = verticalMargin;

}

- (void)setMaxColumns:(NSInteger)maxColumns
{

    if (maxColumns == 0) {
        return;
    }
    _maxColumns = maxColumns;

}
-(void)setInserts:(UIEdgeInsets)inserts
{
    _insets = inserts;

}
不規(guī)則布局.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容