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

Question

Я новичок в swift и сейчас пытаюсь создать поле ввода. Моя проблема в том, что я хотел бы иметь ярлык, как показано на рисунке:

Пока что я работаю со StackViews: один вертикальный для полей ввода и три горизонтальные для заголовка и пользовательского ввода. Мой код пока выглядит следующим образом:

// Initialize outter stackview
    let feedbackOutterSV = UIStackView()
    view.addSubview(feedbackOutterSV)
    feedbackOutterSV.translatesAutoresizingMaskIntoConstraints = false
    feedbackOutterSV.axis = NSLayoutConstraint.Axis.vertical
    NSLayoutConstraint.activate([
        feedbackOutterSV.topAnchor.constraint(equalTo: tutorialText.bottomAnchor, constant: 10),
        feedbackOutterSV.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
        feedbackOutterSV.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
        feedbackOutterSV.heightAnchor.constraint(equalToConstant: 300)
    ])

    // Initalize inner stackview for title
    let feedbackInnerSVTitle = UIStackView()
    feedbackOutterSV.addArrangedSubview(feedbackInnerSVTitle)
    feedbackInnerSVTitle.translatesAutoresizingMaskIntoConstraints = false
    feedbackInnerSVTitle.axis = .horizontal
    feedbackInnerSVTitle.alignment = .fill
    feedbackInnerSVTitle.distribution = .fillProportionally

    let titleLabel = UILabel()
    feedbackInnerSVTitle.addArrangedSubview(titleLabel)
    titleLabel.translatesAutoresizingMaskIntoConstraints = false
    titleLabel.text = "feedback.input.title".localize()
    titleLabel.font = UIFont.preferredFont(forTextStyle: .body)
    titleLabel.textColor = .gray

    let titleTextView = UITextView()
    feedbackInnerSVTitle.addArrangedSubview(titleTextView)
    titleTextView.translatesAutoresizingMaskIntoConstraints = false
    titleTextView.font = UIFont.preferredFont(forTextStyle: .body)
    titleTextView.isScrollEnabled = false

    NSLayoutConstraint.activate([
        titleLabel.widthAnchor.constraint(equalToConstant: 39)
    ])

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

Может кто-нибудь сказать мне, как изменить мой код, поэтому мне не нужно постоянное ограничение, но ширина метки регулируется по длине слова?

Заранее спасибо

Answer 1

Пара вещей ...

Я предполагаю, что вы хотите, чтобы "метка заголовка" была выровнена по верху с вашим textView, поэтому измените .fill на .top:

    feedbackInnerSVTitle.alignment = .top // .fill

и не используйте .fillProportionally

    feedbackInnerSVTitle.distribution = .fill // .fillProportionally

Теперь вы, скорее всего, увидите, что каждый элемент занимает 50% ширины, поэтому измените приоритет content hugging для метки заголовка:

    titleLabel.setContentHuggingPriority(.required, for: .horizontal)

и, наконец, не установить ограничение ширины для метки заголовка:

//      NSLayoutConstraint.activate([
//          titleLabel.widthAnchor.constraint(equalToConstant: 39)
//          ])

Результат:

Answer 2

В вашем коде width constraint на titleLabel должно быть установлено на titleLabel.intrinsicContentSize.width

NSLayoutConstraint.activate([
   titleLabel.widthAnchor.constraint(equalToConstant: titleLabel.intrinsicContentSize.width)
])

Кроме того, установите distribution из feedbackInnerSVTitle как .fill

feedbackInnerSVTitle.distribution = .fill

Answer 3

Я думаю, вы могли бы использовать NSLayoutConstraint.activate([ titleLabel.widthAnchor.constraint(greaterThanOrEqualToConstant: 0)], чтобы позволить ему расти в зависимости от содержимого