带有按比例填充的子视图和固有宽度的iOS StackView行为不符合预期

Question

在本文之后，我试图按比例调整StackViews的大小。

https://spin.atomicobject.com/2017/02/07/uistackviev-proportional-custom-uiviews/

假设是通过覆盖内在内容大小，我们可以指定一个新数字，它将计算出子视图大小的比例并相应地调整视图大小。

当我重复执行时，我得到一些奇怪的行为。该比例将保留，但最后一项将被拉伸以占用剩余空间，而不是在父视图的整个宽度上缩放这些项（请参见下图）。

代码：

class GuageSection: UIView {

    var width: Double = 1.0

    override var intrinsicContentSize: CGSize {
        return CGSize(width: width, height: 1.0)
    }
}

这样使用

var guageWrapper = UIStackView()
guageWrapper.distribution = .fillProportionally

let guageSection = GuageSection()
guageSection.width = category.range // Currently Doubles ranging between 1.0 and 1.5
guageWrapper.addArrangedSubview(guageSection)

我尝试过使用translateAutoResizingMaskInConstraints属性和其他一些功能，但是似乎没有任何改变。

如果有人在正确的方向上取得好的进展之前看到了这种行为，将不胜感激。

Answer 1

我不知道这是否是一个“ bug”，但是... UIStackView似乎与.fillProportionally及其初始布局计算有关。

如果.spacing为0（零），则.fillProportionally似乎可以正常工作。如果.spacing为非零，我们会看到问题。

因此，请尝试...用0的间距初始化堆栈视图，然后：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    guageWrapper.spacing = 2
}

当然，您需要引用guageWrapper，因此将其创建为类级变量。

---

编辑：

我整理了一个示例，将堆栈视图作为自定义UIView的一部分。

使用1.0, 2.0, 1.0, 1.0, 1.5的“内在宽度”数组，结果如下：

一切都通过代码完成（不需要@IBOutlets），因此您应该可以通过添加新的视图控制器并将其自定义类设置为GuageTestViewController来运行它：

//
//  GuageTestViewController.swift
//
//  Created by Don Mag on 2/28/19.
//

import UIKit

class GuageSection: UIView {

    let label: UILabel = {
        let v = UILabel()
        v.textAlignment = .center
        v.numberOfLines = 0
        v.font = UIFont.systemFont(ofSize: 14.0)
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()

    let colorView: UIView = {
        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()

    var width: Double = 1.0

    override var intrinsicContentSize: CGSize {
        return CGSize(width: width, height: 1.0)
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    func commonInit() -> Void {

        self.addSubview(colorView)
        self.addSubview(label)

        NSLayoutConstraint.activate([

            colorView.topAnchor.constraint(equalTo: self.topAnchor, constant: 0.0),
            colorView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 0.0),
            colorView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: 0.0),

            colorView.heightAnchor.constraint(equalToConstant: 10.0),

            label.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 0.0),
            label.centerXAnchor.constraint(equalTo: self.centerXAnchor, constant: 0.0),
            label.widthAnchor.constraint(equalTo: colorView.widthAnchor, constant: 0.0),

            label.topAnchor.constraint(equalTo: colorView.bottomAnchor, constant: 2.0),

            ])

    }

}

class GuageView: UIView {

    var pStack = UIStackView()

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    func commonInit() -> Void {

        self.backgroundColor = UIColor(red: 41.0 / 255.0, green: 59.0 / 255.0, blue: 78.0 / 255.0, alpha: 1.0)

        pStack.translatesAutoresizingMaskIntoConstraints = false
        pStack.axis = .horizontal
        pStack.alignment = .fill
        pStack.distribution = .fillProportionally
        pStack.spacing = 0
        addSubview(pStack)

        let labels = [
            "Low", "Ideal", "Pre-High", "High", "Very High"
        ]

        let rgbVals = [
            [252, 191, 127],
            [ 79, 197, 140],
            [252, 191, 127],
            [249, 129, 131],
            [217,  92,  98],
            ]

        let widths = [
            1.0, 2.0, 1.0, 1.0, 1.5
        ]

        for i in 0..<labels.count {
            let v = GuageSection()
            v.translatesAutoresizingMaskIntoConstraints = false
            v.label.text = labels[i]
            v.width = widths[i]
            let rgb = rgbVals[i].compactMap { CGFloat($0) / 255.0 }
            v.colorView.backgroundColor = UIColor(red: rgb[0], green: rgb[1], blue: rgb[2], alpha: 1.0)
            v.label.textColor = v.colorView.backgroundColor
            pStack.addArrangedSubview(v)
        }

        // constrain the stack view 20-pts from top, leading and trailing, 8-pts from bottom
        NSLayoutConstraint.activate([

            pStack.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20.0),
            pStack.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20.0),
            pStack.topAnchor.constraint(equalTo: topAnchor, constant: 20.0),
            pStack.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8.0),

            // no height constraint ...
            // let the guageSection view height determine the stack view height
            //      guageSection has 10-pt tall view and multi-line capable label

            ])

    }

    override func layoutSubviews() {
        super.layoutSubviews()

        pStack.spacing = 2

    }
}

class GuageTestViewController: UIViewController {

    var gView = GuageView()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = UIColor(red: 31.0 / 255.0, green: 46.0 / 255.0, blue: 61.0 / 255.0, alpha: 1.0)

        view.addSubview(gView)
        gView.translatesAutoresizingMaskIntoConstraints = false

        // constrain the view to leading and trailing, and 40-pts from the top
        NSLayoutConstraint.activate([

            gView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 0.0),
            gView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: 0.0),
            gView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40.0),

            // no height constraint ...
            // let the GuageView's content determine the height

            ])

    }

}