Pull to refresh

Auto Layout и UIScrollView. Как его готовить?

Development for iOS *
Sandbox
Tutorial

В iOS 6 Apple представили замечательную возможность для вёрстки UI для iOS-приложений — Auto Layout. Но вот что удивительно, до сих пор очень немногие проекты используют эту возможность. А ведь это очень сильный инструмент, если с умом подойти к вёрстке UI, можно сэкономить очень много времени на подстраивании элементов для 3,5” и 4” экранов, портретно-ландшафтном расположении экрана и даже на универсальной вёрстке для iPhone и iPad.

И это всё не считая того, что скоро представят iPhone 6 и никто до сих пор точно не знает, какое там будет разрешение и какой экран. Лучше бы заранее подстраховаться.

В основном, тема Auto Layout довольно простая, и изучить её несложно. Но лично я столкнулся с большой проблемой при расположении элементов в UIScrollView. Я потратил немало времени и нервов на изучение того, как же правильно расположить элементы и указать размер контента для того чтобы ScrollView начал пролистываться.

Хоть и решение довольно простое, но на него не так просто выйти. В данной статье я бы хотел рассказать, как же всё-таки правильно готовить UIScrollView в Auto Layout.



Итак, создадим с нуля наш проект. Открываем XCode и создаём Single View Application. Далее вводим название и прочие настройки. Мы будем всё разбирать на примере приложения для iPhone.



Далее в получившемся проекте открываем файл Main.storyboard, выделяем единственный ViewController и оборачиваем его в NavigationController (например, выбрав в меню Editor — Embed in — Navigation Controller).

Добавляем на ViewController ScrollView. Заодно выставляем у NavigationBar свойство Translucent в выключенное состояние (это делается просто для того чтобы наши элементы не залазили под верхнюю панель).



Так как ScrollView обычно предназначен для того чтобы показывать контент, общая высота которого больше, чем высота экрана, то для этого выставляем нашему ViewController свойство Size в Freeform, а потом в параметрах выставляем нужную нам высоту и ширину (я поставил 320x700).



После этого наконец-то можно набросать нужные нам элементы. Я для примера просто набросаю несколько цветных View.



Вот в общем-то наш небольшой эскиз готов, теперь будем применять Auto Layout.
Для начала выделим ScrollView и выставим ему все отступы по 0, это позволит ему буквально прилипать к краям родительской View, что в свою очередь позволит работать в любых размерах: хоть 3,5”, хоть 4”.



Далее начинаем добавлять интересные нам отступы для наших View. Для всех view нужно добавить отступы сверху, слева и справа, а также указать высоту. При добавлении отступов вы можете заметить, что XCode начнёт ругаться на storyboard и выводить предупреждения “ScrollView- Has ambiguous scrollable content height” и “ScrollView- Has ambiguous scrollable content width”. Пока не обращайте на него внимания и продолжайте добавлять отступы.





Осталось 2 ключевых момента.

1. Добавляем самому нижнему View отступ снизу



2. Выделяем наши основные View (те, которые непосредственно находятся внутри ScrollView) и выставляем им центрирование по горизонтали (Editor — Align — Horisontal Center in Container)



Вот и всё. Наши warning’и пропали, всё отлично привязалось. Можно запускать приложение и наслаждаться работающей прокруткой. Отлично работает как на 3,5”, так и на 4”.

Надеюсь, этот tutorial поможет вам в дальнейшем сэкономить время и нервы.
Tags: iosauto layoutscrollviewtutorial
Hubs: Development for iOS
Total votes 26: ↑24 and ↓2 +22
Comments 21
Comments Comments 21

Popular right now