Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android Wear
Code

Создание Android Wear Watch Face

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Liliya (you can also view the original English article)

Одной из особенностей, которая делает Android такой особенной, является способность настраивать каждый аспект пользовательского интерфейса. Когда Android Wear впервые был запущен в Google I / O 2014, многие разработчики и пользователи узнали, что это не совсем верно для смарт-часов, поскольку официальный API для создания часовых лиц заметно отсутствовал. Учитывая, что способность создавать персонализированные ручные часы была одним из ключевых потребностей пользователей, неудивительно, что разработчики обнаружили способ создания собственных часов с недокументированным взломом в Android Wear.

К счастью, Google быстро сообщил всем, что официальный API уже на пути, а в декабре 2014 года API был наконец выпущен сообществу разработчиков. В этой статье вы узнаете о официальном интерфейсе Watch Faces для Android Wear и реализуете простое цифровое зеркало, которое вы сможете расширить для своих нужд. Реализация собственных часов может быть немного подробным, но вы можете найти пример приложения для этой статьи на GitHub.

1. Настройка вашего IDE

Первое, что вам нужно сделать, чтобы себя зарекомендовать, - это настроить ваш проект в Android Studio. При создании своего проекта выберите «Телефон и планшет» с минимальным SDK API 18, поскольку Android 4.3 является самой низкой версией операционной системы для поддержки входящих приложений Android Wear. Вам также нужно будет проверить коробку Wear с минимальным SDK API 21. Вы можете увидеть пример того, как должен выглядеть экран целевых Android-устройств.

Когда вы перейдете к экрану Add an Activity, выберите Add No Activity для обоих экранов.

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

2. Создание службы Wear Watch

Android Wear реализует сторожевые поверхности с помощью WatchFaceService. В этой статье вы создадите расширение класса CanvasWatchFaceService, которое представляет собой реализацию WatchFaceService, которая также предоставляет Canvas для вытягивания вашего часового лица. Начните с создания нового класса Java под модулем износа в Android Studio, который расширяет CanvasWatchFaceService.

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

Когда ваш код-заглушка для WatchFaceEngine включен, вернитесь к внешнему классу и переопределите метод onCreateEngine, чтобы вернуть новый внутренний класс. Это свяжет вашу службу собственных часов с кодом, который будет управлять дисплеем.

После того, как у вас есть услуга «Голые кости», вы можете перейти к общим задачам по уборке обновленных файлов AndroidManifest, чтобы ваш сервис был доступен для Android Wear. Имейте в виду, что ваш текущий код еще ничего не сделает. Мы вернемся к этому классу и выставим двигатель после выполнения некоторых работ по ведению проекта.

3. Обновление файлов AndroidManifest

Откройте файл AndroidManifest.xml в модуле износа. В верхней части вы должны увидеть строку, которая гласит:

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

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

После того, как ваш манифест будет завершен, вам нужно будет открыть файл AndroidManifest.xml в мобильном модуле и добавить два разрешения, которые мы использовали в модуле износа для PROVIDE_BACKGROUND и WAKE_LOCK,потому что Android Wear требует, чтобы как изнашиваемые, так и мобильные модули запрашивали те же разрешения для износа APK, которые устанавливались на часы пользователя. Как только оба файла манифеста заполнены, вы можете вернуться в CustomWatchFaceService.java, чтобы начать внедрение механизма.

4. Запустите ваш двигатель

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

Шаг 1: Определение необходимых значений и переменных

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

Как вы можете видеть, мы определяем TypeFace, который мы будем использовать для нашего цифрового текстового текста, а также цвет фона и цвет текста экрана часов. Объект Time используется, как вы догадались, отслеживая текущее время устройства. mUpdateRateMs используется для управления таймером, который нам потребуется реализовать, чтобы обновлять нашу часовую панель каждую секунду (следовательно, значение 1000 миллисекунд для mUpdateRateMs), поскольку стандартный WatchFaceService отслеживает время только с шагом в одну минуту. mXOffset и mYOffset определяются после того, как двигатель знает физическую форму часов, чтобы можно было нарисовать наше часовое лицо, не находясь слишком близко к верхнему или левому краю экрана или обрезав закругленный угол. Три булевых значения используются для отслеживания различных состояний устройства и приложения.

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

После того, как ваш приемник будет определен, конечным объектом, который вам нужно создать в верхней части вашего движка, является Handler, который заботится о том, чтобы обновлять часы каждую секунду. Это необходимо из-за ограничений WatchFaceService, о которых говорилось выше. Если вы хотите,чтобы время обновлялось каждую минуту, то можете смело игнорировать этот раздел.

Реализация Handler довольно проста. Сначала он проверяет идентификатор сообщения. Если соответствует MSG_UPDATE_TIME_ID, он продолжает отменять текущее представление для перерисовки. После того, как представление было недействительным, Handler проверяет, отображается ли экран, а не в потухшем режиме. Если он виден, он отправляет запрос повторения через секунду. Причина, по которой мы повторяем действие в Handler, когда лицо часов видно, а не в окружающем режиме, заключается в том, что он может быть немного интенсивным, чтобы обновлять каждую секунду. Если пользователь не смотрит на экран, мы просто возвращаемся к реализации WatchFaceService, которая обновляется каждую минуту.

Шаг 2: Инициализация двигателя

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

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

Наконец, вы захотите сообщить системе, что не показывать время по умолчанию, так как вы будете отображать его самостоятельно. Хотя это лишь некоторые из доступных вариантов, вы можете найти еще больше информации в официальной документации для объекта WatchFaceStyle.Builder.

После того, как ваш WatchFaceStyle установлен, вы можете инициализировать mDisplayTime как новый объект Time.

initBackground и initDisplayText выделяют два объекта Paint, которые вы определили в верхней части движка. Затем фон и текст имеют свой набор цветов, а текст имеет свой шрифт и размер шрифта, а также включает сглаживание.

Шаг 3: Управление состоянием устройства

Затем вам необходимо реализовать различные методы из класса Engine, вызванные изменениями состояния устройства. Мы начнем с рассмотрения метода onVisibilityChanged, который вызывается, когда пользователь скрывает или показывает лицо часов.

Когда этот метод вызывается, он проверяет, видно ли лицо часов или нет. Если лицо часового пояса видно, оно проверяет, зарегистрирован ли BroadcastReceiver, который вы определили в верхней части Engine. Если это не так, метод создает IntentFilter для ACTION_TIMEZONE_CHANGED и регистрирует BroadcastReceiver для его прослушивания.

Если лицо часового пояса не видно, этот метод проверяет, может ли BroadcastReceiver быть незарегистрированным. Как только BroadcastReceiver будет обработан, updateTimer вызывается, чтобы вызвать недействительность лица часов и перерисовать лицо часов. updateTimer останавливает любые действия Handler, которые ожидаются, и проверяет, нужно ли отправлять другой.

Шаг 4: Сотрудничество с носимым оборудованием

Когда ваша служба связана с Android Wear, вызывается onApplyWindowInsets. Это используется, чтобы определить, закруглено или квадратично устройство, на котором работает ваше лицо. Это позволяет вам изменить ваше лицо для часов, чтобы оно соответствовало аппаратным средствам.

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

Следующий метод, который вам нужно переопределить, - onPropertiesChanged. Этот метод вызывается, когда определяются аппаратные свойства устройства Wear, например, если устройство поддерживает защиту от записи или режим с низким уровнем бит.

В этом методе вы проверяете, применяются ли эти атрибуты к устройству, работающему с вашими часами, и сохраняют его в переменной-члене, определенной в верхней части вашего Engine.

Шаг 5: Сохранение батареи в режимах Ambient и Muted Modes

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

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


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

Когда ваше устройство находится в окружающем режиме, таймер Handler будет отключен. Ваше лицо часов может обновляться с текущим временем каждую минуту, используя встроенный метод onTimeTick, чтобы аннулировать Canvas.

Шаг 6: Рисование часов

Когда все ваши непредвиденные обстоятельства будут покрыты, пришло время, показаться экрану часов. CanvasWatchFaceService использует стандартный объект Canvas, поэтому вам нужно будет добавить onDraw в свой Engine и вручную вытащить экран ваших часов.

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

drawBackground применяет сплошной цвет к фону устройства Wear.

drawTimeText, однако, создает текст времени, который будет отображаться с помощью нескольких вспомогательных методов, а затем применяет его к холсту в точках смещения x и y, которые вы определили в onApplyWindowInsets.

Заключение

После того, как вы внедрили методы рисования своего экрана, вы должны быть настроены на базовые знания, необходимые для выхода и создания собственных часов. Приятная вещь о Android Wear заключается в том, что это только малая часть того, что возможно.

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.