UIStackView，仅在适合它们时安排子视图

Question

我有一组要尝试添加到水平UIStackView的UIButton。这些按钮的数量是动态的，并且它们可能变得很高而无法容纳在屏幕上。

对于我的用例，我想在它们适合屏幕的同时，从堆栈视图的左侧添加按钮。因此，如果我有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。

Answer 1

您需要做什么...

• 在viewDidLoad（）
  • 创建按钮并将它们添加到数组中
• 在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()函数中处理计算。] >