2016-02-16 2 views
15

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

Curent

(Current)

Expected

(Ожидаемое)

+0

Вы работать в Swift или Objective C? –

+0

Im работает над Swift 2.0 – r3dsm0k3

+0

Собираетесь ли вы ограничить количество подвид в 3 в стеке? – Adrian

ответ

14

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

Sc rollView ограничения

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

enter image description here

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

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

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

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

Шаг 2: добавить горизонтальную UIStackView

enter image description here

  • Top, Bottom, ведущий , Trailing constraints используются для исправления Рамка UIStackView
  • Равная высота и равная ширина, используемые для расчета e contentSize UIScrollView

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

Шаг 3: добавить подвиды

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

Для примера: я добавлю 3 метки (пожалуйста, удалите заполнитель присущего размер UIScrollView)

enter image description here

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

Почему?

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

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

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

  • UIStackView характеристической размер содержания = 120, 50
  • UIScrollView contentSize = 120, 50
  • UIScrollView рам = 40, 75, 120, 50

Всех кадров КИ

Второй пример (с использованием двух этикеток)

  • UIScrollView рамы = 0, 0, 200, 50
  • UIScrollView contentSize = 200, 50
  • UIStackView внутреннее содержание размер = 200, 50

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

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

enter image description here

Надежда, что помогает.

Code source

+0

Отличная работа! Спасибо огромное! –

+0

Добро пожаловать @ VladPulichev, большое спасибо за ваши добрые слова –

Смежные вопросы