UIStackView - равномерно распределяет представления из центра

У меня есть UIStackView, внутри UIScrollView, чтобы показать динамически добавленные подсмотры горизонтально. Текущее решение начнет отображать элементы слева, я хотел бы начать распространять элементы из центра без изменения ширины и высоты подзонов. Как мне это сделать? Im также открыт для решений, которые не используют UIStackView. Таким образом, я мог бы поддерживать устройства < iOS9.

(Current)

(Ожидаемое)

Ответ 1

Короткий ответ:

Ограничения ScrollView

Leading >= 0, Trailing >= 0, Top >= 0, Bottom >= 0
Center X  and Center Y

Ограничения StackView

Leading = 0, Trailing = 0, Top = 0, Bottom = 0
StackView width = ScrollView width (priority low :250)
StackView height = ScrollView height

Длинный ответ

Во-первых, ваша структура хороша, мы имеем:

UIScrollView
     UIStackView (horizontal)
         Subviews

Итак, чтобы достичь цели, мы должны:

Центрировать UIScrollView
Задайте contentSize UIScrollView равным внутреннему контенту размер UIStackView

Вот как это сделать:

Шаг 1: Центрируйте рамку UIScrollView

CenterY и CenterX ограничения, используемые для центрирования кадра UIScrollView

Leading Space >= 0, Trailling Space >= 0, Top Space >= 0, Bottom Spac e >= 0 используются для предотвращения того, чтобы кадр UIScrollView превышал рамку родительского представления

Я использовал внутренний размер заполнителя, чтобы не показывать ошибки, связанные с contentSize UIScrollView (потому что у нас еще нет подпрограмм, поэтому contentSize).

Теперь рамка нашего UIScrollView будет ОК, переходим к следующему шагу:)

Шаг 2: добавьте горизонтальный UIStackView

Верхние, нижние, ведущие, трейлинг-ограничения используются для исправления Рамка UIStackView
Равная высота и равная ширина, используемые для расчета contentSize UIScrollView

PS. Любое изменение в кадре UIStackView, изменение contentSize в UIScrollView

Шаг 3: добавьте subviews

Поскольку мы используем Fill Distribution в UIStackView, все subviews должны иметь собственный размер содержимого (или ограничения высоты и ширины (не предпочтительны)). Например, если мы используем Fill Equally, то только один subview с внутренним размером содержимого (или ограничениями высоты и ширины (не предпочтительными)) достаточен, другой размер подзадач будет равен этому.

В качестве примера: я добавлю три ярлыка (пожалуйста, удалите собственный размер заполнителя UIScrollView)

Это работает!! нет, нет, еще не пытаюсь добавить четвертую и пять ярлыков:)

Почему?

Чтобы понять, мы вычислим кадр каждого элемента представления двумя примерами:

Размер родительского вида: 200, 200 Размер внутреннего содержимого метки: 120, 50 второй размер внутреннего содержимого метки: 150, 50

Первый пример (только первая метка в UIStackView)

UIStackView размер собственного содержимого = 120, 50
UIScrollView contentSize = 120, 50
UIScrollView frame = 40, 75, 120, 50

Все кадры ОК

Второй пример (с двумя метками)

UIScrollView frame = 0, 0, 200, 50
UIScrollView contentSize = 200, 50
UIStackView размер собственного содержимого = 200, 50

Итак, UIStackView не может правильно отобразить две метки (потому что ширина UIStackView ниже ширины двух меток), и у нас нет прокрутки, потому что ширина ограничения UIStackView равна равный ширине UIScrollView. Он работает, когда размер внутреннего содержимого UIStackView меньше, чем max UIScrollView.

Чтобы исправить это, мы изменим приоритет ограничения ширины на значение, меньшее, чем значение приоритета размера UIStackView, и все работает отлично:)

Надеюсь, что это поможет.

Источник кода