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è)置 UICollectionView 的 cell / 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)識符 :
最后再關(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è)置了不同的背景色:
然后, 再實現(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 所涉及的知識點.
