Дневник начинающего разработчика. Урок 3. Скролл или как отобразить кучу информации на экране.

Всем привет!

В этом уроке я расскажу о том, что надо делать, если вы, к примеру, программируете экран настроек с кучей разных параметров. И, конечно, всю информацию не уместить в стандарный размер экрана, и тут приходит на помощь элемент под названием Scroll View.

Итак поехали!

Создайте проект Single View Aplication с названием Lesson_3 и языком Swift.

В библиотеке элементов найдите элемент Scroll View и перенесите его на наш Main.storyboard. В данный момент размер пока не имеет значения.

Предположим, вам надо сделать экран настроек, который будет занимать 1.5 размера стандартного экрана, и там нужно поместить информацию, которая просто не вместится, если ее расположить на один экран.

Для начала нам надо увеличить сам размер нашего экрана, чтобы можно было туда добавлять элементы. Если не увеличить размер экрана в Main.storyborad, то вы просто не сможете переместить элемент за пределы экрана.

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

Как только выделили экран, переходите в пункт, как показано на скриншоте внизу.

В данный момент по умолчанию размер экрана зафиксирован, но вы можете это изменить, просто переключите выбор с Fixed на Freeform и появятся размеры, где можно указать высоту, какую необходимо.

Пусть наша высота будет составлять 900px, а ширина останется неизменной. Мы видим, что после применения нашего нового размера, высота экрана в Main.storyboard изменилась.

И так начнем добавлять на экран наши элементы из библиотеки. Но для начала расширьте наш ранее добавленный Scroll View на новый размер экрана и добавьте Constaints к View, чтобы зафиксировать его положение на экране. Так как нам не нужно ничего подключать, то я накидал элементов, которые не требуется подключать, чтобы они отобразились на экране при билде приложения.

Список элементов, которые я использовал:

1. Label;
2. TextField;
3. Segment Control;
4. Switch;
5. Button;
6. Label.

Но если сейчас сбилдить приложение, то будете скроллить белый экран, а все элементы слипнутся в одном месте. Расставьте элементы в разных местах, как на скриншоте внизу.

И теперь надо к каждому элементу добавить ограничение, чтобы обязательно был отступ сверху объекта. Это сделать просто, выделите все элементы.

И кликните на иконку, как показано на скриншоте, появится меню, где надо выбрать пункт Add Missing Constraints (Добавить отсутствующие ограничения).

Сам Xcode избавит вас от добавления ограничений. Но не стоит думать, что такой подход подойдет в любой ситуации. В рамках данного урока этот метод отлично подходит, т.к. нам тут нужно только задать отступы между элементами.

Теперь запустите ваше приложение и вы увидите работу Scroll View.

Всем спасибо! Увидимся через неделю.