ios - UIStackView,仅在适合时排列子视图
问题描述
我有一组 UIButtons 我试图添加到水平 UIStackView。这些按钮的数量是动态的,它们可能会变得太高以至于无法在屏幕上显示。
对于我的用例,我想从堆栈视图的左侧添加按钮,同时它们适合屏幕。因此,如果我有 10 个按钮,并且在添加第 5 个按钮后没有足够的空间添加第 6 个按钮,我想在那一刻停下来。
有人知道获得这种行为的好方法吗?
我当前的代码与此类似:
import UIKit
class ViewController: UIViewController {
let items = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven"]
override func viewDidLoad() {
super.viewDidLoad()
let stackView = UIStackView()
stackView.axis = .horizontal
stackView.spacing = 5
view.addSubview(stackView)
for title in items {
let button = UIButton()
button.backgroundColor = .red
button.setTitle(title, for: .normal)
// if button.doesNotFit() {
// break
// }
stackView.addArrangedSubview(button)
}
let spacerView = UIView()
spacerView.setContentHuggingPriority(.defaultLow, for: .horizontal)
stackView.addArrangedSubview(spacerView)
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
stackView.heightAnchor.constraint(equalToConstant: 50).isActive = true
}
}
有了这个,我得到以下结果。问题在于按钮“九”、“十”等......因为它们不适合。我不希望将它们添加到 UIStackView。
解决方案
你需要做什么...
- 在 viewDidLoad()
- 创建按钮并将它们添加到数组中
- in
viewDidLayoutSubviews()
(所以我们有一个有效的视图宽度)- 获取可用宽度
- 从堆栈视图中清除所有现有按钮
- 循环遍历按钮数组,添加按钮的宽度+间距
- 如果宽度小于可用宽度,则将按钮添加到堆栈视图
这是一个完整的例子。我包括.left
,.right
和.justified
选项:
// ButtonsAlignment is
// left = buttons will be left-aligned with fixed spacing
// right = buttons will be right-aligned with fixed spacing
// justified = buttons will be justified edge to edge with equal spacing
enum ButtonsAlignment {
case left
case right
case justified
}
class StackSpacingViewController: UIViewController {
let items = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven"]
// array to hold your buttons
var buttonsArray: [UIButton] = []
// change to .left, .right, .justified to see the difference
let spacingMode: ButtonsAlignment = .left
// if mode is .justified, this will be the minimum spacing
let buttonSpacing: CGFloat = 5.0
// need to track when the view width changes (when auto-layout has set it)
// for use in viewDidLayoutSubviews()
var viewWidth: CGFloat = 0.0
// we'll need to refrence the stack view in multiple places,
// so don't make it local to viewDidLoad()
let stackView = UIStackView()
override func viewDidLoad() {
super.viewDidLoad()
stackView.axis = .horizontal
if spacingMode == .left || spacingMode == .right {
stackView.distribution = .fill
stackView.spacing = buttonSpacing
} else {
stackView.distribution = .equalSpacing
}
view.addSubview(stackView)
for title in items {
let button = UIButton()
button.backgroundColor = .red
button.setTitle(title, for: .normal)
// append it to the buttonsArray
buttonsArray.append(button)
}
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
stackView.heightAnchor.constraint(equalToConstant: 50).isActive = true
if spacingMode == .left || spacingMode == .justified {
stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
}
if spacingMode == .right || spacingMode == .justified {
stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
}
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// this can (likely will) be called multiple times
// so only update the buttons stack view when the
// view's width changes
if viewWidth != view.frame.width {
let w = view.frame.width
viewWidth = w
// clear any buttons already in the stack
stackView.subviews.forEach {
$0.removeFromSuperview()
}
var curWidth: CGFloat = 0.0
for btn in buttonsArray {
curWidth += btn.intrinsicContentSize.width + buttonSpacing
if curWidth < w {
stackView.addArrangedSubview(btn)
}
}
stackView.setNeedsLayout()
stackView.layoutIfNeeded()
}
}
}
注意:这可以(可能)作为一个独立的自定义视图类更好地工作......可以轻松添加“背景”颜色,并且可以在子类的layoutSubviews()
函数中处理计算。
推荐阅读
- java - 使用 ffmpeg 将 moov atom 移动到 Google Cloud Platform 和 Google Cloud Storage 上 mp4 文件的前面
- qt - Qt 3D Entity 的多个实例
- javascript - 如何使用 javascript 从 API 读取 json
- javascript - 在不使用 if 或 switch 的情况下获得 num 区域的最佳方法
- ruby-on-rails - Rails:要么没有关联记录,要么没有由特定条件创建的关联记录
- unit-testing - TDD是基于单元测试的吗?
- java - 如何删除消息:拿起_JAVA_OPTIONS:-Dawt.useSystemAAFontSettings=on -Dswing.aatext=true
- c# - 使用按钮启动和停止线程
- javascript - 缩小页面时,上表保持不变,无法进行移动兼容。我该如何解决这个问题?
- java - 我可以在没有 build.xml 的情况下运行我的 ant 命令吗?