Обзор UIStackView
Distribution types
Каждый раз, сталкиваясь с новым инструментом в своей жизни, полезно протестировать его, чтобы увидеть, на что он способен. В этой статье будет рассмотрен такой инструмент, как UIStackView, описаны различные параметры распределения и их поведение. Таким образом, в следующий раз, когда будет необходимо решить задачу с макетом, знание возможностей коллекции UIStackView может значительно упростить разработку пользовательских интерфейсов.
Настройки распределения (Distribution) в UIStackView можно найти среди параметров, перечисленных в представлении стека.
Настройки распределения (Distribution) в UIStackView можно найти среди параметров, перечисленных в представлении стека.
Fill
При создании нового UIStackView, distribution Fill является значением по умолчанию. В примере используются UITextFields и UIImageViews, сгруппированные в горизонтальный UIStackView. Объекты UITextFields не имеют размера контента intrinsicСontentSize, и практически полностью сворачиваются, если внутри них нет текста. Это поможет продемонстрировать, какой эффект имеет тип распределения Fill.
Когда элементы размещаются внутри UIStackView с параметром Fill в качестве типа распределения, они все, кроме одного, сохранятся в их первоначальном размере. А тот элемент, что имеет наименьший горизонтальный приоритет (Content Hugging Priority - CHP), будет растянут до полного заполнения пространства. Для примера в качестве содержимого одного из UITextFields добавлено восемь пробелов, чтобы можно было сравнить размер и поведение каждого из них.
Если все элементы имеют один и тот же CHP, Xcode будет выдавать ошибку неоднозначности макета.
Когда элементы размещаются внутри UIStackView с параметром Fill в качестве типа распределения, они все, кроме одного, сохранятся в их первоначальном размере. А тот элемент, что имеет наименьший горизонтальный приоритет (Content Hugging Priority - CHP), будет растянут до полного заполнения пространства. Для примера в качестве содержимого одного из UITextFields добавлено восемь пробелов, чтобы можно было сравнить размер и поведение каждого из них.
Если все элементы имеют один и тот же CHP, Xcode будет выдавать ошибку неоднозначности макета.
Fill Equally
При использовании этого типа каждый элемент UIStackView будет иметь одинаковый размер. По возможности будет использовано всё пространство между элементами. Снова для примера в содержимое элементов UITextFields было добавлено восемь пробелов, чтобы наглядно оценить поведение каждого из них.
При этом типе распределения CHP значения не имеет, поскольку все элементы имеют одинаковый размер.
При этом типе распределения CHP значения не имеет, поскольку все элементы имеют одинаковый размер.
Fill Proportionally
Сложно заметить эффект, который оказывает этот тип распределения, пока вы не поиграетесь с телефонами разных размеров и ориентаций. UIStackView гарантирует, что элементы сохранят одинаковые пропорции друг относительно друга по мере увеличения и уменьшения вашего макета. В следующем примере для лучшей наглядности вместо UITextFields используются UILabels.
В отличие от двух предыдущих типов, распределение Fill Proportionally требует, чтобы элементы имели собственный размер содержимого. В то время как типы распределения Fill и Fill Equally сообщают дочерним элементам, насколько большими они должны быть, с Fill Proportionally всё наоборот (при условии, что достаточно места для того, чтобы все ваши элементы имели свой собственный размер).
В отличие от двух предыдущих типов, распределение Fill Proportionally требует, чтобы элементы имели собственный размер содержимого. В то время как типы распределения Fill и Fill Equally сообщают дочерним элементам, насколько большими они должны быть, с Fill Proportionally всё наоборот (при условии, что достаточно места для того, чтобы все ваши элементы имели свой собственный размер).
Ниже можно увидеть, как выглядит распределение для портретной и альбомной ориентации. Пропорции изображений и лэйблов сохраняются вне зависимости от размеров макета.
Equal Spacing
Этот тип распределения поддерживает одинаковое расстояние между элементами, не изменяя при этом их размер. На изображении снизу для наглядности это отображено красными линиями, обозначающими равный размер расстояния между объектами.
Equal Centering
При этом типе распределения центры элементов будут располагаться на одинаковом расстоянии друг от друга. Чтобы проще разобраться, как работает этот тип распределения, ниже представлена иллюстрация. По центру каждого элемента расположены красные вертикальные линии, а расстояние между ними разнесено одинаково.
Таким образом при использовании UIStackView доступно пять типов распределения. Они ведут себя по-разному: в то время как некоторые строго контролируют размер своих дочерних элементов, другие позволяют им быть настолько большими, насколько это необходимо, и имеют возможность распределить их различными способами.
Перевод статьи Exploring UIStackView Distribution Types