能够滑起来的UICollectionView Day9

今天恢复了点元气，终於能好好做事了。

萤幕录制 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