具有按比例填充的子视图和内在宽度的iOS StackView不符合预期

Question

在这篇文章之后，我试图在StackViews上进行比例调整。

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

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

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

码：

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)

我尝试过使用translatesAutoResizingMaskIntoConstraints属性和其他一些东西，但似乎没有任何改变这种行为。

如果有人在正确方向的一个好点之前看到这种行为将非常感激。

Answer 1

我不知道这是否是一个“错误”，但是......看来UIStackView与.fillProportionally及其初始布局计算存在问题。

如果.spacing是0（零），.fillProportionally似乎有记录。如果.spacing非零，我们会看到问题。

所以，试试这个......用0的间距初始化你的堆栈视图，然后：

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

当然，您需要引用guageWrapper，因此将其创建为类级别的var。

---

编辑：

我用堆栈视图作为自定义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

            ])

    }

}