Экраны адаптации помогают новым пользователям понять ваше приложение и обеспечивают удобство работы с ним.

Экраны адаптации помогают новым пользователям понять ваше приложение и обеспечивают удобство работы с ним.

Фото Bagus Hernawan на Unsplash

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

Хотя я хотел бы обсудить дизайн бортовых экранов, я оставлю это для другой статьи. Здесь я собираюсь объяснить, как закодированы экраны онбординга.

Примеры начального экрана из приложения Apple Health

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

Говоря о том, что мы будем делать в целом: мы разделим наше приложение на две части в соответствии со значением Bool, которое мы сохранили с помощью UserDefaults. Первая часть приложения будет основным интерфейсом приложения. Вторая часть приложения — это раздел, где расположены бортовые экраны.

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

Теперь пришло время создать новый файл раскадровки. Для этого давайте создадим новый файл раскадровки Onboarding.

Мы будем использовать элемент UIPageViewController, чтобы объединить страницы онбординга.

Обзор документации Apple для UIPageViewController

Контроллер просмотра страницы — навигация может управляться программно вашим приложением или непосредственно пользователем с помощью жестов. При переходе со страницы на страницу контроллер представления страницы использует указанный вами переход для анимации изменения.

Создайте элемент UIPageViewController, перетащив его с помощью библиотеки объектов.

Этот UIPageViewController должен быть начальным контроллером представления, потому что он будет управлять другими контроллерами представления. Вот почему мы включаем «Is Initial View Controller».

Вы можете изменить «Стиль перехода» на «Прокрутка», если хотите, чтобы анимация, возникающая при изменении контроллеров представления внутри UIPageViewController, была обычной анимацией прокрутки.

Создайте элемент UIViewController с библиотекой объектов, чтобы создать первый ознакомительный экран.

Поместите элементы UIButton и UILabel внутрь этого элемента UIViewController. (Может быть проще использовать автоматическую компоновку, если вы расположите элементы так, как я.)

Дважды скопируйте и вставьте этот элемент UIViewController и измените текст элементов UILabel в соответствии с их порядком.

Создайте файл с именем «MainPageViewController», чтобы привязать элемент UIPageViewController к коду.

Точно так же давайте один за другим создадим UIViewController файлов, чтобы определить UIViewController элементов.

Давайте соединим эти определенные файлы с элементами раскадровки. Сначала я подключил элемент UIPageViewController.

Аналогично соединяем UIViewController элементов следующим образом. Думаю, все остальное вы можете сделать сами.

Создайте элемент «Справочник по раскадровке», чтобы вернуться на главный экран после третьего экрана.

Элемент Storyboard Reference используется для связывания файлов раскадровки. Вот почему мы выбираем раскадровку нашего элемента Storyboard Reference как «Основной».

Когда вы нажимаете кнопку на третьем экране, создайте переход, чтобы перейти к «Главной» раскадровке.

Теперь пришло время для основного файла раскадровки. Сначала перейдите в «Main.storyboard». Когда мы впервые создали проект Xcode, существует файл UIViewController с именем ViewController.swift. Этот файл связан с UIViewController в файле «Main.storyboard». Давайте удалим все ссылки, связанные с этим файлом и даже с файлом «ViewController.swift».

Создайте новый файл Cocoa с именем «ConciergeViewController» для нашего элемента UIViewController и свяжите этот файл с нашим элементом раскадровки.

Этот элемент UIViewController нужен нам для того, чтобы отделять экраны друг от друга. Он служит для предоставления нам различных элементов пользовательского интерфейса в соответствии со значением свойства isFirstLaunch. Для этого необходимы два отдельных элемента UIViewController.

У нас уже есть первый контроллер представления: Onboarding.storyboard!

Нам нужно определить идентификатор для нашего перехода, чтобы предпринять какие-либо действия. Итак, давайте напишем «toOnboarding» в качестве идентификатора.

Для второго UIViewController нам нужно создать новый UIViewController с библиотекой объектов. Во втором нам нужен идентификатор перехода, чтобы действовать. Итак, давайте напишем «toMain» в качестве идентификатора.

Теперь мы можем перейти к кодированию. Давайте сначала определим наш класс, где мы определим наш элемент UserDefault. Для этого создайте новый файл Swift, который вызывает LandscapeManager.

Затем определите класс LandscapeManager. Элемент isFirstLaunch позволит нам записать, было ли приложение открыто в первый раз.

Во-вторых, нам нужно определить расширение раскадровки, чтобы упростить определение и использование файлов раскадровки.

Напишите следующие коды, чтобы выполнить действие в соответствии со значением свойства isFirstLaunch в элементе ConciergeViewController:

Определим элементы контроллера представления, которые мы будем использовать внутри элемента MainPageViewController в массиве:

Затем создайте функцию с именем currentIndex, чтобы узнать, в каком контроллере представления мы находимся:

Напишите следующие коды для установки первого элемента массива при выполнении функции viewDidLoad:

Определите эту функцию для перехода на новую страницу при нажатии кнопок в контроллерах представления:

Теперь мы закончили с MainPageViewController. Теперь все, что вам нужно сделать, это написать коды, которые будут запускаться при нажатии кнопок в контроллерах представления. Для этого давайте перейдем к FirstStepViewController.

Определите кнопку этого элемента как функцию IBAction с именем actionButtonTapped и вызовите функцию pushNext внутри. Таким образом, когда мы нажимаем кнопку, мы переключаемся с первой страницы на вторую:

Сделайте то же самое с этой функцией в SecondStepViewController, но мы не будем делать этого в третьем контроллере представления, потому что после третьего контроллера представления нет экрана.

Мы сделали наши onboarding страницы. Отныне единственное, что вы можете сделать, это еще больше усложнить эти страницы!

Как создавать экраны адаптации в ваших приложениях для iOS