Правильный выбор выравнивания и распределения для Horizontal StackView
Ниже приведен скриншот, показывающий дизайн, который я хочу реализовать.
Для этого я использую вертикальное представление стека, которое включает в себя четыре других горизонтальных представления стека. Затем каждое горизонтальное представление стека включает изображение и метку, как показано ниже.
Я установил alignment горизонтальных видов стека fill и попытался изменить Distribution. Однако я не могу получить желаемый результат.
Какая комбинация alignment/distribution может дать желаемый эффект?
Или мне следует исключить горизонтальные представления стека и заполнить представления внутри вертикального представления стека?
Что вы получаете сейчас? Опубликовать скриншот
Ответы 2
Вы можете сделать это с помощью tableView , но если у вас есть несколько элементов,
установка интервала для основного стека, и каждый внутренний стек должен давать необходимое дополнение
для полного просмотра проверьте демо
https://github.com/ShKhan9/stackV
Решение работает, но мне интересно, если мы устанавливаем ширину и высоту изображения, не предотвращает ли это масштабирование изображения (1x, 2x, 3x изображения) для устройств разного размера?
нет, это не помешает, и вы можете увеличить эту ширину/высоту
Следуйте шагам,
1. Добавьте vertical stackView с top, leading and trailing constraints к view.
Alignment - Fill
Distribution - Fill
Spacing - 20
2. Добавьте 1 horizontal stackView к vertical stackView
Alignment - Fill
Distribution - Fill
Spacing - 20
3. Добавьте imageView к height and width constraints set to 30 в приведенном выше horizontal stackView.
4. Дублируйте horizontal stackView в vertical stackView столько раз, сколько вам нужно.
Можно ли это сделать без определения высоты и ширины изображения (шаг 3) [см. мой комментарий под ответом Sh_Khan]? И шаг 4, похоже, не требуется.
Если у вас изображение небольшого размера, вам это не понадобится. Установка для contentMode imageView значения scaleAspectFit будет работать. И я Сент-4 не понадобится. Добавил, что по ошибке.
Можете ли вы опубликовать результат, который вы получаете? Вы также можете попробовать вертикальный стек для всех значков и вертикальный стек для всех меток, оба внутри горизонтального стека.