Создание прокрутки с помощью Swift: 9 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:52

Несколько месяцев назад я не знал о существовании swift и Xcode. Сегодня мне удалось разработать небольшую часть приложения, которое я хочу создать. Мне удалось создать что-то классное, чем я хотел бы с вами поделиться.

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

Прежде чем мы это сделаем, давайте поговорим о том, что такое Swift и Xcode:

1. Swift - это мощный и интуитивно понятный язык программирования для macOS, iOS, watchOS и tvOS. Написание кода Swift интерактивно и увлекательно, синтаксис лаконичен, но выразителен, а Swift включает современные функции, которые нравятся разработчикам. Код Swift безопасен по своей конструкции, но при этом создает программное обеспечение, которое работает с молниеносной скоростью. Он разработан для работы с фреймворками Apple Cocoa и Cocoa Touch и большим объемом существующего кода Objective-C, написанного для продуктов Apple. Он построен на основе компилятора LLVM с открытым исходным кодом и включен в Xcode с версии 6, выпущенной в 2014 году. На платформах Apple он использует библиотеку времени выполнения Objective-C, которая позволяет запускать код C, Objective-C, C ++ и Swift. в рамках одной программы.

2. Xcode - это интегрированная среда разработки (IDE) для macOS, содержащая набор инструментов разработки программного обеспечения, разработанный Apple для разработки программного обеспечения для macOS, iOS, watchOS и tvOS.

Шаг 1. Загрузите Xcode

Xcode 10 включает в себя все необходимое для создания потрясающих приложений для всех платформ Apple. Теперь Xcode и Instruments отлично смотрятся в новом темном режиме в macOS Mojave. Редактор исходного кода позволяет более легко преобразовывать или реорганизовывать код, видеть изменения в системе управления версиями рядом со связанной строкой и быстро получать подробные сведения о различиях исходного кода. Вы можете создать свой собственный инструмент с настраиваемой визуализацией и анализом данных. Swift быстрее компилирует программное обеспечение, помогает доставлять более быстрые приложения и генерирует двоичные файлы еще меньшего размера. Наборы тестов завершаются во много раз быстрее, работа в команде проще и безопаснее, и многое другое.

Xcode 10 включает Swift 4.2, который быстрее компилирует ваше программное обеспечение, помогает доставлять более быстрые приложения и генерирует двоичные файлы еще меньшего размера. По сравнению со Swift 4.0 последний компилятор Swift может создавать большие приложения более чем в два раза быстрее. * В сочетании с новой системой сборки Xcode ваш повседневный рабочий процесс редактирования, сборки и тестирования выполняется намного быстрее. Xcode и Swift, оптимизированные для новейшего многоядерного оборудования Mac, обеспечивают молниеносную платформу разработки.

Шаг 2. Приступим

Итак, что мы сделаем, так это перейдем в Xcode и создадим новый проект. Как только мы щелкнем по новому проекту, наше приложение станет приложением с одним представлением. Для тех, кто не знает, приложение с одним представлением означает, что вам нужно будет начать все с нуля и что будет одно представление, которое мы можем запрограммировать.

Назовите свой продукт TutorialApp. Если вы опытный разработчик, который публикует приложения в App Store, у вас, вероятно, будет команда, но если вы новичок и у вас нет опубликованных приложений, вы можете пропустить это поле. В названии организации вы можете написать название компании, если она у вас есть, в моем случае я просто оставлю MacBook Pro. Тогда идентификатор организации рассматривается как что-то вроде уникального идентификатора вашего проекта, поэтому вы можете писать все, что захотите. Язык определенно будет быстрым.

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

Новый проект состоит из трех файлов: AppDelegate.swift, ViewController.swift и звездочки этого руководства: Main.storyboard. В разделе «Информация о развертывании»> «Ориентация устройства» в общих настройках проекта установите «Устройства» на iPhone. Поскольку это приложение предназначено только для портретной ориентации, снимите флажки с параметров «Пейзаж слева» и «Пейзаж справа». Откройте Main.storyboard в навигаторе проекта, чтобы просмотреть его в Interface Buildereditor:

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

Шаг 3. Работа в пользовательском интерфейсе

Официальная терминология раскадровки для контроллера представления - «сцена», но вы можете использовать эти термины как синонимы. Сцена представляет собой контроллер представления в раскадровке.

Здесь вы видите единственный контроллер представления, содержащий пустое представление. Стрелка, указывающая на контроллер представления слева, указывает, что это начальный контроллер представления, который будет отображаться для этой раскадровки. Разработка макета в редакторе раскадровки выполняется перетаскиванием элементов управления из библиотеки объектов (см. Верхний правый угол) в контроллер представления.

Чтобы понять, как работает редактор раскадровки, перетащите некоторые элементы управления из библиотеки объектов в пустой контроллер представления, как показано на видео.

Когда вы перетаскиваете элементы управления, они должны отображаться в структуре документа слева.

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

Шаг 4. Разработайте второй контроллер представления и инициируйте переходы (переходы)

Итак, в моем приложении, когда пользователь нажимает кнопку «Зарегистрировать новую учетную запись», я хочу, чтобы он был перенаправлен на страницу регистрации учетной записи. Поэтому для этой цели каждая страница представляет собой новую сцену, новый дисплей. По этой причине мы должны создать второй контроллер представления, который вы можете найти в библиотеке объектов.

Введите контроллер представления и поместите его рядом с исходным контроллером представления. Эта сцена будет отвечать за контроллер представления регистра. Перенаправление на эту страницу может быть выполнено двумя способами:

1. мы можем сделать это вручную, когда мы делаем соединение действия от кнопки к другому элементу управления представлением
2. мы можем сделать это программно

Я решил сделать это вручную. Это просто:

1. Сделайте один щелчок левой кнопкой мыши по вашей кнопке (в моем случае, зарегистрируйте новую учетную запись)
2. Удерживайте команду и щелкните левой кнопкой мыши, чтобы перетащить ее на сцену управления регистром.
3. Отпустите его и выберите «Модально представить».

Шаг 5: Создайте класс программирования для процесса регистрации

Итак, теперь мы хотим создать специальный класс кодирования для новой сцены.

Для этого вам необходимо проделать следующие шаги:

• щелкните правой кнопкой мыши папку вашего проекта
• щелкните новый файл под названием какао-сенсорный класс
• в классе напишите: RegisterVC
• ОЧЕНЬ ВАЖНО! Убедитесь, что подкласс должен иметь тип UIViewController.
• язык должен быть быстрым.
• нажмите «Далее» и сохраните свой класс какао в главном корне вашего проекта.
• Щелкните основную раскадровку и перейдите к новому контроллеру представления.
• нажмите на желтую кнопку, которая находится над ним
• справа перейдите к инспектору классов и сделайте ссылку на Register VC (Costum class, class = RegisterVC

Шаг 6. Создайте горизонтальный пролистывание страницы

В iOS прокрутка используется для просмотра контента, который не умещается полностью на экране. Прокрутки имеют две основные цели:

Чтобы позволить пользователям перетаскивать область содержимого, которое они хотят отобразить, чтобы пользователи могли увеличивать или уменьшать масштаб отображаемого содержимого с помощью жестов сжатия. Стандартный элемент управления, используемый в приложениях iOS - UITableView - является подклассом UIScrollView и предоставляет отличный способ просмотра содержимого, размер которого превышает размер экрана.

Что использовать подстраницы в горизонтальном свайпе?

Что ж, если бы я создал 6 разных страниц, это означало бы, что мне нужно было бы создать отдельный класс для каждой из них, и было бы не так удобно передавать информацию из одного класса в другой. Когда, например, я набираю свой адрес электронной почты, а затем нажимаю «Далее», если у меня другой контроллер представления, я оставлю первую страницу контроллера представления, а затем будет представлена вторая. В этом случае информация о первом контроллере представления должна быть передана следующему, а затем снова третьему контроллеру представления и т. Д. Когда у меня будут все нужные мне контроллеры представления, мне придется собрать все данные со всех страницы и отправьте их на сервер. Итак, это было бы действительно сложно.

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

1. Эл. адрес
2. Полное имя
3. Пароль
4. Дата рождения
5. Пол

Это означает, что контроллер представления, который мы создадим, должен быть в 5 раз больше, чем тот, который мы создали ранее.

Выберите контроллер представления и перейдите в верхний правый угол, щелкните значок линейки и отредактируйте смоделированный размер. Вы выберете Freeform, чтобы настроить ширину и высоту. Ширина экрана по умолчанию, подходящая для iphone 8, составляет 375, поэтому, если я умножу 375 * 5 = 1875. Итак, у вас есть контроллер расширенного представления.

Точно так же вы выполняете один и тот же процесс для всех телефонов и экранов разных размеров.

Для того, чтобы представление прокрутки работало, нам нужен объект представления прокрутки. Scroll View предоставляет механизм для отображения содержимого, размер которого превышает размер окна приложения. Щелкните этот объект, перетащите его и поместите в верхний левый угол контроллера представления и убедитесь, что X и Y находятся в нулевых положениях, а растяжение соответствует вашему контроллеру представления.

Прокрутка позволяет нам только прокручивать, ничего больше. Затем нам нужно добавить представление содержимого, в котором будут храниться другие представления. Вы можете найти UIView - он представляет собой прямоугольную область, в которой он рисует и принимает события - в библиотеке объектов. Просто щелкните и перетащите его в режим прокрутки и еще раз растяните соответствующим образом.

Выберите вид прокрутки на левой панели, и мы вызовем выравнивание 0, 0, 0, 0 и добавим ограничения. Сделайте то же самое для представления содержимого.

Шаг 7. Разработайте пользовательский интерфейс для подстраниц горизонтального смахивания

На этом этапе вы должны создать пользовательский интерфейс своих подстраниц. Я решил сделать прототип в Sketch, а затем построить его в Xcode.

Шаг 8: Реализуйте дизайн в Xcode

Следующим шагом будет реализация этого дизайна в Xcode. Для этого вы должны создать выходные соединения для всех подстраниц и создать еще одно для «материнского представления», то есть одно выходное соединение для всего контроллера представления.

Элементы раскадровки связаны с исходным кодом. Важно понимать связь раскадровки с кодом, который вы пишете.

В раскадровке сцена представляет один экран контента и обычно один контроллер представления. Контроллеры представлений реализуют поведение вашего приложения и управляют одним представлением контента с его иерархией вложенных представлений. Они координируют поток информации между моделью данных приложения, которая инкапсулирует данные приложения, и представлениями, которые отображают эти данные, управляют жизненным циклом своих представлений контента, обрабатывают изменения ориентации при повороте устройства, определяют навигацию в вашем приложении., и реализовать поведение для ответа на ввод пользователя. Все объекты контроллера представления в iOS имеют тип UIViewController или один из его подклассов.

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

Xcode уже создал один такой класс, который вы рассматривали ранее, ViewController.swift, и подключил его к сцене, над которой вы работаете в своей раскадровке. Добавляя новые сцены, вы сами устанавливаете это соединение в Инспекторе удостоверений. Инспектор идентичности позволяет редактировать свойства объекта в раскадровке, связанные с идентичностью этого объекта, например, к какому классу принадлежит объект.

Создание выходов для элементов пользовательского интерфейса Выходы предоставляют способ ссылаться на объекты интерфейса - объекты, которые вы добавили в свою раскадровку - из файлов исходного кода. Чтобы создать розетку, перетащите, удерживая клавишу Control, от определенного объекта в раскадровке к файлу контроллера представления. Эта операция создает свойство для объекта в вашем файле контроллера представления, которое позволяет вам получать доступ к этому объекту и управлять им из кода во время выполнения.

1. Откройте свою раскадровку Main.storyboard.
2. Нажмите кнопку «Помощник» на панели инструментов Xcode в правом верхнем углу Xcode, чтобы открыть редактор помощника. Если вам нужно больше места для работы, сверните навигатор проекта и область служебных программ, нажав кнопки «Навигатор» и «Служебные программы» на панели инструментов Xcode.
3. Вы также можете свернуть вид структуры.

На панели выбора редактора, которая появляется в верхней части помощника редактора, измените помощник редактора с предварительного просмотра на автоматический> ViewController.swift.

Щелкните подстраницу и перетащите в соответствующий класс в коде.

Шаг 9: интеграция пользовательских жестов

Смахивать жестом

Жест смахивания происходит, когда пользователь перемещает один или несколько пальцев по экрану в определенном горизонтальном или вертикальном направлении. Используйте класс UISwipeGestureRecognizer для обнаружения жестов смахивания.

Реализация жеста смахивания

Шаг 1. Добавьте жесты смахивания в метод viewDidLoad ()

переопределить функцию viewDidLoad () {super.viewDidLoad ()

let swipeLeft = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) swipeLeft.direction =.left self.view.addGestureRecognizer (swipeLeft)

let swipeRight = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) swipeRight.direction =.right self.view.addGestureRecognizer (swipeRight)

let swipeUp = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer (swipeUp)

let swipeDown = UISwipeGestureRecognizer (target: self, action: #selector (handleGesture)) swipeDown.direction =.down self.view.addGestureRecognizer (swipeDown)}

Шаг 2: проверьте обнаружение жеста в методе handleGesture () func handleGesture (жест: UISwipeGestureRecognizer) -> Void {if gesture.direction == UISwipeGestureRecognizerDirection.right {print ("Swipe Right")} иначе, если gesture.direction == UISwipeGestureRecognizer. left {print ("Swipe Left")} else if gesture.direction == UISwipeGestureRecognizerDirection.up {print ("Swipe Up")} else if gesture.direction == UISwipeGestureRecognizerDirection.down {print ("Swipe Down")}}

В своем приложении я хотел использовать swipeRight, но решил использовать тот, который больше подходит для вашего приложения.

Теперь давайте реализуем это в нашем коде.

Мы переходим в файл registerVC.swift, который мы создали ранее, и пишем код, как вы можете видеть на картинках.

ПОЯСНЕНИЯ К КОДУ

пусть current_x получает текущую позицию ScrollView (горизонтальная позиция), пусть screen_width получает ширину экрана, вычитая этот размер, let new_x из текущей позиции scrollview, я возвращаюсь по ширине экрана, если current_x> 0 до тех пор, пока она не станет больше 0 - 0 - это 1-я страница.

И готово!

Молодцы, ребята!