Горизонтальный UIStackView - фиксировать размер центрального элемента и растягивать другие элементы

Question

Я пытаюсь создать макет, подобный следующему:

По сути, мне нужен ярлык or, чтобы оставаться в середине и заниматьфиксированная ширина и линии, растягивающиеся по краям экрана.

Вот что я сделал в XIB:

• создал горизонтальный вид UIStackview с выравниванием center.
• Установите ограничение высоты просмотра стека на 20, распределение на fill.
• добавлено два элемента UIView (для серых линий), с ограничением высоты на 5.
• Добавлена ​​UILabel между двумя UIView элементами выше.
• Добавлено больше ограничений:
• левые UIView ведут с 0 из суперпредставления и следуют с 5к средней метке
• справа UIView ведет с 4 от средней метки и тянется с 0 к суперпредставлению.

Отлично смотрится в Интерфейсном конструкторе, но на экранах разных размеровпейзажи, я нахожу среднюю метку "or", чтобы растянуть и выброситьлевый и правый UIViews, чтобы восполнить доступное пространство, которое кажется правым:

Если я установлю ограничение ширины 20 на средней метке, правый UIView растянетсянеравномерно, как это:

Я знаю, что ТЭЦ элементов здесь в какой-то степени имеет значение, я даже пытался настроить ТЭЦ следующим образом:

• CHP средней метки составляет 251

• CHP левой и правой UIViews составляет 250.

Thisвсе еще оставляет меня с неровным растяжением правого UIView.

Что я делаю неправильно?Высоко ценится!Большое спасибо!

Answer 1

Вам нужно установить widthConstraint на UIStackView и сделать leftView.widthAnchor = rightView.widthAnchor.В качестве альтернативы вы можете установить ограничения leading и trailing для UIStackView, а затем установить leftView.widthAnchor = rightView.widthAnchor.

Ниже приведен пример кода, который вы можете попробовать в Playgrounds

    let leftView = UIView()
    leftView.translatesAutoresizingMaskIntoConstraints = false
    leftView.backgroundColor = .lightGray

    let rightView = UIView()
    rightView.translatesAutoresizingMaskIntoConstraints = false
    rightView.backgroundColor = .lightGray

    let orLabel = UILabel()
    orLabel.translatesAutoresizingMaskIntoConstraints = false
    orLabel.textColor = .black
    orLabel.text = "or"

    let stackView = UIStackView(arrangedSubviews: [leftView, orLabel,  rightView])
    stackView.alignment = .center
    stackView.distribution = .fill
    stackView.axis = .horizontal
    stackView.spacing = 5
    stackView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(stackView)

    stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    stackView.heightAnchor.constraint(equalToConstant: 20).isActive = true
    stackView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true

    leftView.heightAnchor.constraint(equalToConstant: 5).isActive = true
    rightView.heightAnchor.constraint(equalToConstant: 5).isActive = true
    leftView.widthAnchor.constraint(equalTo: rightView.widthAnchor).isActive = true

Answer 2

Не устанавливайте никаких начальных или конечных ограничений ...

Установите ограничение ширины "правого обзора" равным ширине "левого обзора" и присвойте своему стековому виду значение spacing, равное 4 или 5.

Раскадровка:

Портрет:

Пейзаж: