如圖所示的多表視圖是一個很常用的東西，之前我是用UIScrollView和UITableViewController做的。把當前的控制器作為一個父控制器，添加三個UITableViewController的實例作為子控制器，把父控制器中的 scrollView 作為容器，然后添加子控制器中的 tableView 作為子視圖。這樣做有一個問題，一旦有十幾二十個表的話，內(nèi)存就要爆炸了。解決的辦法是可以自己寫個重用機制，不過這顯然沒必要，用自帶重用機制的UICollectionView應(yīng)該是個更好的選擇。
首先新建個HomeContainerViewController，繼承自UICollectionViewController，然后在viewDidLoad里面加上這兩句：
collectionView?.pagingEnabled = true
collectionView?.bounces = false
這樣滑動的時候就會有翻頁的段落感，滑到邊界的時候也不會有回彈效果。
然后要用 layout 控制布局，用最常用的 UICollectionViewFlowLayout 就行了，設(shè)置單元格的寬高，既然是翻頁，寬肯定是跟屏幕等寬，高度就看你需求了，但是不要超過 collectionView 的高，如下：
lazy var layout: UICollectionViewFlowLayout = {
let lazyLayout = UICollectionViewFlowLayout()
lazyLayout.itemSize = CGSize(width: Width, height: Height)
lazyLayout.minimumInteritemSpacing = 0
lazyLayout.minimumLineSpacing = 0
lazyLayout.scrollDirection = .Horizontal
return lazyLayout
}()
之后就可以用這個 layout 來初始化之前定義的HomeContainerViewController。接下來我們要自定義一個UICollectionViewCell，讓它包含一個 tableView：
class HomeCollectionViewCell: UICollectionViewCell {
var tableView: UITableView!
var dataSource: HomeTableDataSource!
override init(frame: CGRect) {
super.init(frame: frame)
tableView = UITableView(frame: bounds, style: .Grouped)
tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: CellReuseIdentifier.LatestArticles)
addSubview(tableView)
dataSource = HomeTableDataSource()
tableView.dataSource = dataSource
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
這邊還有一個 dataSource（同理可自行添加 delegate），是 tableView 的數(shù)據(jù)源，可能大部分人習(xí)慣把控制器又當 dataSource 又當 delegate，不過我比較喜歡分開，就算是用同一個控制器，也會用extension把代碼分開。好現(xiàn)在我們看看如何定義這個 dataSource：
class HomeTableDataSource: NSObject, UITableViewDataSource {
var cellData: String?
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 20
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
return 1
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier(CellReuseIdentifier.LatestArticles, forIndexPath: indexPath)
//Configure the cell...
cell.textLabel?.text = cellData
return cell
}
}
注意一定要繼承 NSObject ，因為 UITableViewDataSource協(xié)議是繼承了NSObjectProtocol協(xié)議的，所以如果你不繼承NSObject的話，還得自己寫一堆方法來遵守NSObjectProtocol協(xié)議。因為這邊只是個 Demo，所以我直接在 cell 中顯示cellData的值，那cellData 的值在哪里設(shè)置呢？顯然是在HomeContainerViewController中：
let tableViewDataList = ["first table", "second table", "third table"]
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! HomeCollectionViewCell
// Configure the cell
cell.dataSource.cellData = tableViewDataList[indexPath.section]
cell.tableView.reloadData()
return cell
}
在真實場景中一般是會在 dataSource 中放一個 urlString 的屬性，然后一旦這個屬性被賦值就自動聯(lián)網(wǎng)取數(shù)據(jù)。這邊 cell 是會被復(fù)用的，在翻到第三頁時，會復(fù)用第一頁的 cell ，第四頁復(fù)用第二頁的 cell……依此類推，所以需要給 cell 中的tableView調(diào)用 reloadData方法，不然就算改變了表中的數(shù)據(jù)，也不能正確的顯示（奇數(shù)頁都顯示第一頁的數(shù)據(jù)，偶數(shù)頁都顯示第二頁的數(shù)據(jù)）。
這樣就完成了一個多表視圖，實際項目一般會在 table 上方放個小滑塊指示器什么的，也很簡單，只要在cellForItemAtIndexPath方法中根據(jù)indexPath.section來設(shè)置滑塊位置就好了。
