Установка текста метки вызывает проблемы с компоновкой стека

Question

Если я использую приведенный ниже пример кода на игровой площадке, все выглядит хорошо, пока я не попытаюсь установить свойство text для одной из меток.Я связал его с возможностью изменения значения перед добавлением стекового представления в UIView.Но если я изменю текстовое значение метки после добавления представления стека к родительскому представлению, то две метки в конечном итоге будут перекрываться (см. Изображения внизу).

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

import UIKit
import PlaygroundSupport

@IBDesignable
public final class TestHarness : UIView {

    fileprivate let nameLabel: UILabel = {
        let label = UILabel()
        //label.font = UIFont.systemFont( ofSize: 20, weight: UIFont.Weight.medium)
        label.textAlignment = .center
        label.textColor = #colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)
        label.text = "Person's Name"
        label.adjustsFontSizeToFitWidth = true
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    fileprivate let jobTitleLabel: UILabel = {
        let label = UILabel()
        //label.font = UIFont.systemFont( ofSize: 20, weight: UIFont.Weight.medium)
        label.textAlignment = .center
        label.textColor = #colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)
        label.text = "Job Title"
        label.adjustsFontSizeToFitWidth = true
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()


    fileprivate lazy var stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .vertical
        //stackView.distribution = .fill
        stackView.alignment = .center
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.addArrangedSubview(self.nameLabel)
        stackView.addArrangedSubview(self.jobTitleLabel)
        return stackView
    }()

    public required init?(coder: NSCoder) {
        super.init(coder: coder)
        initPhase2()
    }

    public override init(frame: CGRect) {
        super.init(frame: frame)
        initPhase2()
    }

    private func initPhase2() {

        layer.cornerRadius = 10
        layer.borderWidth = 2
        self.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)

        jobTitleLabel.backgroundColor = #colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1)
        // self.jobTitleLabel.text = "Developer" // <<-- Can set here no problem

        self.addSubview(stackView)
        // self.jobTitleLabel.text = "Developer" // << -- If I set this here, job title and name overlap

        NSLayoutConstraint.activate([
            {
                let constraint = stackView.topAnchor.constraint(greaterThanOrEqualTo: layoutMarginsGuide.topAnchor, constant: 8)
                constraint.priority = UILayoutPriority(750)
                return constraint
            }(),
            stackView.leftAnchor.constraint(equalTo: layoutMarginsGuide.leftAnchor, constant: 8),
            stackView.rightAnchor.constraint(equalTo: layoutMarginsGuide.rightAnchor, constant: -8),
            {
                let constraint = stackView.bottomAnchor.constraint(lessThanOrEqualTo: layoutMarginsGuide.bottomAnchor, constant: -8)
                constraint.priority = UILayoutPriority(750)
                return constraint
            }(),
            stackView.centerYAnchor.constraint(equalTo: layoutMarginsGuide.centerYAnchor)
        ])
    }

    @IBInspectable
    public var Name: String? {
        get{
            return self.nameLabel.text
        }
        set{
            self.nameLabel.text = newValue
        }
    }

    @IBInspectable
    public var JobTitle: String? {
        get{
            return self.jobTitleLabel.text
        }
        set{
            self.jobTitleLabel.text = newValue
        }
    }
}

let dimensions = (width: 200, height: 300)
let control = TestHarness(frame: CGRect(x: dimensions.width / 2, y: dimensions.height / 2, width: dimensions.width, height: dimensions.height))
// control.JobTitle = "Developer" // << -- If I set this here, job title and name overlap

let view = UIView(frame: control.frame.insetBy(dx: -100, dy: -100))
view.backgroundColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
view.addSubview(control)

PlaygroundPage.current.liveView = view

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

Вот так выглядит, если я изменю текст метки после добавления стекового представления к родительскому представлению.Название должности пересекается с меткой имени.

Answer 1

Ваш код выглядит хорошо, возможно, есть проблема с циклом рендеринга Playground, я создал проект Xcode и использовал ваш код, и он отлично работал в симуляторе без наложения:

    import UIKit

override func viewDidLoad() {
    super.viewDidLoad()
    let dimensions = (width: 200, height: 300)
    let control = TestHarness(frame: CGRect(x: dimensions.width / 2, y: dimensions.height / 2, width: dimensions.width, height: dimensions.height))

    control.JobTitle = "Developer b2.0" // << -- No overlap in simulator

    let contentView = UIView(frame: control.frame.insetBy(dx: -100, dy: -100))
    contentView.backgroundColor = #colorLiteral(red: 0.3098039329, green: 0.01568627544, blue: 0.1294117719, alpha: 1)
    contentView.addSubview(control)
    view.addSubview(contentView)
}