細(xì)說UICollectionView

封面.jpg

前言

你應(yīng)該知道的，UICollectionView和UITableView都是繼承于UISrollView,他們有很多相似的地方，所以你可以稱他們?yōu)椤半p胞胎兄弟”。如果你使用過UITableView, 那下面的教程你會(huì)感覺到很熟悉。

以前，我們?nèi)プ鲱愃破俨剂鬟@種效果的時(shí)候，必須把UITableView去旋轉(zhuǎn)實(shí)現(xiàn)，從而顯得很復(fù)雜。可喜的是，iOS6.0之后APPLE便推出了CollectionView，想想也是貼心呢。

UIColletionView基礎(chǔ)

首先上圖：本文就是來實(shí)現(xiàn)這圖的結(jié)構(gòu):


圖1.png

1.先來創(chuàng)建一個(gè)UIColletionView對象

         @property (nonatomic ,strong) UICollectionView *basicCollectionView;

         在.m文件里添加宏定義
         #define kScreenHeigth self.view.frame.size.height
         #define kScreenWidth  self.view.frame.size.width
         #define kRBG(r,g,b) [UIColor colorWithRed:r/255.0 green:g/255.0  blue:b/255.0  alpha:1]
         #define basicBasicCollectionViewControllerCell @"basicBasicCollectionViewControllerCell"
  
         在@end上面添加下面get方法
         #pragma mark - GET
         //懶加載的方式去初始化UICollectionView對象
        - (UICollectionView *)basicCollectionView{
        if (!_basicCollectionView) 

        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

         //cell大小
        layout.itemSize = CGSizeMake(100, 50);

         //設(shè)置滑動(dòng)的方向
        [layout setScrollDirection:UICollectionViewScrollDirectionVertical];

        //初始化
        _basicCollectionView = [[UICollectionView alloc] initWithFrame: CGRectMake(0, 0,kScreenWidth , kScreenHeigth -64) collectionViewLayout:layout];
        
         //簽訂協(xié)議
         _basicCollectionView.dataSource = self;
         _basicCollectionView.delegate   =self;
        //注冊cell
        [_basicCollectionView registerClass:[UICollectionViewCell class]       forCellWithReuseIdentifier:basicBasicCollectionViewControllerCell];
          }
        return _basicCollectionView;
     }

2.在viewDidLoad最下面中加入

      [self.view addSubview:self.basicCollectionView];

PS：你在上面可以看到UICollectionViewFlowLayout這個(gè)類，這是個(gè)為UICollectionViewCell布局的類，這是和UITableView不同的地方，所以它比UITableView要更加靈活。

3.實(shí)現(xiàn)協(xié)議(這個(gè)和UITableView很像)


       #pragma mark - UIcollectionView dataSource
       - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView           *)collectionView{
       return 1;
       }

       - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
       return 10;
       }

       - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
       UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:basicBasicCollectionViewControllerCell forIndexPath:indexPath];
       cell.backgroundColor = kRBG(33, 52, 72);
       return cell;
       }

接下來可以運(yùn)行了（效果如下：）

圖2.png

3.現(xiàn)在我們來加入頭視圖和尾視圖：

     1.首先添加宏定義
         #define  basicBasicCollectionViewControllerHeaderView @"UICollectionElementKindSectionHeader"
         #define  basicBasicCollectionViewControllerFooterView @"UICollectionElementKindSectionFooter"
     2.在get方法注冊cell下面添加下面兩行代碼
     
        //注冊頭視圖
        [_basicCollectionView registerClass:[UICollectionReusableView class]    forSupplementaryViewOfKind:basicBasicCollectionViewControllerHeaderView withReuseIdentifier:basicBasicCollectionViewControllerHeaderView];
        
        //注冊尾視圖
        [_basicCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:basicBasicCollectionViewControllerFooterView withReuseIdentifier:basicBasicCollectionViewControllerFooterView];

     3.添加dataSource方法
      

          /**
            *
            *
            *  @param collectionView
            *  @param kind            根據(jù)字符串分辨是是頭視圖或者尾視圖
            *  @param indexPath
            *
            *  @return                返回頭視圖或者尾視圖
            */
            - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    
            UICollectionReusableView *reusableView = nil;
            if ([kind isEqualToString:basicBasicCollectionViewControllerFooterView]) {
            UICollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:basicBasicCollectionViewControllerFooterView withReuseIdentifier:basicBasicCollectionViewControllerFooterView forIndexPath:indexPath];
            view.backgroundColor = kRBG(58, 36, 63);
            reusableView = view;
        
        }else if ([kind isEqualToString:@"UICollectionElementKindSectionHeader"]) {
            UICollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:basicBasicCollectionViewControllerHeaderView withReuseIdentifier:basicBasicCollectionViewControllerHeaderView forIndexPath:indexPath];
            view.backgroundColor = kRBG(58, 36, 63);
            reusableView = view;
       }
            return reusableView;
    }


    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
       return CGSizeMake(kScreenWidth, 60);
    }


    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
       return CGSizeMake(kScreenWidth, 60);
    }

   4.現(xiàn)在我們來設(shè)置圖1中的top ,left ,bottom ,right。

    - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(20, 10, 20, 10);
    }

運(yùn)行結(jié)果如下:


圖3.png

5.單元格看起來太整齊，總覺得圖一得放蕩不羈要酷一些，添加一下代碼在ViewController.m中:

    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
       NSInteger randomHeigth = random()%70;
       NSInteger randomWidth = random()%100;
       return CGSizeMake(randomWidth +30, randomHeigth + 30);
    }

6.修改單元格的個(gè)數(shù)為20，效果圖:

圖4.png

以上就是就是一個(gè)簡單的UICollectionView對象的結(jié)構(gòu)圖。

認(rèn)識(shí)UICollectionViewLayout

我們先看看官方的描述：

The UICollectionViewFlowLayout class is a concrete layout object that organizes items into a grid with optional header and footer views for each section. The items in the collection view flow from one row or column (depending on the scrolling direction) to the next, with each row comprising as many cells as will fit. Cells can be the same sizes or different sizes.

UICollectionViewFlowLayout是一個(gè)為section管理單元格布局的具體對象，而且這個(gè)section有可能附帶著頭視圖或者尾視圖。這些在子視圖排列的方向取決于collectionview滑動(dòng)方向，而且單元格的大小可以是隨機(jī)可控的。

The UICollectionViewLayout class is an abstract base class that you subclass and use to generate layout information for a collection view. The job of a layout object is to determine the placement of cells, supplementary views, and decoration views inside the collection view’s bounds and to report that information to the collection view when asked. The collection view then applies the provided layout information to the corresponding views so that they can be presented onscreen.

UICollectionViewLayout是一個(gè)抽象的基類，你能夠子類化這個(gè)基類來為一個(gè)collectionview設(shè)計(jì)布局信息。這個(gè)布局對象的任務(wù)就是決定擺放單元格，頭視圖，尾視圖的擺放位置以及響應(yīng)對collectionview信息請求的回應(yīng)。接下來，collectionview將提供相關(guān)的布局信息給相應(yīng)的視圖，讓其顯示在屏幕上。

接下來看看UICollectionViewLayout關(guān)于布局的方法：

//Returns the layout attributes for the item at the specified index path.(返回對應(yīng)單元格路徑的布局信息)
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;

//Returns the layout attributes for all of the cells and views in the specified rectangle.(返回指定區(qū)域的所有單元格的布局信息容器)
- (NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;

//Returns the width and height of the collection view’s contents.(返回內(nèi)容所需要的長和寬，你可以理解為UIScrollView contentSize)
- (CGSize)collectionViewContentSize;

如果你子類化一個(gè)UICollectionViewLayout對象，你會(huì)發(fā)現(xiàn)上面的方法是按順序調(diào)用的。根據(jù)indexPath拿到每一個(gè)的布局信息，然后拿到所有的布局信息。根據(jù)所有的布局信息來計(jì)算需要顯示內(nèi)容的尺寸。

有時(shí)候你可能需要定義兩種Layout方式，在一個(gè)collectionview視圖里面進(jìn)行布局的切換。使用下面的方法就可以很簡單的完成你需要的操作。

// transition from one layout to another
- (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)animated;

你可以很方便的使用collectionview來添加,刪除數(shù)據(jù)和相應(yīng)的動(dòng)畫,在改變數(shù)據(jù)后執(zhí)行

- (void)insertItemsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths;
- (void)deleteItemsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths;

當(dāng)collectionview需要添加和刪除的時(shí)候，UICollectionViewLayout一樣可以完成上述操作。特別是一個(gè)單元格被移動(dòng)，添加或者是刪除。你可以利用下面的API組合你完成你想要的動(dòng)作和動(dòng)畫

- (void)prepareForCollectionViewUpdates:(NSArray<UICollectionViewUpdateItem *> *)updateItems;

- (nullable UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath;

- (nullable UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath;

- (nullable UICollectionViewLayoutAttributes *)finalLayoutAttributesForDisappearingItemAtIndexPath:(NSIndexPath *)itemIndexPath;

- (void)finalizeCollectionViewUpdates;

更多了解您可以點(diǎn)擊Demo。下面是demo效果：

demo.gif

參考資料:

官方文檔
Objc Blog
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 翻譯自“Collection View Programming Guide for iOS” 0 關(guān)于iOS集合視...
    lakerszhy閱讀 4,084評論 1贊 22
  • The UICollectionView class manages an ordered collection ...
    lixiaoshuai閱讀 883評論 0贊 0
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,822評論 4贊 61
  • 其實(shí)仔細(xì)想來，在我身邊的朋友們大多是以男性為主，從事著傳統(tǒng)的行業(yè)，靠出賣體力，時(shí)間來換取那一點(diǎn)點(diǎn)可悲的生活支出，雖...
    沐七月閱讀 595評論 9贊 10
  • 水兒 無處不自在 遇方隨方 遇圓就圓 哪哪安 他們說 水的心兒 真靜啊
    雪莉詩話閱讀 178評論 10贊 10

友情鏈接更多精彩內(nèi)容