Создайте приложение для Apple Watch
В этом уроке мы будем разрабатывать приложение Omnitrix для Apple Watch. И да, вы правильно угадали. Это приложение вдохновлено мультсериалом Ben 10!!
Состав
Это серия из 2-х частей. Первый охватывает базовую настройку, которую сравнительно легко разработать. И предоставит один с минимальной реализацией приложения. В то время как последняя часть предоставляет дополнительные реализации, которые делают приложение более точным, как в сериале.
Все активы, необходимые для проекта, представлены в ссылке.
Настройка проекта
Запустите Xcode, выберите Создать новый проект Xcode и выберите Watch App в watchOS, чтобы создать проект. Мы пропустим другой вариант, так как нам нужно создать отдельное приложение для часов для этого проекта.
В следующем запросе назовите свой проект и убедитесь, что интерфейс установлен на SwiftUI. Вы также можете снять галочку с двух последних опций, так как они не понадобятся во время разработки.
И вуаля!! Вы только что создали свой проект SwiftUI. Чтобы просмотреть его, нажмите на опцию «Возобновить», которую можно найти в правом разделенном редакторе. Если вы его не видите, обязательно включите параметр «Холст» в настройках редактора настроек. После успешной сборки вы увидите предварительный просмотр часов с сообщением Hello World.
Создание циферблата
С точки зрения пользовательского интерфейса эта часть состоит из двух слоев. Нижний — это циферблат, который будет вращаться в зависимости от сигналов цифровой заводной головки. А верхний — это вид изображения для размещения изображения инопланетянина. Итак, начнем сначала с нижнего.
Импортируйте набор изображений в файл Assets проекта.
Вернемся к файлу ContentView, чтобы реализовать слой циферблата. В файле удалите элемент Text и добавьте Image с модификаторами resizable и aspect ratio.
Image("Watchface")
.resizable()
.aspectRatio(contentMode: .fit)
Добавление анимации вращения на циферблат
Мы хотим, чтобы циферблат вращался в соответствии с вводом цифровой короны. Показания оттуда будут храниться в переменной scrollOffset.
@State var scrollAmount = 0.0
Далее мы добавим модификатор digitalCrownRotation для регистрации и обновления переменной.
Кроме того, Image должен быть помещен в ZStack, так как мы хотим реализовать несколько слоев друг над другом. А затем добавьте модификатор digitalCrownRotation к файлу ZStack.
Так как мы хотели добавить 10 инопланетян, мы установим диапазон от 0 до 9 со значением шага 1.
После этого мы также добавим модификатор focusable. Это установит фокус на циферблате и будет реагировать на ввод цифровой заводной головки, не выбирая ее. Добавьте смещение к модификаторам ZStack, чтобы перевести элемент немного ниже, чтобы использовать пустое пространство экрана.
.offset(y: 15) .focusable(true)
Слушатель настроен, и на сам циферблат можно добавить анимацию. Для этого добавьте к изображению модификатор rotationEffect.
.rotationEffect(.degrees(scrollAmount*90))
При этом изображение будет поворачиваться на 90 градусов за одно движение цифровой короны. Полный код должен выглядеть так:
Запустите приложение на симуляторе или на самом устройстве. При вращении цифровой заводной головки циферблат часов будет анимироваться, создавая эффект смены циферблата.
На симуляторе наведите курсор на коронку диталя и прокрутите вверх или вниз, чтобы повернуть ее.
Примечание. Во время разработки потеря соединения между iPhone и Apple Watch довольно распространена. Вы можете принудительно запустить процесс синхронизации, открыв приложение «Камера» на Apple Watch.
Инопланетяне!
На последнем этапе мы добавим в проект изображения пришельцев. Для этого создайте enum для размещения данных с целым числом в качестве необработанного значения.
После этого добавьте еще один Image под циферблатом. Для имени изображения мы добавим следующую логику.
Image("\(Aliens(rawValue: Int(scrollAmount))!)")
Здесь переменная scrollOffset используется для сопоставления с соответствующим пришельцем из перечисления с использованием необработанного значения. А поскольку смещение имеет тип double, нам нужно typecast преобразовать его в целое число.
После этого добавьте следующий модификатор, чтобы изменить размер и сохранить изображение в пределах рамки циферблата.
.resizable() .padding(.all, 45) .aspectRatio(contentMode: .fit)
К настоящему времени код вашего проекта должен выглядеть так:
Вот и все, вы завершили первый раздел этого приложения. Вы можете запустить его на физических Apple Watch и испытать версию Omnitrix на своем запястье!
Код проекта доступен на GitHub.
Что дальше
Вы можете следовать второй части этого руководства, чтобы создать более мультяшную версию этого приложения. Что включает в себя добавление дополнительных слоев с анимацией открытия и закрытия.
