有時要實現一個複雜的頁面配置,單單使用
UITableView 實現不了,需要通過
UITableView 和
UICollectionView 結合實現,即每個儲存格
tableViewCell 中都嵌套一個
collectionView。下面通過範例示範如何?。
1,效果圖 (1)表格中每一個儲存格對應一個月份的圖書列表。 (2)儲存格中頭部顯示月份標題。內部通過
collectionView 顯示當月所有書籍封面圖片,數量不定。整個儲存格高度自適應。 (3)這個範例其實只用多
section 的
collectionView 也能實現( 點擊查看)。本文使用
UITableView +
UICollectionView 示範如何?同樣的功能,
2,如何?儲存格高度自適應 (1)我們要對
collectionView 設定個高度約束。當在儲存格中更新
collectionView 的資料時,要擷取這個
collectionView 的真實的內容高度(
contentSize.height),然後用
contentSize.height 來更新
collectionView 的高度約束。這樣就實現了儲存格內部
collectionView 的高度自適應。 (2)而對於儲存格
tableViewCell 的高度自適應,是通過
AutoLayout 特性實現的。利用內容將
cell 撐起來。
| 1 2 3 4 |
//設定estimatedRowHeight屬性預設值 self .tableView!.estimatedRowHeight = 44.0 //rowHeight屬性設定為UITableViewAutomaticDimension self .tableView!.rowHeight = UITableViewAutomaticDimension |
3,實現步驟 (1)建立一個自訂的
collectionView 儲存格類:
MyCollectionViewCell,同時勾選“
Also create XIB file”
(2)在
MyCollectionViewCell.xib 中添加一個
ImageView,並設定好約束。同時在對應的類中作關聯
(3)
MyCollectionViewCell.swift 代碼如下:
| 1 2 3 4 5 6 7 8 9 10 11 |
import UIKit class MyCollectionViewCell : UICollectionViewCell { //用於顯示封面縮圖 @IBOutlet weak var imageView: UIImageView ! override func awakeFromNib() { super .awakeFromNib() } } |
(4)建立一個自訂的
tableView 儲存格類:
MyTableViewCell ,同時勾選“
Also create XIB file ”
(5)在
MyTableViewCell.xib 中添加一個
Label 和一個
CollectionView,並設定好約束。同時在對應的類中作關聯。 其中
Label 設定的是上、下、左、右4個約束: