如何在 Swift 中以编程方式为 StackView 中的 collectionView 设置动态高度?
How to set dynamic height for collectionView inside a StackView programmatically in Swift?
所以我在 stackView 中有一个集合视图,还有两个 UIView,stackView 是 scrollView 的子视图。我希望我的 collectionView 动态调整其高度并且不影响堆栈视图中的其他视图。我制作了一张图表,展示了我想要实现的目标,到目前为止......没有成功,其他两个视图不断伸展或者 collectionView 似乎并不完全在中间。有没有人可以帮助我?请。
约束代码:
private func setupView() {
view.addSubview(scrollView)
scrollView.addSubview(mainStack)
headerStackView.addArrangedSubview(titleLabel)
footerStackView.addArrangedSubview(footerLabel)
mainStack.addArrangedSubview(headerStackView)
mainStack.addArrangedSubview(collectionView)
mainStack.addArrangedSubview(footerStackView)
let layoutGuide = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
collectionView.heightAnchor.constraint(equalToConstant: 500),
scrollView.topAnchor.constraint(equalTo: layoutGuide.topAnchor),
scrollView.bottomAnchor.constraint(equalTo: layoutGuide.bottomAnchor),
scrollView.leadingAnchor.constraint(equalTo: layoutGuide.leadingAnchor, constant: 16),
scrollView.trailingAnchor.constraint(equalTo: layoutGuide.trailingAnchor, constant: -16),
mainStack.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
mainStack.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 16),
mainStack.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
mainStack.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
mainStack.bottomAnchor.constraint(equalTo: layoutGuide.bottomAnchor)
])
}
集合视图和 StackView 代码:
private lazy var collectionView: UICollectionView = {
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.backgroundColor = .white
collectionView.register(CustomCell.self, forCellWithReuseIdentifier: CustomCell.reuseId)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.showsVerticalScrollIndicator = false
collectionView.isScrollEnabled = false
return collectionView
}()
private lazy var mainStack: UIStackView = {
let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .vertical
stackView.spacing = 16
stackView.distribution = .fill
return stackView
}()
委托函数:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
let collectionViewSize = collectionView.frame.size.width - 16
let collectionViewHeightSize = collectionView.frame.size.height
return CGSize(width: collectionViewSize/2, height: collectionViewHeightSize / 2)
}
这是我的图表:
这一行是错误的:
mainStack.bottomAnchor.constraint(equalTo: layoutGuide.bottomAnchor)
表示“将 mainStack 底部保持在 视图的 底部,无论滚动如何。
应该是:
mainStack.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor)
现在 mainStack
成为滚动视图的“可滚动内容”。
所以我在 stackView 中有一个集合视图,还有两个 UIView,stackView 是 scrollView 的子视图。我希望我的 collectionView 动态调整其高度并且不影响堆栈视图中的其他视图。我制作了一张图表,展示了我想要实现的目标,到目前为止......没有成功,其他两个视图不断伸展或者 collectionView 似乎并不完全在中间。有没有人可以帮助我?请。
约束代码:
private func setupView() {
view.addSubview(scrollView)
scrollView.addSubview(mainStack)
headerStackView.addArrangedSubview(titleLabel)
footerStackView.addArrangedSubview(footerLabel)
mainStack.addArrangedSubview(headerStackView)
mainStack.addArrangedSubview(collectionView)
mainStack.addArrangedSubview(footerStackView)
let layoutGuide = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
collectionView.heightAnchor.constraint(equalToConstant: 500),
scrollView.topAnchor.constraint(equalTo: layoutGuide.topAnchor),
scrollView.bottomAnchor.constraint(equalTo: layoutGuide.bottomAnchor),
scrollView.leadingAnchor.constraint(equalTo: layoutGuide.leadingAnchor, constant: 16),
scrollView.trailingAnchor.constraint(equalTo: layoutGuide.trailingAnchor, constant: -16),
mainStack.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
mainStack.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 16),
mainStack.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
mainStack.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
mainStack.bottomAnchor.constraint(equalTo: layoutGuide.bottomAnchor)
])
}
集合视图和 StackView 代码:
private lazy var collectionView: UICollectionView = {
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.backgroundColor = .white
collectionView.register(CustomCell.self, forCellWithReuseIdentifier: CustomCell.reuseId)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.showsVerticalScrollIndicator = false
collectionView.isScrollEnabled = false
return collectionView
}()
private lazy var mainStack: UIStackView = {
let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .vertical
stackView.spacing = 16
stackView.distribution = .fill
return stackView
}()
委托函数:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
let collectionViewSize = collectionView.frame.size.width - 16
let collectionViewHeightSize = collectionView.frame.size.height
return CGSize(width: collectionViewSize/2, height: collectionViewHeightSize / 2)
}
这是我的图表:
这一行是错误的:
mainStack.bottomAnchor.constraint(equalTo: layoutGuide.bottomAnchor)
表示“将 mainStack 底部保持在 视图的 底部,无论滚动如何。
应该是:
mainStack.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor)
现在 mainStack
成为滚动视图的“可滚动内容”。