Как определить NSLayoutConstraint для правильного выравнивания в представлении стека? - PullRequest
Новая
       12

Как определить NSLayoutConstraint для правильного выравнивания в представлении стека?

0 голосов
/ 11 апреля 2019

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

Первый вид стека является вертикальным и содержит X горизонтальных представлений стека. Каждый из горизонтальных стековых представлений содержит UIImageView и два UILabel с.

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

Весь пользовательский интерфейс генерируется в коде, в данном случае C #, но я не думаю, что сложно конвертировать код Swift в C #. Прочитав немного о пользовательском интерфейсе iOS, я думаю, что смогу решить эту проблему с помощью NSLayoutConstraint, но я не знаю, как его использовать - мои текущие попытки всегда заканчиваются исключением.

Вот как я сейчас устанавливаю ограничение: 

dataStack.Constraints.Append(NSLayoutConstraint.Create(percentageLabel, NSLayoutAttribute.Trailing, NSLayoutRelation.Equal, dataStack, NSLayoutAttribute.Leading, 1, 0));

Edit: Вот как это выглядит в настоящее время: https://puu.sh/Ddlrx/ab36d7c864.png, но процент должен быть выровнен по правому краю, чтобы каждая строка заканчивалась в одном и том же месте.

И это мой текущий код, который генерирует пользовательский интерфейс: https://pastebin.com/pvMTGx0U

Ограничения в текущем коде - это копия 1: 1 работающей реализации в XCode Designer ... Я не понимаю, почему это не будет работать в моем виджете. : /

1 Ответ

0 голосов
/ 12 апреля 2019

Добавление вертикального стека с помощью 

stackView.alignment = .fill
stackView.distribution = .fillEqually
stackView.spacing = 2

Добавить ограничения сверху, снизу, сверху, снизу. Не добавляйте ограничение по высоте. Он будет рассчитан из подпредставлений.

Далее добавьте n горизонтальных стеков как упорядоченные подпредставления с помощью 

stackView.alignment = .center
stackView.distribution = .fillProportionally
stavkView.spacing = 2

Теперь добавьте представление изображения и две метки в каждом горизонтальном стековом изображении.

Не добавляйте начальные, конечные, верхние, нижние ограничения к этим изображениям и меткам.

Добавить ограничение ширины и высоты для каждого вида изображения

Назначить равную ширину lbl1 и lbl2 

lbl1.widthAnchor.constraint(equalTo: lbl2.widthAnchor).isActive = true

Изменить lbl2 textAlignemnt на .right

lbl2.textAlignment = .right

Теперь вы получите это

enter image description here

OR

Вместо добавления равных с lbl1 и lbl2

установить приоритет объятия контента для lbl2 

lbl2.setContentHuggingPriority(.defaultHigh, for: .horizontal)

Теперь ширина lbl2 будет уменьшаться, чтобы соответствовать его тексту. lbl1 примет оставшуюся ширину

...