Центрирование UILabel и UIImage в UIView с программными ограничениями

Question

Я пытаюсь создать такой интерфейс:

Однако сейчас мой код генерирует еще один такой:

По сути, стратегия состоит в том, чтобы создать центральную функцию UIView, которая устанавливает объекты в виде цепочки, а затем создает пустые UIViews для их левого и правого полей одинакового максимального размера.

Как вы можете видеть, а не ожидаемый результат, контент выдвигается как можно дальше вправо.Любая подсказка, как я могу это исправить?

Может показаться, что правильное представление вообще не расширяется.Я установил их фоновые цвета на красный, и вы могли ясно видеть, что левый вид расширен, но правый вид не был виден.

Обратите внимание, что текст имеет чрезвычайно переменную длину, поэтому никакие константы здесь не будут работать хорошо.

func setupUI() {
    let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        superView.addSubview(label)
        label.text = "Text"
        label.font = UIFont(name: "", size: 13)
        label.textAlignment = .center
        label.topAnchor.constraint(equalTo: superView.topAnchor, constant: -6).isActive = true
        label.setNeedsLayout()
        label.invalidateIntrinsicContentSize()

        let image = UIImageView(image: UIImage(named: "chevron.png"))
        image.translatesAutoresizingMaskIntoConstraints = false
        superView.addSubview(image)
        image.widthAnchor.constraint(lessThanOrEqualToConstant: 20).isActive = true
        image.heightAnchor.constraint(lessThanOrEqualToConstant: 20).isActive = true
        image.contentMode = UIViewContentMode.scaleAspectFit
        image.centerYAnchor.constraint(equalTo: label.centerYAnchor).isActive = true

        center(objects: [label, image], parent: superView, debug: true)
}

func center(objects: [UIView], parent: UIView, debug: Bool = false) {
    let sl = UIView()
    sl.translatesAutoresizingMaskIntoConstraints = false
    parent.addSubview(sl)

    let sr = UIView()
    sr.translatesAutoresizingMaskIntoConstraints = false
    parent.addSubview(sr)


    // Grow as much as you can 
    sl.widthAnchor.constraint(greaterThanOrEqualToConstant: 0).isActive = true
    sr.widthAnchor.constraint(greaterThanOrEqualToConstant: 0).isActive = true


    // Stay on the same row as them
    sl.centerYAnchor.constraint(equalTo: objects.first!.centerYAnchor).isActive = true
    sr.centerYAnchor.constraint(equalTo: objects.last!.centerYAnchor).isActive = true


    // Set their height correctly
    sl.heightAnchor.constraint(equalTo: objects.first!.heightAnchor).isActive = true
    sr.heightAnchor.constraint(equalTo: objects.last!.heightAnchor).isActive = true


    // Set them to hook into parent
    sl.leadingAnchor.constraint(equalTo: parent.leadingAnchor).isActive = true
    sr.trailingAnchor.constraint(equalTo: parent.trailingAnchor).isActive = true

    // Get them to re-size (this seems to have no effect)
    sr.setContentCompressionResistancePriority(UILayoutPriority.defaultHigh, for: UILayoutConstraintAxis.horizontal)
    sl.setContentCompressionResistancePriority(UILayoutPriority.defaultHigh, for: UILayoutConstraintAxis.horizontal)

    // Hook in the first and last object
    objects.first!.leadingAnchor.constraint(equalTo: sl.trailingAnchor).isActive = true
    objects.last!.trailingAnchor.constraint(equalTo: sr.leadingAnchor).isActive = true


    // Chain the objects together
    for i in 1..<objects.count {
        objects[i].leadingAnchor.constraint(equalTo: objects[i-1].trailingAnchor).isActive = true
    }
}

Answer 1

Я бы предпочел обернуть метку и изображение в UIStackView и расположить его по центру в родительском представлении.

func center(objects: [UIView], parent: UIView, debug: Bool = false) {
    let stackView = UIStackView(arrangedSubviews: objects)
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.alignment = .center
    parent.addSubview(stackView)

    NSLayoutConstraint.activate([
      stackView.centerXAnchor.constraint(equalTo: parent.centerXAnchor),
      stackView.centerYAnchor.constraint(equalTo: parent.centerYAnchor),
      stackView.widthAnchor.constraint(lessThanOrEqualTo: parent.widthAnchor),
      stackView.heightAnchor.constraint(lessThanOrEqualTo: parent.heightAnchor)
    ])
}