1

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

目标或我正在尝试在 Swift 中构建的内容

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

2. 我试过的

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

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

提要集合视图

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

我不知道如何控制CollectionViewCell.

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

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

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

  1. 我是否朝着正确的方向前进?
  2. 有没有更简单的方法来做到这一点?对于网络可能需要 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
        }
    }
}
4

2 回答 2

1

您可以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
    }
}

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

在此处输入图像描述

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

在此处输入图像描述

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

于 2019-12-04T07:31:24.847 回答
0

好吧,在更多的 Stackoverflowing 和观看其他教程之后,我终于找到了解决问题的真正方法。

答案相当简单:约束

当您从情节提要创建所有内容时,您必须确保设置了正确的约束。这包括尾随、顶部等的约束。更重要的是宽度和高度。

最后,在处理图像时,您还必须密切注意内容模式。

根据您选择的内容模式,您可能会得到有趣的结果。

最后,Apple 的 Collection View 在使用情节提要时按预期工作。使用情节提要设置项目布局。

如果您愿意,可以通过扩展以下协议来更改单元格项目的布局:UICollectionViewDelegateFlowLayout。您也可以只设置一个引用UICollectionFlowLayout的属性

然后可能从那里拿走它。

最后,在我的用例中使用 Collection View 和一个项目的提要可能是矫枉过正,您可能希望按照本文中其他人的建议使用 TableView。

于 2019-12-04T15:16:16.813 回答