【发布时间】：2019-12-04 05:56:30
【问题描述】：
我是 IOS 开发的新手，我只是想弄湿我的脚。在过去的几天里，我一直在努力思考如何在 swift 中嵌入水平和垂直滚动以获取视图。
人们似乎提到并使用的一件事是集合视图。我一直在尝试学习如何正确使用它们并在 Swift 中构建您可以在下面看到的图片。
在标签浏览类别下有一个允许水平滚动的容器，即类别容器。 在标签 discover 下方，还有另一个容器应该允许垂直滚动，即 feed 容器（类似于 instagram、Airbnb、Pinterest 等）
2。我尝试过的
从无数小时的谷歌搜索和 stackoverflow 中，我发现 Collection Views 可能适合这项任务，所以我深入研究了它。 苹果文档缺少一些示例，因此我搜索了教程来帮助我。 在一天结束时，我能够实现类别的水平滚动。 这看起来像这样。
到目前为止一切顺利！ 当我尝试添加下一个集合滚动视图（提要的垂直视图）时，问题实际上就开始了。 添加提要集合后，屏幕如下所示。
那么我的问题到底是什么？
好吧，我的问题是，尽管我在情节提要中为 UIIMage 视图设置了约束以填充整个内容视图，但我看到了其他内容。
我想知道如何完美控制UIImageView 和任何其他元素的大小和形状。
为简单起见，我省略了星号、用户名等内容。
但是当我尝试实施这个项目时，项目包含了所有内容。
我不知道如何控制CollectionViewCell 内容的大小和位置。
我假设位置和大小是由我在情节提要中为每个元素设置的约束来处理的，但事实似乎并非如此，现在我迷路了。
我看到有人提到 UICollectionViewLayoutAttributes 的一些帖子，但我只是不知道如何将其整合到我的项目中。
我对建议持开放态度，我还有一些更结束的问题。
- 我的方向正确吗？
- 有没有更简单的方法来做到这一点？对于 Web 可能需要 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
}
}
}
【问题讨论】：
-
我建议在底部视图中使用
UITableView，并在tableView 的标题视图中使用UICollectionView -
您可以使用带有多个部分的表格视图进行类别和发现，并在类别表格视图单元格中创建水平滚动的集合视图
-
它给了我一个错误提示 - 从 Viewcontroller 到 UICollectionView 的 FeedCollectionView 出口无效。插座不能连接到重复的内容。
标签： swift uicollectionviewcell uicollectionviewlayout xcode11.2 swift5.2