OC-UICollectionView實現瀑布流,ocuicollectionview

來源:互聯網
上載者:User

OC-UICollectionView實現瀑布流,ocuicollectionview
UICollectionView實現瀑布流

在iOS中可以實現瀑布流的目前已知的有2種方案:

本文中我們介紹第二種實現方案
首先我們需要自訂一個繼承於UICollectionViewLayout的layout,然後需要重寫四個方法:

第一個方法是做一些初始化的操作,這個方法必須先調用一下父類的實現
第二個方法返回的是一個裝著UICollectionViewLayoutAttributes的數組
第三個方法返回indexPath位置的UICollectionViewLayoutAttributes
第四個方法是返回UICollectionView的可滾動範圍

如何?瀑布流

首先我們需要明白一點瀑布流的排列,瀑布流是大小不規則的一些控制項分布在手機螢幕上面,然後肯定有長度高的也有矮的(就像人的身高一樣,哈哈哈),當排滿第一排的時候就會往下繼續排,那麼這個應該往哪裡放呢,==答案就是把它放到第一排最短的那個下面==,以此類推,按照這個規律排列下去。
明白了這一點我們接下來就該寫代碼了
首先我們建立兩個數組一個裝著cell的布局屬性,另一個裝著當前cell的總高度

//c存放所有cell的布局屬性@property (nonatomic, strong) NSMutableArray *attrsArray;//存放所有列的當前高度@property (nonatomic, strong) NSMutableArray *columnHeights;/** 內容的高度 */@property (nonatomic, assign) CGFloat contentHeight;

  

- (void)prepareLayout{    [super prepareLayout];    self.contentHeight = 0;    //清除之前計算的所有高度,因為重新整理的時候回調用這個方法    [self.columnHeights removeAllObjects];    for (NSInteger i = 0; i < DefaultColumnCpunt; i++) {        [self.columnHeights addObject:@(self.edgeInsets.top)];    }    //把初始化的操作都放到這裡    [self.attrsArray removeAllObjects];    //開始建立每一個cell對應的布局屬性    NSInteger count = [self.collectionView numberOfItemsInSection:0];    for (NSInteger i = 0; i < count; i++) {        // 建立位置        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];        // 擷取indexPath位置cell對應的布局屬性        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];        [self.attrsArray addObject:attrs];    }}

  首先把cell的高度設定為self.edgeInsets.top不然這裡會崩潰。然後取出來item的個數,然後迴圈取出每個item的UICollectionViewLayoutAttributes,然後把它加入到attsArray,然後在- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect這個方法中直接返回attrsArray即可。

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];    CGFloat collectionViewW = self.collectionView.frame.size.width;    CGFloat w = (collectionViewW - self.edgeInsets.left - self.edgeInsets.right -(self.columnCount - 1) * self.columnMargin) / self.columnCount;    CGFloat h = [self.delegate WaterFlowLayout:self heightForRowAtIndexPath:indexPath.item itemWidth:w];    NSInteger destColumn = 0;    CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];    for (NSInteger i = 0; i < self.columnCount; i++) {        CGFloat columnHeight = [self.columnHeights[i] doubleValue];        if (minColumnHeight > columnHeight) {            minColumnHeight = columnHeight;            destColumn = i;        }    }    CGFloat x = self.edgeInsets.left + destColumn * (w + self.columnMargin);    CGFloat y = minColumnHeight;    if (y != self.edgeInsets.top) {        y += self.rowMargin;    }    attrs.frame = CGRectMake(x, y, w, h);    self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame));    CGFloat columnHeight = [self.columnHeights[destColumn] doubleValue];    if (self.contentHeight < columnHeight) {        self.contentHeight = columnHeight;    }    return attrs;}

  上面這個方法是計算item的位置的代碼,首先取出來indexPathUICollectionViewLayoutAttributes對象,然後取出來w,h,核心代碼如下:

NSInteger destColumn = 0;    CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];    for (NSInteger i = 0; i < self.columnCount; i++) {        CGFloat columnHeight = [self.columnHeights[i] doubleValue];        if (minColumnHeight > columnHeight) {            minColumnHeight = columnHeight;            destColumn = i;        }    }    CGFloat x = self.edgeInsets.left + destColumn * (w + self.columnMargin);    CGFloat y = minColumnHeight;    if (y != self.edgeInsets.top) {        y += self.rowMargin;    }

  首先弄了一個標示destColumn來做記錄是那一列的,然後定義一個minColumnHeight為最小的列的高度,取出來self.columnHeights[0]的高度,這裡預設為它就是最小的,然後進行for迴圈遍曆,取出來i位置上面的高度,如果這個值小於之前的minColumnHeight,那麼取出來的這個高度就是最小的高度了,然後把i的值賦值給destColumn,然後x的值就是上面代碼中的相加的結果,y的值就是繼續加上間距

- (CGSize)collectionViewContentSize{//    CGFloat maxColumnHeight = [self.columnHeights[0] doubleValue];//    //    for (NSInteger i = 1; i < DefaultColumnCpunt; i++) {//        // 取得第i列的高度//        CGFloat columnHeight = [self.columnHeights[i] doubleValue];//        //        if (maxColumnHeight < columnHeight) {//            maxColumnHeight = columnHeight;//        }//    }    return CGSizeMake(0, self.contentHeight + self.edgeInsets.bottom);}

  傳送門:gitHub

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.