Как использовать автоматическую разметку, чтобы получить следующую разметку

Question

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

Его упорядоченные подпредставления состоят из 5 горизонтальных UIStackView с каждый изкоторые имеют 3 UILabel с в качестве упорядоченных подпредставлений.

Для каждого из горизонтальных UIStackView текст первого UILabel является заголовком, текст второго UILabel является двоеточиеми текст третьего UILabel - это информация, показанная на следующем рисунке

Все UILabel имеют numberOfLines= 0, чтобы они были многострочными.

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

1. Все двоеточия UILabel sвыровненный по вертикали
2. Ширина информации UILabel s составляет не менее 20% родительского представления
3. Ширина информации UILabel s составляет не более 60% родительского просмотра
4. Если ширина всей информации UILabel s меньше 60% родительского представления (см. 3), затем он должен сузиться до ширины самой широкой информации UILabel.

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

Однако,Я не понимаю, как создать ограничение для удовлетворения 4-го условия.Я попытался увеличить «Приоритет содержания контента», но он сужает метку до 20% от родительского представления (см. 2).

Может кто-нибудь указать, как добиться этого макета?

Answer 1

Это значительно сложнее, чем кажется на поверхности.

Столбец «Информация» должен оцениваться для минимальной / максимальной ширины и переноса слов, а столбец «Заголовок» должен оцениваться для переноса слов на основе переменной ширины столбцов «Информация» ... и метки "Info" должны соответствовать ширине на основе самого широкого переносимого (или нет) текста.

Это много для автоматической разметки.

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

Итак, мы можем закончить с этим:

и текст метки заголовка больше не выровнен по вертикали с верхней частью метки.

Лучшее, что я могу придумать, это переопределить viewDidLayoutSubviews(), используя счетчик, который заставляет автоматическое расположение сначала вычислять информационные метки, а затем метки заголовков.

Что касается настроек ограничения ...

Для заголовков заголовков ничего особенного не нужно - просто установите количество строк в ноль, чтобы разрешить перенос слов.

Для меток «Двоеточие» не нужны ограничения, но им нужно, чтобы для горизонтального содержимого и сопротивления сжатию было установлено значение 1000 (обязательно), поскольку мы не хотим, чтобы они растягивались или сжимались.

Для надписей Info необходимо:

• Сопротивление сжатию горизонтального содержимого: 1000
• Горизонтальное содержание содержимого: 999
• Ширина:> = его ширина в стеке с множителем 0,2
• Ширина: <= его ширина стека с множителем 0,6 </li>
• Ширина: = его ширина в стеке с множителем 0,2 и приоритетом: 999

и, наконец, bottom 4 Для информационных меток необходимо ограничение ширины, равное top Info label.

Горизонтальные стеки, составляющие 5 "строк", должны быть установлены на:

• Выравнивание: Top
• Распределение: заполнить
• Интервал: 8 (горизонтальный интервал между "столбцами")

Вертикальный вид стека, содержащий 5 «строк», должен быть установлен на:

• Выравнивание: заполнить
• Распределение: заполнить
• Интервал: 10 (интервал по вертикали между «рядами»)

Я запустил проект на GitHub, который демонстрирует макет - он имеет 10 различных «вариантов» содержимого меток, чтобы показать, как работает определение размера: https://github.com/DonMag/MutlilineVarWidthLabelColumns

Answer 2

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

1. дать max width до Heading label с отношением экрана.
2. дать fix width до colon label
3. дать leading, trailing, top, bottom до info label
4. изменить Горизонтальная content hugging priority информационной метки на 252 .

, пожалуйста, проверьте ниже изображения для более подробной информации.

Фактическая структура моего примера

Ограничения для заголовка

Ограничения для информационного ярлыка

выход

Если вам нужна помощь, то почувствуйтесвободно спрашивать снова.