Распределение UIStackView с равным Центрированием

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 и распределением, установленным на:

• Fill
• равное заполнение
• пропорциональное заполнение
• равное центрирование
• равное расстояние

Как вы можете видеть, с 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

    }

}