今天恢復了點元氣，終於能好好做事了。

螢幕錄製 2021-09-13 下午7.44.19.mov

目標將實現圖片的滑動

首先：要來知道這些該怎麼形成這個

文字敘述部分：

TableView裡面裝了一個TableViewCell

TableViewCell裡面裝了CollectionView

CollectionView裡面裝了CollectionViewCell

圖片：

圖片Credit(https://ashfurrow.com/blog/putting-a-uicollectionview-in-a-uitableviewcell-in-swift/)

在這個基礎上，需要修改之前的程式，因為要把CollectionView作為滑動

1. 創建一個新的CollectionViewCell & Xib

將建立的Xib填滿我要的imageView

PhotoCollectionViewCell.xib

(一樣要在PhotoCollectionViewCell.swift建立@IBOutlet連結)

我的ImageView連結叫boook_image

2. 在TableViewCell繼承UICollectionViewDelegate、UICollectionViewDataSource

// TableViewCell

import UIKit

class TableUIView: UITableViewCell,UICollectionViewDelegate,UICollectionViewDataSource{
		// 記得要連結新增的CollectionView
		@IBOutlet weak var CollectionView_1: UICollectionView!
		@IBOutlet weak var CollectionView_1: UICollectionView!
		// 將原本的image_1給取代掉
    //@IBOutlet weak var image_1: UIImageView!
    @IBOutlet weak var bookname: UILabel!
    @IBOutlet weak var author: UILabel!
    @IBOutlet weak var owner: UILabel!
    @IBOutlet weak var count_day: UILabel!
    
		// 建立我想滑動的那幾張照片的名稱
    var count = ["01","02","03"]

使用UICollectionViewDelegate、UICollectionViewDataSource

		// 一旦繼承了UICollectionViewDataSource，就會有這個函數出現，讓CollectionView知道他有多少資料要呈現
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return count.count
    }
    // 一旦繼承了UICollectionViewDelegate，就會有這個函數出現，讓CollectionView負責做事
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        // 讓CollectionView裡面使用能夠Reusable的CollectionViewCell
				// "PhotoCell"是我的IdentifierName，透過在下面Register取名的Cell名稱
				let collectionViewcell = CollectionView_1.dequeueReusableCell(withReuseIdentifier:"PhotoCell", for: indexPath) as! PhotoCollectionViewCell
        
				// 讓我的CollectionViewCell中所連結的圖片(boook_image)會是上面count所規定的那些照片
        collectionViewcell.boook_image.image = UIImage(named: count[indexPath.row])
        
        return collectionViewcell
    }

 override func awakeFromNib() {
        super.awakeFromNib()
				// 透過Register Nib的方式，替我的Cell取名
        CollectionView_1.register(UINib(nibName: "PhotoCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "PhotoCell")
        // 做出呈現的規範
				let layout = UICollectionViewFlowLayout()
				// 讓滑動的方式是水平滑動
        layout.scrollDirection = .horizontal
				// 設定這個滑動Section與周圍的間隔
        layout.sectionInset = UIEdgeInsets(top: 10, left: 0, bottom: 10, right: 0)
				layout.minimumLineSpacing = 5
				// 設定Section裡面物件的Size，如果沒有設定，會沒有辦法進行滑動
        layout.itemSize.height = self.frame.height - 20
        layout.itemSize.width = UIScreen.main.bounds.width - 30
				// 將CollectionView的Layout設定為以上這些
        CollectionView_1.collectionViewLayout = layout

				// 將CollectionView的執行由這個TableViewCell來執行
        CollectionView_1.delegate = self
        CollectionView_1.dataSource = self
        // Initialization code
    }
}

TableViewController部分的程式碼

// TableViewController

import UIKit

// 這是我的TableViewController
class TableUIViewControllerTableViewController: UITableViewController{
		var imagedata = ["01","02","03"]
    var booknamedata = ["原子習慣","超速學習","深夜食堂"]
    var authordata = ["J","K","Z"]
    var owners = ["acer","asus","apple"]
    var lastdaydata = ["3","5","6"]

		let nib = UINib(nibName: "TableUIView", bundle: nil)

override func viewDidLoad() {
        super.viewDidLoad()
				// 讓TableView Register Nib來替TableViewCell取名
        tableView.register(nib, forCellReuseIdentifier: "TTTableUIView")
    }

override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return imagedata.count
    }
    
// 回傳Cell的寬度
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 286
    }

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // 讓UITableView能夠使用Reuseable的Cell，記得轉型成Cell屬性
				let cell:TableUIView = tableView.dequeueReusableCell(withIdentifier: "TTTableUIView", for: indexPath) as! TableUIView
        
				// 因為要把UICollectionView加入進來，所以註銷了這個ImageView
        //cell.image_1.image = UIImage(named: imagedata[indexPath.row])
        cell.bookname.text = booknamedata[indexPath.row]
        cell.author.text = authordata[indexPath.row]
        cell.owner.text = owners[indexPath.row]
        cell.count_day.text = lastdaydata[indexPath.row]
        cell.backgroundColor = .init(red: 201, green: 148, blue: 115, alpha: 0)
				
				// 回傳這個轉型過後的Reusable Cell
        return cell
    }
}

大功告成！

原本還卡在為什麼不能滑，發現根本就沒設定itemSize導致每個Cell都擠在一起

參考連結：

[Day 10] Swift 新增 tableview+collectionView Cell 實現上下左右都可以滑 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

Putting a UICollectionView in a UITableViewCell in Swift

Day24 - 鑲嵌 Collection View 進 Table View - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

GitHub - Bgihe/TableView-CollectionViewTest