[iOS] Storyboard (4) -- 實踐:UICollectionView

Storyboard 系列文章
[iOS] Storyboard (1) -- 入門:API 篇
[iOS] Storyboard (2) --入門:約束篇
[iOS] Storyboard (3) -- 使用:常用Tips
[iOS] Storyboard (4) -- 實踐:問題總結(jié)
[iOS] Storyboard (4) -- 實踐:UIScrollView
[iOS] Storyboard (4) -- 實踐:UICollectionView

Storyboard 中使用 UICollectionView, 與使用 UITableView 有一些區(qū)別, 在設(shè)置 UICollectionViewcell / header / footer 等都可以在 Storyboard 中完成, 不需要單獨創(chuàng)建 Xib 文件進行布局; 而且, 創(chuàng)建的 cell / header / footer 等在使用時, 不需注冊, 只需要在 Storyboard 關(guān)聯(lián)相應(yīng)的類文件, 設(shè)置好重用標(biāo)識符即可; 這篇文章主要介紹如何在 Storyboard 中使用UICollectionView;

1. 添加 UICollectionView

Storyboard 添加一個 UICollectionView, 添加全屏顯示的約束后, 如下圖所示:

這里默認有一個 cell, 即左上角的小灰色框, 選中后可以拉大;

在右側(cè)的屬性欄內(nèi), 我們可以設(shè)置顯示的 cell 數(shù)量, 滾動方向, 布局等, 默認會擁有一個 layout, 不需要新建;

Storyboard 中的控制器關(guān)聯(lián)相應(yīng)的文件, 然后設(shè)置 UICollectionView 的代理為控制器, 在控制器中實現(xiàn)相應(yīng)的代理方法, 這樣一個基本的 UICollectionView 就會顯示在屏幕上;

2. 關(guān)聯(lián) layout

新添加的 UICollectionView 會默認擁有一個 flowlayout, 如果我們需要自定義, 可以將屬性欄的 Layout 項選擇 Custom, 然后關(guān)聯(lián)自定義的 layout 類即可:

3. 定制cell

UICollectionViewCell 的布局, 不需要新建 Xib, 直接在 UICollectionView 中進行即可, 默認顯示的 cell 比較小, 不方便布局, 我們可以將他拉大一些, 然后, 添加一個 UIImageView 和一個 UILabel 并添加相應(yīng)的約束:

然后, 設(shè)置復(fù)用標(biāo)識符, 在屬性面板的 Identifier 選項添加標(biāo)識符 :

設(shè)置重用標(biāo)識符

最后再關(guān)聯(lián)相應(yīng)的 UICollectionViewCell 子類文件即可:

這樣, 我們在使用時, 只需要在代理方法中添加如下代碼:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"LQHouseViewCellReusID" forIndexPath:indexPath];
    
    return cell;
}

這里為了顯示的好看一些, 動態(tài)設(shè)置了 cell 的大小;
運行效果:

這里沒有使用子類的類, 直接使用了 UICollectionViewCell , 實際應(yīng)用時, 直接引入頭文件, 使用相關(guān)聯(lián)的子類即可.

4. 多種cell

假如我們需要的 cell 布局不一樣, 需要多個不同的 cell, 又應(yīng)該怎么設(shè)置呢? 也很簡單, 和設(shè)置單個 cell 一樣, 我們現(xiàn)在屬性設(shè)置欄中將 Items 選項修改為 2 :

這時 UICollectionView 中會默認顯示兩個 cell , 我們只需要將另一個cell , 根據(jù)自己需要添加不同布局, 設(shè)置不同的重用標(biāo)識符, 關(guān)聯(lián)不同的文件即可, 為了區(qū)別兩種 cell, 設(shè)置了不同的背景色:

兩種不同的 cell

然后, 再實現(xiàn)相應(yīng)的方法即可, 這里我讓偶數(shù)行顯示紅色, 奇數(shù)行顯示藍色, 添加代碼如下:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    if (indexPath.row % 2 == 0) {

        UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"LQTwoCollectionViewCellReusID" forIndexPath:indexPath];

        return cell;
    }
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"LQHouseViewCellReusID" forIndexPath:indexPath];
    
    return cell;
}


運行效果:


4. 定制區(qū)頭/區(qū)尾

區(qū)頭/區(qū)尾 的設(shè)置, 只需要在 UICollectionView 的屬性欄中勾選 Section Header 或者 Section Footer 即可, 在中間 UICollectionView 中會出現(xiàn)相應(yīng)的區(qū)頭/區(qū)尾:

這時會發(fā)現(xiàn), 在 cell 上下方多個灰色的線框, 該區(qū)域就是對應(yīng)區(qū)的區(qū)頭/區(qū)尾, 我們可以直接把控件拖拽到該區(qū)域, 添加約束;

  • 設(shè)置區(qū)頭的復(fù)用標(biāo)識符

選中區(qū)頭, 添加復(fù)用標(biāo)識符 :

  • 關(guān)聯(lián)自定義類
    如果需要關(guān)聯(lián)自定義的區(qū)頭類, 在標(biāo)識符欄進行關(guān)聯(lián)即可, 自定義需要是 UICollectionReusableView 的子類:

這樣, 一個區(qū)頭就設(shè)置完成了;

區(qū)尾的設(shè)置和區(qū)頭一樣, 選中區(qū)尾后, 添加復(fù)用標(biāo)識符, 關(guān)聯(lián)類即可;

這里在區(qū)頭/區(qū)尾分別添加一個 label, 并設(shè)置不同的背景色:


在代理方法中添加如下代碼:

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        UICollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"LQColltionHeaderViewResuID" forIndexPath:indexPath];
        
        return header;
    }
    
    UICollectionReusableView *footer = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"LQColltionFooterViewResuId" forIndexPath:indexPath];
    
    return footer;
}


運行效果:

以上, 就是在 Storyboard 中使用 UICollectionView 所涉及的知識點.

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