swift - Cell的Swift 5 Collection View布局和单元格内的所有项目

问题描述

我是IOS开发新手，我只是想弄湿我的脚。在过去的几天里，我一直在努力思考如何在 swift 中嵌入水平和垂直滚动以获取视图。人们似乎提到并使用的一件事是集合视图。我一直在尝试学习如何正确使用它们并在 Swift 中构建您可以在下面看到的图片。

在标签浏览类别下有一个允许水平滚动的容器，即类别容器。在标签下方发现另一个容器应该允许垂直滚动，提要容器（类似于 instagram、Airbnb、Pinterest 等）

2. 我试过的

从无数小时的谷歌搜索和 stackoverflow 中，我发现 Collection Views 可能适合这个任务，所以我深入研究。苹果文档缺少一些示例，所以我搜索了教程来帮助我。在一天结束时，我能够实现类别的水平滚动。这看起来像这样。

到目前为止，一切都很好！当我尝试添加下一个集合滚动视图（提要的垂直视图）时，问题实际上就开始了。添加提要集合后，屏幕如下所示。

那么我的问题到底是什么？好吧，我的问题是，尽管我在情节提要中为UIIMage视图设置了约束以填充整个内容视图，但我却看到了其他东西。我想知道我怎样才能完美地控制UIImageView和任何其他元素的大小和形状。为简单起见，我省略了星号、用户名等内容。但是当我尝试实现这个时，项目包含了所有内容。

我不知道如何控制CollectionViewCell.

我假设定位和大小是由我在情节提要中为每个元素设置的约束来处理的，但情况似乎并非如此，现在我迷路了。

我看到有人提到UICollectionViewLayoutAttributes的一些帖子，但我只是不知道如何将其合并到我的项目中。

我愿意接受建议，我还有一些更结束的问题。

我是否朝着正确的方向前进？
有没有更简单的方法来做到这一点？对于网络可能需要 15 行代码的内容，似乎有很多代码。

提前谢谢

Github：https ://github.com/Taharcca/LayoutChallenge.git

代码片段

        import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var categoriesCollectionView: UICollectionView!
    @IBOutlet weak var feedCollectionView: UICollectionView!

    let categories = Category.load() // Load data
    let feeds = Feed.load()
    override func viewDidLoad() {
        super.viewDidLoad()
        categoriesCollectionView.dataSource = self
        categoriesCollectionView.delegate = self
        feedCollectionView.dataSource = self
        feedCollectionView.delegate = self
        // Do any additional setup after loading the view.
    }
}

extension ViewController: UICollectionViewDelegate {
    // Not sure when to use this
}

// Diese Erweiterung legt die Datenquelle einer Collection View fest
extension ViewController: UICollectionViewDataSource {
    // Wie viele Reihen?
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    // Wie viele Objekete soll es geben?
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if collectionView == categoriesCollectionView {
            return categories.count
        }
        else {
            return feeds.count
        }
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if collectionView == categoriesCollectionView {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CategoryCollectionViewCell", for: indexPath) as! CategoryCollectionViewCell
            let category = categories[indexPath.item]
            cell.category = category
            return cell
        }
        else {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "FeedCollectionViewCell", for: indexPath) as! FeedCollectionViewCell
            let feed = feeds[indexPath.item]
            cell.feed = feed
            return cell
        }
    }
}

// Größe der Zellen...Sehr intuitiv..... Danke Apple
extension ViewController: UICollectionViewDelegateFlowLayout {
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout:
            UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            if collectionView == categoriesCollectionView {
                return CGSize(width: 150, height: 75) // Collection View size right?
            }
            else {
                return CGSize(width: 374, height: 494)
            }

}

}

    import UIKit

class FeedCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var backgroundImage:UIImageView!

    var feed:Feed! {
        didSet {
            self.update()
        }
    }
    func update() {
        if let feed = feed {
            backgroundImage.image = feed.image
        }
    }
}

标签： swiftuicollectionviewcelluicollectionviewlayoutxcode11.2swift5.2

解决方案

您可以UITableView通过添加轻松UICollectionView实现它tableHeaderView。

我写了如下：

import UIKit

class DemoWithTableViewController: UIViewController {

    //MARK:- @IBOutlet
    @IBOutlet weak var categoriesCollectionView: UICollectionView!
    @IBOutlet weak var tblFeed: UITableView!

    //MARK:- Properties
    let categories = Category.load()
    let feeds = Feed.load()

    override func viewDidLoad() {
        super.viewDidLoad()

        setupUI()
    }
}

//MARK:- Setup UI
extension DemoWithTableViewController {

    func setupUI() {

        categoriesCollectionView.dataSource = self
        tblFeed.dataSource = self
        tblFeed.delegate = self
    }
}

//MARK:- UICollectionViewDataSource
extension DemoWithTableViewController: UICollectionViewDataSource {

    // Wie viele Objekete soll es geben?
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return categories.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CategoryCollectionViewCell", for: indexPath) as! CategoryCollectionViewCell
        let category = categories[indexPath.item]
        cell.category = category
        return cell
    }
}

//MARK:- UITableViewDataSource
extension DemoWithTableViewController: UITableViewDataSource, UITableViewDelegate {

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return feeds.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tblFeed.dequeueReusableCell(withIdentifier: "FeedTableViewCell") as! FeedTableViewCell
        let feed = feeds[indexPath.item]
        cell.feed = feed
        return cell
    }

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

故事板中的视图控制器将如下所示：

你的结果将是上面的代码：

有关更多信息，您可以在此处查看演示项目。

swift - Cell的Swift 5 Collection View布局和单元格内的所有项目

问题描述

解决方案

推荐阅读