Auto Layout та UIScrollView

У 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 допоможе вам надалі заощадити час танерви.

Хардкорна конфа за С++. Ми запрошуємо лише профі.