我是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
}
}
}