具有水平滚动和布局的 Swift UICollectionView 每个部分在自己的行上从左到右

Question

我希望 UICollectionView 具有水平滚动和布局从左到右在它自己的行上的每个部分。

目前我的 CollectionView with Horizo​​ntal Scrolling 的每个部分都有一个垂直布局。

理想情况下，我想要以下带有水平滚动的布局：

所以我的问题是如何在我的 UICollectionView 上进行水平滚动，其中从左到右的每个水平行都布置在一行中。 （见第二张图）每个部分将占据不同的行。

此外，每一行应同时水平滚动（如电子表格）。

Answer 1

您必须结合 Collection-view 和 Tableview 才能在 UICollectionView 上进行水平滚动，其中从左到右的每个水平行都布置在一行中。每个部分将占据不同的行。

      class DesignCollectionViewCell: UICollectionViewCell {

        @IBOutlet weak var lbltext: UILabel!
        override func awakeFromNib() {
            super.awakeFromNib()
            // Initialization code
        }
    }

    class DesignTableViewCell: UITableViewCell {

        @IBOutlet weak var designCollectionView: UICollectionView!
        var numberofScection = Int()

        override func awakeFromNib() {
            super.awakeFromNib()
            // Initialization code
            self.designCollectionView.register(UINib(nibName: "DesignCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "DesignCollectionViewCell")
            self.designCollectionView.dataSource = self
            self.designCollectionView.delegate = self
            let layout = UICollectionViewFlowLayout()
            layout.scrollDirection = .horizontal
            self.designCollectionView.collectionViewLayout = layout

        }

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

            // Configure the view for the selected state
        }

    }

    extension DesignTableViewCell: UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout{



        func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
            return 7
        }

        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "DesignCollectionViewCell", for: indexPath) as! DesignCollectionViewCell
            cell.lbltext.text = "section \(self.numberofScection) indexpath \(indexPath.row)"
            return cell
        }

        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            return CGSize(width: 170, height: 100.0)
        }
    }

class ViewController: UIViewController {

    @IBOutlet weak var designTableViewCell: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        self.designTableViewCell.register(UINib(nibName: "DesignTableViewCell", bundle: nil), forCellReuseIdentifier: "DesignTableViewCell")
        self.designTableViewCell.dataSource = self
        self.designTableViewCell.delegate = self

    }


}


extension ViewController: UITableViewDataSource,UITableViewDelegate{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "DesignTableViewCell") as! DesignTableViewCell
        cell.designCollectionView.reloadData()
        cell.numberofScection = indexPath.row
        return cell
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 110
    }

}