UIStackView使用equalCentering进行分发

Question

我以编程方式创建了UIStackView并添加了2个视图，每个视图有2个子视图。这是我的示例代码：

let sv = UIStackView()
sv.axis = .horizontal
sv.alignment = .center
sv.spacing = Config.Dimensions.horizontalSpacing
sv.distribution = .equalCentering
sv.translatesAutoresizingMaskIntoConstraints = false

let viewCountStudent = UIView()
viewCountStudent.addSubview(studentCount)
viewCountStudent.addSubview(labelStudent)
studentCount.topAnchor.constraint(equalTo: viewCountStudent.topAnchor).isActive = true
studentCount.leftAnchor.constraint(equalTo: viewCountStudent.leftAnchor).isActive = true
studentCount.bottomAnchor.constraint(equalTo: viewCountStudent.bottomAnchor).isActive = true
labelStudent.topAnchor.constraint(equalTo: viewCountStudent.topAnchor).isActive = true
labelStudent.leftAnchor.constraint(equalTo: studentCount.rightAnchor, constant: 8.0).isActive = true
labelStudent.rightAnchor.constraint(equalTo: viewCountStudent.rightAnchor).isActive = true
labelStudent.bottomAnchor.constraint(equalTo: viewCountStudent.bottomAnchor).isActive = true

let viewCountLesson = UIView()
viewCountLesson.addSubview(lessonCount)
viewCountLesson.addSubview(labelLesson)
lessonCount.leftAnchor.constraint(equalTo: viewCountLesson.leftAnchor).isActive = true
lessonCount.topAnchor.constraint(equalTo: viewCountLesson.topAnchor).isActive = true
lessonCount.bottomAnchor.constraint(equalTo: viewCountLesson.bottomAnchor).isActive = true
labelLesson.leftAnchor.constraint(equalTo: lessonCount.rightAnchor, constant: 8.0).isActive = true
labelLesson.rightAnchor.constraint(equalTo: viewCountLesson.rightAnchor).isActive = true
labelLesson.topAnchor.constraint(equalTo: viewCountLesson.topAnchor).isActive = true
labelLesson.bottomAnchor.constraint(equalTo: viewCountLesson.bottomAnchor).isActive = true

sv.addArrangedSubview(viewCountLesson)
sv.addArrangedSubview(viewCountStudent)

sv.topAnchor.constraint(equalTo: divider.bottomAnchor, constant: 8.0).isActive = true
sv.leftAnchor.constraint(equalTo: divider.leftAnchor, constant: 16.0).isActive = true
sv.rightAnchor.constraint(equalTo: divider.rightAnchor, constant: -16.0).isActive = true
sv.bottomAnchor.constraint(equalTo: guide.bottomAnchor, constant: -8.0).isActive = true

addSubview(sv)

它给出的布局是这样的：

上面是水平条，下面是StackView。我想知道为什么两个视图之间的差距不是由堆栈视图平均分配的。我试图用间距均匀分布它们。任何的想法？

Answer 1

这可能有助于您理解......

三个绿色标签的每个“行”是一个水平堆栈视图，其中Spacing: 8和Distribution设置为：

• 填
• 同样填写
• 按比例填写
• 平等居中
• 等间距

正如您所看到的，使用Distribution: Equal Centering，堆栈视图会排列其子视图，以便它们的中心间隔相等。

您可能想要的是两侧和中间的间距相等：

要获得该布局，请使用Distribution: Fill并在堆栈中添加一个空的“spacer”视图，这样您就拥有：

spacer1 - viewCountLesson - spacer2 - viewCountStudent - spacer3

然后将spacer2的宽度设置为等于spacer1，spacer3的宽度等于spacer1。

以下是用于创建该代码的代码：

class NewStackViewController: UIViewController {

    let studentCount: UILabel = {
        let v = UILabel()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .yellow
        v.text = "2"
        return v
    }()

    let lessonCount: UILabel = {
        let v = UILabel()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .yellow
        v.text = "1"
        return v
    }()

    let labelStudent: UILabel = {
        let v = UILabel()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .cyan
        v.text = "Students"
        return v
    }()

    let labelLesson: UILabel = {
        let v = UILabel()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .cyan
        v.text = "Lesson"
        return v
    }()

    let divider: UIView = {
        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .gray
        return v
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(divider)
        NSLayoutConstraint.activate([
            divider.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20.0),
            divider.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20.0),
            divider.heightAnchor.constraint(equalToConstant: 2.0),
            divider.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0.0),
            ])

        let sv = UIStackView()
        sv.axis = .horizontal
        sv.alignment = .fill
        sv.spacing = 0 //Config.Dimensions.horizontalSpacing
        sv.distribution = .fill
        sv.translatesAutoresizingMaskIntoConstraints = false

        view.addSubview(sv)
        NSLayoutConstraint.activate([
            sv.leadingAnchor.constraint(equalTo: divider.leadingAnchor, constant: 16.0),
            sv.trailingAnchor.constraint(equalTo: divider.trailingAnchor, constant: -16.0),
            sv.topAnchor.constraint(equalTo: divider.bottomAnchor, constant: 8.0),
            ])

        let viewCountStudent = UIView()
        viewCountStudent.addSubview(studentCount)
        viewCountStudent.addSubview(labelStudent)
        studentCount.topAnchor.constraint(equalTo: viewCountStudent.topAnchor).isActive = true
        studentCount.leftAnchor.constraint(equalTo: viewCountStudent.leftAnchor).isActive = true
        studentCount.bottomAnchor.constraint(equalTo: viewCountStudent.bottomAnchor).isActive = true
        labelStudent.topAnchor.constraint(equalTo: viewCountStudent.topAnchor).isActive = true
        labelStudent.leftAnchor.constraint(equalTo: studentCount.rightAnchor, constant: 8.0).isActive = true
        labelStudent.rightAnchor.constraint(equalTo: viewCountStudent.rightAnchor).isActive = true
        labelStudent.bottomAnchor.constraint(equalTo: viewCountStudent.bottomAnchor).isActive = true

        let viewCountLesson = UIView()
        viewCountLesson.addSubview(lessonCount)
        viewCountLesson.addSubview(labelLesson)
        lessonCount.leftAnchor.constraint(equalTo: viewCountLesson.leftAnchor).isActive = true
        lessonCount.topAnchor.constraint(equalTo: viewCountLesson.topAnchor).isActive = true
        lessonCount.bottomAnchor.constraint(equalTo: viewCountLesson.bottomAnchor).isActive = true
        labelLesson.leftAnchor.constraint(equalTo: lessonCount.rightAnchor, constant: 8.0).isActive = true
        labelLesson.rightAnchor.constraint(equalTo: viewCountLesson.rightAnchor).isActive = true
        labelLesson.topAnchor.constraint(equalTo: viewCountLesson.topAnchor).isActive = true
        labelLesson.bottomAnchor.constraint(equalTo: viewCountLesson.bottomAnchor).isActive = true

        let sp1 = spacerView()
        let sp2 = spacerView()
        let sp3 = spacerView()

        sv.addArrangedSubview(sp1)
        sv.addArrangedSubview(viewCountLesson)
        sv.addArrangedSubview(sp2)
        sv.addArrangedSubview(viewCountStudent)
        sv.addArrangedSubview(sp3)

        NSLayoutConstraint.activate([
            sp2.widthAnchor.constraint(equalTo: sp1.widthAnchor, multiplier: 1.0),
            sp3.widthAnchor.constraint(equalTo: sp1.widthAnchor, multiplier: 1.0),
            ])

        [sp1, sp2, sp3, viewCountLesson, viewCountStudent, studentCount, labelStudent, lessonCount, labelLesson].forEach {
            // set borderWidth to 1 to add borders to labels and views so we can see them
            $0.layer.borderWidth = 0
            $0.layer.borderColor = UIColor.lightGray.cgColor
            // un-comment next line to set backgrounds to clear
            //$0.backgroundColor = .clear
        }

    }

    func spacerView() -> UIView {

        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .green
        return v

    }

}