ios - 2D UiLabel 网格与 UIStackView 最后一列未填充空间。 UIStackView 是否尊重 ContentHuggingPriority？

Question

我正在尝试制作一个比使用 UICollectionView 更容易制作网格的 UIControl 来执行某些小任务。我正在使用 UIStackViews 的 UIStackView。那是垂直堆栈(列)的水平容器。问题是我需要一列作为扩展列来填充额外的空间。 UIStackView 是否遵守 setContentHuggingPriority 本身的设置？ ，在本例中是我的垂直列之一。

我已经添加了一个 Playground 来重现这个问题。

Link to visual showing the UILabel Grid where only one column should fill horizontally

这是 Playground 代码:

import Foundation
import UIKit
import PlaygroundSupport

class ViewController : UIViewController {
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        self.view = view

        let labMatrix = LabelMatrix( rows: 4, columns: 4)

        self.view.addSubview( labMatrix)

        labMatrix.labMatrix[0][0].text = "Test"
        labMatrix.frame = CGRect(x: 0, y: 0, width: 360, height: 520)
    }
}

class LabelMatrix : UIStackView {
    let rowCount : Int
    let colCount : Int

    var labMatrix = [[UILabel]]()

    required init(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    init ( rows: Int , columns : Int ) {
        rowCount = rows
        colCount = columns
        super.init(frame:.zero)
        create()
    }

    func create() {
        var columns : [UIStackView] = [UIStackView]()
        var rows : [UILabel] = [UILabel]()

        for acol in 0..<colCount {
            rows.removeAll()

            for arow in 0..<rowCount {
                let lab = UILabel()
                //                lab.translatesAutoresizingMaskIntoConstraints = false
                rows.append( lab )

                let str = "(\(arow),\(acol))"
                lab.text = str

                if !(arow%2 == 0) {
                    lab.backgroundColor = .lightGray
                } else {
                    lab.backgroundColor = .yellow
                }

                if arow == rowCount-1 {
                    print("This should make last row stretch vertically to fill any extra vertical space")
                    //                    lab.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 20), for: .vertical)
                    lab.setContentHuggingPriority(UILayoutPriority(rawValue: 20), for:.vertical)
                }
            }

            labMatrix.append( rows )
            let curCol = UIStackView(arrangedSubviews: rows)
            columns.append( curCol )

            curCol.axis = .vertical
            curCol.distribution = .fill
            curCol.spacing = 2
            curCol.alignment = .center

            if acol == colCount-1 {
                print("TODO Fix This. It should make only the last column(e.g. uistackview) strech to fill extra space")
                curCol.setContentHuggingPriority(UILayoutPriority(rawValue: 20), for:.horizontal)
            }
        }

        for col in columns {
            self.addArrangedSubview( col )
        }

        self.axis = .horizontal
        self.distribution = .fill
        self.alignment = .top
        self.spacing = 4
    }
}

PlaygroundPage.current.liveView = ViewController()

Answer 1

堆栈 View 的行为在很多方面与其他 View 略有不同 - 压缩和拥抱是两个值得注意的。

堆栈 View 的主要功能是排列其 subview 。当一个或多个 subview 具有自己的大小/压缩/拥抱属性时，堆栈 View 的布局将(部分)由其 subview 决定。

要展开最后一列(和最后一行)，需要填充分布，并且该列/行中的 View (标签)需要修改其拥抱优先级。

您可以获得这个 Playground 结果:

通过如下修改您的代码(注释应该清晰):

import Foundation
import UIKit
import PlaygroundSupport

class ViewController : UIViewController {
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        self.view = view

        let labMatrix = LabelMatrix( rows: 4, columns: 4)

        self.view.addSubview( labMatrix)

        labMatrix.labMatrix[0][0].text = "Test"
        labMatrix.frame = CGRect(x: 0, y: 0, width: 360, height: 520)
    }
}

class LabelMatrix : UIStackView {
    let rowCount : Int
    let colCount : Int

    var labMatrix = [[UILabel]]()

    required init(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    init ( rows: Int , columns : Int ) {
        rowCount = rows
        colCount = columns
        super.init(frame:.zero)
        create()
    }

    func create() {
        var columns : [UIStackView] = [UIStackView]()
        var rows : [UILabel] = [UILabel]()

        for acol in 0..<colCount {
            rows.removeAll()

            for arow in 0..<rowCount {
                let lab = UILabel()
                rows.append( lab )

                let str = "(\(arow),\(acol))"
                lab.text = str

                // set the label text alignment to center
                lab.textAlignment = .center

                if !(arow%2 == 0) {
                    lab.backgroundColor = .lightGray
                } else {
                    lab.backgroundColor = .yellow
                }

                if acol == colCount-1 {
                    print("This will allow the last column to stretch horizontally")
                    lab.setContentHuggingPriority(UILayoutPriority(rawValue: 20), for:.horizontal)
                }

                if arow == rowCount-1 {
                    print("This will allow the bottom row stretch vertically")
                    lab.setContentHuggingPriority(UILayoutPriority(rawValue: 20), for:.vertical)
                }

            }

            labMatrix.append( rows )
            let curCol = UIStackView(arrangedSubviews: rows)
            columns.append( curCol )

            curCol.axis = .vertical
            curCol.distribution = .fill
            curCol.spacing = 2
            // .alignment should be .fill -- let the label center its own text
            curCol.alignment = .fill

            // not needed - hugging priority is controlled by the stack view's arranged subviews
            // if acol == colCount-1 {
            //  print("TODO Fix This. It should make only the last column(e.g. uistackview) strech to fill extra space")
            //  curCol.setContentHuggingPriority(UILayoutPriority(rawValue: 20), for:.horizontal)
            // }

        }

        for col in columns {
            self.addArrangedSubview( col )
        }

        self.axis = .horizontal
        self.distribution = .fill
        // .alignment needs to be .fill if you want the bottom row to expand vertically
        self.alignment = .fill
        self.spacing = 4
    }
}

PlaygroundPage.current.liveView = ViewController()