ios - 计算 CollectionView 马赛克布局的单元格大小
问题描述
我正在尝试制作类似于 Google 的 Keep 应用程序的马赛克集合视图布局。我已经分类UICollectionViewLayout
类似于在线找到的许多教程。为了正确布局集合视图单元格,调用类必须实现一个委托HeightForCellAtIndexPath
方法来获取单元格的高度。就我而言,我还获得了单元格的宽度来创建 1、2 或 3 列布局。
在所有教程中,单元格内容的高度都是已知的,不需要计算。就我而言,内容的大小是未知的,需要计算。我尝试了许多不同的计算方法,但没有一个能完美运行。我最近的尝试需要创建一个CardContent
类并将其添加到单元格contentView
中cellForItemAt
,并实例化一个CardContent
实例HeightForCellAtIndexPath
以计算传递给布局类的内容的大小。
我确信我的方法存在很多问题,但据我所知,问题似乎在于多行标签的布局不正确,HeightForCellAtIndexPath
因为标签没有换行到多行并保持为单行线因此给了我一个不正确的高度contentView
。
CardContentCell.swift
import UIKit
class CardContentCell: UICollectionViewCell {
var todoList: TodoList! {
didSet {
self.backgroundColor = UIColor(todoList.color)
}
}
override init(frame: CGRect) {
super.init(frame: frame)
self.layer.cornerRadius = 5.0
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
CardContent.swift
编辑:添加createLineItem
方法。请参阅下面的答案。
class CardContent: UIStackView {
var todoList: TodoList!
var verticalItemSpacing: CGFloat = 10.0
var cellWidth: CGFloat!
init(todoList: TodoList, cellWidth: CGFloat = 0.0) {
self.todoList = todoList
self.cellWidth = cellWidth
super.init(frame: CGRect(x: 0, y: 0, width: cellWidth, height: 0))
self.axis = .vertical
self.alignment = .fill
self.distribution = .fill
self.contentMode = .scaleToFill
self.spacing = 10.0
layoutContent()
}
required init(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func createTitleLabel(title: String) -> UILabel {
let label = UILabel()
label.text = title
label.font = label.font.withSize(20.0)
label.numberOfLines = 2
label.lineBreakMode = .byTruncatingTail
label.translatesAutoresizingMaskIntoConstraints = false
return label
}
func createItemLabel(text: String) -> UILabel {
let label = UILabel()
label.text = text
label.font = label.font.withSize(17.0)
label.numberOfLines = 3
label.lineBreakMode = .byTruncatingTail
label.translatesAutoresizingMaskIntoConstraints = false
label.sizeToFit()
return label
}
func createLineItem(text: String) -> UIStackView {
let hstack = UIStackView()
hstack.axis = .horizontal
hstack.alignment = .fill
hstack.distribution = .fillProportionally
let imgView = createImgView(withFont: lineItemFont)
let textLabel = createItemLabel(text: text)
hstack.addArrangedSubview(imgView)
hstack.addArrangedSubview(textLabel)
return hstack
}
func layoutContent() {
self.addArrangedSubview(createTitleLabel(title: todoList.title))
for todo in todoList.todos.prefix(6) {
let lineItem = createLineItem(text: todo.text)
self.addArrangedSubview(lineItem)
}
}
}
MyCollectionView.swift
extension MyCollectionView: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellID, for: indexPath) as! CardContentCell
cell.todoList = todoLists[indexPath.row]
let content = CardContent(todoList: cell.todoList)
cell.contentView.addSubview(content)
content.pinTopAndSides(to: cell.contentView) // See extension below
return cell
}
}
extension MyCollectionView: CardLayoutDelegate {
func collectionView(_ collectionView: UICollectionView, HeightForCellAtIndexPath indexPath: IndexPath, cellWidth: CGFloat) -> CGFloat {
let todoList = todoLists[indexPath.row]
let stackView = CardContent(todoList: todoList, cellWidth: cellWidth)
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.setNeedsLayout()
stackView.layoutIfNeeded()
let size = stackView.frame.size
return size.height
}
}
extension UIView {
func pinTopAndSides(to other: UIView) {
translatesAutoresizingMaskIntoConstraints = false
leadingAnchor.constraint(equalTo: other.leadingAnchor).isActive = true
trailingAnchor.constraint(equalTo: other.trailingAnchor).isActive = true
topAnchor.constraint(equalTo: other.topAnchor).isActive = true
}
}
结果是,如果始终有 6 个行项目,则计算的高度始终为 230(在 2 列布局中)。在下面的屏幕截图中,单元格被着色,而其余内容溢出。
解决方案
除非有更好的解决方案,否则我的答案是不使用嵌套的 Horizontal UIStackview
。这充满了未知数并且难以诊断自动布局问题。相反,我使用了 aUIView
并添加了我自己的约束。
这是创建所述视图的方法。有趣的是,没有人仔细研究我的问题,以至于在我急于复制和过去的过程中,我在原帖中省略了这个最关键的方法。我将使用此方法的原始实现来更新问题以供参考。
func createLineItem(text: String) -> UIView {
let view = UIView()
let imgView = createImgView(withFont: lineItemFont)
imgView.translatesAutoresizingMaskIntoConstraints = false
let textLabel = createItemLabel(text: text)
textLabel.translatesAutoresizingMaskIntoConstraints = false
imgView.tintColor = self.textColor
view.addSubview(imgView)
view.addSubview(textLabel)
imgView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
imgView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
textLabel.leadingAnchor.constraint(equalTo: imgView.trailingAnchor, constant: 5.0).isActive = true
textLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
textLabel.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
textLabel.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
return view
}
而且,对于HeightForCellAtIndexPath
委托函数,将 设置widthAnchor
为单元格宽度提供了单元格的正确高度:
func collectionView(_ collectionView: UICollectionView, HeightForCellAtIndexPath indexPath: IndexPath, cellWidth: CGFloat) -> CGFloat {
let stackView = CardContent(todoList: todoList)
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.widthAnchor.constraint(equalToConstant: cellWidth).isActive = true
stackView.setNeedsLayout()
stackView.layoutIfNeeded()
let size = stackView.frame.size
return size.height
}
推荐阅读
- android - Android支持仓库离线更新怎么做?
- apache - 启用 LogLevel,仍然无法在 Apache 服务器上看到 POST 数据
- vue.js - Vue CLI 3 将 eval 函数添加到自定义模板标签
- angular - 离子滑块上的条件导航
- html - 想要垂直对齐页面
- kubernetes - 0/1 个节点可用 1 个节点有磁盘压力
- list - Ocaml 中的匹配
- google-chrome-extension - 如何通过扩展检查chrome访问的目录
- amazon-cloudformation - 基于template_url的Cloudformation访问控制
- ruby - ruby 命令行应用程序:如何输出一行并从键盘编辑它