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
所涉及的知識點.