前言

因為飲料總類很多，店家通常都會分類別，舉五十嵐的例子

它就分為 "找好茶" "找奶茶" "找拿鐵" "找新鮮" 等類別，如果把每個清單都放進 TableView 裡面，使用者在查找就會很不方便

我想到的方法是利用第一列的 cell，裡面鑲入一個 Collection View，點選 Collection View 裡面的 item 就可以切換不同類別的飲料，而每個類別的飲料都各自放在一個 Table View，因此今天要來實作一個 TableViewCell 裡面鑲入一個 Collection View

1.分層說明

TableView 裡面放 Table View Cell，Table View Cell裡面放一個 Collection View，最後 Collection View 裡在放一個 Collection View Cell

2.先實作一個 TableView

分成兩個段落(section)，一個放 collection view，一個拿來 show 清單
注意事項：

1. 因為是完整的 Table View，所以所在的類別(這裡範本是ViewController.swift)要繼承 UITableViewDelegate 和 UITableViewDataSource
2. storyboard 中 TableView 元件要右鍵拖曳藍線指定 delegate 和 datasource 來源為 ViewController
3. 我這邊也順邊把顯示飲料清單的 cell 也定義在這個檔案裡，就是 class CellWithDrink{}

//
//  ViewController.swift
//  tablewithcollection
//
//  Created by 高菘駿 on 2018/1/11.
//  Copyright © 2018年 SoJ. All rights reserved.
//

import UIKit

class CellWithDrink: UITableViewCell {
    
    @IBOutlet var drinkNameLabel: UILabel!
}

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    var drinkList = ["青茶", "紅茶"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return 2
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        switch section {
        case 0:
            return 1
        case 1:
            return drinkList.count
        default:
            return 1
        }
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        if indexPath.section == 1 {
            let table_cell_2 = tableView.dequeueReusableCell(withIdentifier: "CellWithDrink", for: indexPath) as! CellWithDrink
            table_cell_2.drinkNameLabel.text = drinkList[indexPath.row]
            return table_cell_2
        
        } else {
            let table_cell = tableView.dequeueReusableCell(withIdentifier: "CellWithCollection", for: indexPath) as! CellWithCollection
            return table_cell
        }
        
    }
}

3.鑲入 Collection View

拖曳一個 collection view 元件進 table view cell，然後在拖曳一個 collection view cell 進 collection view，這邊順序一定要放對，要注意樹狀圖結構是否正確。
注意事項：

1. collection view 的 delegate 和 datasource 來源要指定給 table view cell(此範例命名為: CellWithCollection)
2. 這邊要記得把 collection view 的捲動方向設定為水平捲動
   

4.元件拉完之後，先實作鑲入 Collection View 的 Table View Cell

這個 cell class 我們命名為 CellWithCollection，因為他還要代理和實作 collection view，所以這個類別除了要繼承 UITableViewCell 外，還要繼承 UICollectionViewDelegate，UICollectionViewDataSource

class CollectionViewCell: UICollectionViewCell {
    
    @IBOutlet var collectionLabel: UILabel!
    
}

class CellWithCollection: UITableViewCell, UICollectionViewDelegate, UICollectionViewDataSource {
    
    var menuList = ["找好茶", "找好料", "找拿鐵", "sddd", "eijiji", "jifei", "jfeijf", "iejf;efa", "jifejif", "jaifj;a"]
    
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return menuList.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CellInCollection", for: indexPath) as! CollectionViewCell
        cell.collectionLabel.text = menuList[indexPath.row]
        return cell
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }
}

完成，效果如下

後記

明天再來看看怎麼利用點選 collection view item 來切換 table view