2014-02-14 4 views
16

Существует множество ответов на запросы прокрутки с автозапуском и множество прокрутки scrollview, но я не могу найти ни одной вещи, которая обращается к обоим.UIScrollView Paging Autolayout & Storyboard

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

Контроллер установлен на свободный размер формы с шириной 2240 (320*7). Затем я поставил его так, как Apple, предполагает для autolayout ...

UIScrollview 
/-----UIView 
/----------Content (7 image views) 

Scrollview имеет 0/0/0/0 ограничение на все ребра, как это делает UIView внутри.

Когда пейджинг включен, он ведет себя красиво - точно так, как ожидалось. Но как только я включаю пейджинг, салфетки делают вид сумасшедшим, прокручивая всю ширину 2240, а затем отскакивая назад и в конечном итоге садясь на нужную страницу.

Я знаю, что у меня есть проверенный вариант, просто сломав все это и делая это программно, но мое упрямство хочет понять это. Это должно быть возможно!

ответ

56

У меня есть UIScrollView с пейджинговым и AutoLayout, работающим отлично. Вот мой настройки:

UIView // Main view 
|---> Dummy UIView // See below 
     |---> UIScrollView 
      |---> Content UIView 
        |---> Page 1 Container 
        |---> Page 2 Container 

Ограничения, которые я использовал в Dummy UIView -> Parent UIView это все, что я хочу, размер подкачки Scrollview быть, и UIScrollView -> Dummy UIView является (0,0,0,0) со всех сторон. Это просто регулярный макет, который создает фиктивный UIView, где я хочу поместить scrollview и UIScrollView, который полностью заполняет манекен UIView.

Обратитесь к Technote от компании Apple для AutoLayout и UIScrollViews: https://developer.apple.com/library/content/technotes/tn2154/_index.html

Содержания внутри Scrollview должно иметь характеристический размер. Он не может полагаться на scrollview, чтобы получить его размер.

Как указано в TechNote, установите ограничения со всех четырех сторон Content View на UIScrollView на (0,0,0,0). Точные значения не имеют большого значения, поскольку все, что вы говорите, UIScrollView - это то, что это представление, чтобы получить contentSize.

В этот момент Xcode будет жаловаться, что Content View не имеет собственного значения. И вот трюк: здесь мы используем Dummy UIView, который мы создали выше. Размер Dummy UIView - это точно размер каждой страницы в UIScrollView.

Так мы устанавливаем высоту Content UIView, равной высоте Dummy UIView и ширину Content UIView равным количеству страниц раз ширина Dummy UIView с использованием AutoLayout. (Для более позднего изменения множителем в ограничении должно быть количество страниц).

Теперь создавать страницы внутри Content UIView как обычно и установите Paging Enabled на да на вашем UIScrollView и вуаля у вас есть подкачки в UIScrollView с помощью AutoLayout.

Я испытал это в IOS 6, 7 & 8.

Update:

Вот пример проекта с этой установкой по запросу: https://github.com/kostub/PagingScrollView

+2

Не могли бы вы опубликовать фиктивный проект, показывающий это? – Charlie

+8

Вот пример проекта с вышеупомянутым решением: https://github.com/kostub/PagingScrollView –

+2

Этот ответ велик, и ясный пример проекта сделал его еще лучше. –

1

можно используйте размер scrollView для установки размера contentView, в отличие от https://developer.apple.com/library/ios/technotes/tn2154/_index.html; это было протестировано в iOS 8.2 beta 3.

Обратите внимание, что я сделал это программно, но, надеюсь, это кому-то полезно. Иерархия:

root: UIView 
    scrollView: UIScrollView 
    contentView: UIView 
     page0 
     page1 
     ... 
  1. Добавить ограничения в положение Scrollview относительно корня и любых братьев и сестер Scrollview.

  2. Подключить контентViewView к его супервину (scrollView): "H: | [contentView] |"
    "V: | [contentView] |"

  3. Добавить ограничения равенства контента в contentView и scrollView; это та часть, которая противоречит TN2154 (который говорит «не полагаться на мнение прокрутки, чтобы их размер»):

    contentView.height == scrollView.height
    contentView.width == scrollView.width

Примечание: приведенное выше обозначение для запрограммированного ограничения высоты.

  1. Разместите страницы относительно их надзора (contentView); Я сделал это, применив первую страницу слева/сверху к contentView left/top и последующим страницам слева/сверху до предыдущей страницы справа/сверху.

Кредит Кустову за то, что вы меня на правильном пути - его решение работает, но с некоторой вопльностью я смог устранить фиктивный вид.

0

Следуйте за Working with Scroll Views, чтобы создать пейджинг UIScrollView с контентом в Interface Builder.

Я бы также рекомендовал использовать Stack View в качестве содержимого для вашего UIScrollView, поскольку он позволяет существенно уменьшить сложность компоновки.

При использовании традиционного подхода каждый вид входа внутренний вид контента имеет 5 ограничений по крайней мере:

  • приводит к предыдущей записи
  • сверху к родителю
  • задней к следующей записи
  • нижней до родителя
  • равная ширина для прокрутки

Stack View организовать его содержимое автоматически, таким образом единственное ограничение каждая запись должна быть в «равна ширине прокрутить вид»

Interface Builder Result View

Проверить этот проект https://github.com/eugenebrusov/ios-stack-paging-scroll увидеть Stack View в действии.