Создание оформлений экрана

В этом руководстве объясняется, как реализовать настраиваемую службу распознавания лиц для Android Wear 1.0. Пошаговые инструкции по созданию службы распознавания лиц с отрезаемыми цифровыми часами, за которым следует больше кода, чтобы создать лицо с аналоговым стилем.

Обзор

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

После разработки и тестирования этого цифрового лица смотреть больше кода добавляется для обновления его до более сложного аналогового лица часы с тремя руками:

Службы распознавания лиц упаковываются и устанавливаются как часть приложения Wear 1.0. В следующих примерах содержит не больше кода из шаблона приложения Wear 1.0, MainActivity чтобы служба распознавания лиц для часов можно упаковать и развернуть в смарт-часовом режиме как часть приложения. В действительности это приложение будет служить исключительно в качестве транспортного средства для получения службы распознавания лиц наблюдения, загруженной на устройство Wear 1.0 (или эмулятор) для отладки и тестирования.

Требования

Чтобы реализовать службу распознавания лиц, необходимо следующее:

• Android 5.0 (уровень API 21) или более поздней версии на устройстве или эмуляторе Wear.

• Библиотеки поддержки Xamarin Android Wear необходимо добавить в проект Xamarin.Android.

Хотя Android 5.0 является минимальным уровнем API для реализации службы распознавания лиц, рекомендуется использовать Android 5.1 или более поздней версии. Устройства Android Wear под управлением Android 5.1 (API 22) или более поздней версии позволяют приложениям Wear управлять тем, что отображается на экране, пока устройство находится в низком режиме окружающей среды. Когда устройство покидает режим окружающей среды с низкой мощностью, оно находится в интерактивном режиме. Дополнительные сведения об этих режимах см. в разделе "Сохранение видимых приложений".

Запуск проекта приложения

Создайте проект Android Wear 1.0 с именем WatchFace (дополнительные сведения о создании проектов Xamarin.Android см. в разделе Hello, Android):

Visual Studio

Visual Studio для Mac

Задайте для имени com.xamarin.watchfaceпакета значение :

Visual Studio

Visual Studio для Mac

Visual Studio

Кроме того, прокрутите страницу вниз и включите доступ к Интернету и WAKE_LOCK разрешения:

Visual Studio для Mac

Установите минимальную версию Android 5.1 (уровень API 22). Кроме того, включите разрешения Для Интернета и Пробуждения:

Затем скачайте preview.png . Это будет добавлено в папку drawables далее в этом пошаговом руководстве.

Добавление пакета Xamarin.Android Wear

Visual Studio

Запустите диспетчер пакетов NuGet (в Visual Studio щелкните правой кнопкой мыши ссылки в Обозреватель решений и выберите управление пакетами NuGet ...). Обновите проект до последней стабильной версии Xamarin.Android.Wear:

Затем, если установлен Xamarin.Android.Support.v13 , удалите его:

Visual Studio для Mac

Запустите диспетчер пакетов NuGet (в Visual Studio для Mac щелкните правой кнопкой мыши пакеты в области решения и выберите пункт "Добавить пакеты ...". Обновите проект до последней стабильной версии Xamarin.Android.Wear:

Создайте и запустите приложение на устройстве или эмуляторе Wear (дополнительные сведения о том, как это сделать, см. в руководстве по началу работы ). На устройстве "Носить" должен появиться следующий экран приложения:

На этом этапе базовое приложение Wear не имеет функций распознавания лиц, так как оно еще не предоставляет реализацию службы распознавания лиц. Эта служба будет добавлена далее.

CanvasWatchFaceService

Android Wear реализует часы лиц через CanvasWatchFaceService класс. CanvasWatchFaceServiceявляется производным от того, что само по себе является производным, WatchFaceServiceWallpaperService как показано на следующей схеме:

CanvasWatchFaceService включает вложенный CanvasWatchFaceService.Engineобъект; он создает экземпляр CanvasWatchFaceService.Engine объекта, который выполняет фактическую работу рисования лица наблюдения. CanvasWatchFaceService.Engine производный от WallpaperService.Engine приведенной выше схемы.

Не показана на этой схеме, Canvas которая CanvasWatchFaceService используется для рисования лица часы— это Canvas передается с помощью OnDraw метода, как описано ниже.

В следующих разделах будет создана настраиваемая служба распознавания лиц для наблюдения, выполнив следующие действия:

1. Определение класса, вызываемого MyWatchFaceService производным от CanvasWatchFaceService.

2. В рамках MyWatchFaceServiceсоздайте вложенный класс MyWatchFaceEngine , который является производным от CanvasWatchFaceService.Engine.

3. Реализуйте MyWatchFaceServiceCreateEngine метод, который создает экземпляр MyWatchFaceEngine и возвращает его.

4. В MyWatchFaceEngineэтом случае реализуйте OnCreate метод для создания стиля лица наблюдателя и выполнения других задач инициализации.

5. OnDraw Реализуйте метод MyWatchFaceEngine. Этот метод вызывается всякий раз, когда лицо наблюдения должно быть перезабрано (т. е. недопустимо). OnDraw — это метод, который рисует (и перерисовывает) элементы лица, такие как час, минута и секундные руки.

6. OnTimeTick Реализуйте метод MyWatchFaceEngine. OnTimeTick вызывается по крайней мере один раз в минуту (как в внешних, так и в интерактивных режимах) или при изменении даты и времени.

Дополнительные сведения см. в документации по CanvasWatchFaceServiceAPI CanvasWatchFaceService для Android. Аналогичным образом, CanvasWatchFaceService.Engine объясняет фактическую реализацию лица часы.

Добавление CanvasWatchFaceService

Visual Studio

Добавьте новый файл с именем MyWatchFaceService.cs (в Visual Studio щелкните правой кнопкой мыши WatchFace в Обозреватель решений, нажмите кнопку "Добавить > новый элемент", а затем выберите "Класс").

Visual Studio для Mac

Добавьте новый файл с именем MyWatchFaceService.cs (в Visual Studio для Mac щелкните правой кнопкой мыши проект WatchFace, нажмите кнопку "Добавить > новый файл..." и выберите "Пустой класс").

Замените содержимое этого файла следующим кодом:

using System;
using Android.Views;
using Android.Support.Wearable.Watchface;
using Android.Service.Wallpaper;
using Android.Graphics;

namespace WatchFace
{
    class MyWatchFaceService : CanvasWatchFaceService
    {
        public override WallpaperService.Engine OnCreateEngine()
        {
            return new MyWatchFaceEngine(this);
        }

        public class MyWatchFaceEngine : CanvasWatchFaceService.Engine
        {
            CanvasWatchFaceService owner;
            public MyWatchFaceEngine (CanvasWatchFaceService owner) : base(owner)
            {
                this.owner = owner;
            }
        }
    }
}

MyWatchFaceService (производный от CanvasWatchFaceService) — это "основная программа" часы лица. MyWatchFaceService реализует только один метод, OnCreateEngineкоторый создает экземпляр и возвращает MyWatchFaceEngine объект (MyWatchFaceEngine является производным от CanvasWatchFaceService.Engine). MyWatchFaceEngine Экземпляр объекта должен быть возвращен как объектWallpaperService.Engine. Инкапсулирующий MyWatchFaceService объект передается в конструктор.

MyWatchFaceEngine — это фактическая реализация распознавания лиц для часов— он содержит код, который рисует лицо наблюдения. Он также обрабатывает системные события, такие как изменения экрана (внешние и интерактивные режимы, отключение экрана и т. д.).

Реализация метода Engine OnCreate

Метод OnCreate инициализирует лицо наблюдения. Добавьте в следующее поле MyWatchFaceEngine:

Paint hoursPaint;

Этот Paint объект будет использоваться для рисования текущего времени на лице часы. Затем добавьте следующий метод MyWatchFaceEngine:

public override void OnCreate(ISurfaceHolder holder)
{
    base.OnCreate (holder);

    SetWatchFaceStyle (new WatchFaceStyle.Builder(owner)
        .SetCardPeekMode (WatchFaceStyle.PeekModeShort)
        .SetBackgroundVisibility (WatchFaceStyle.BackgroundVisibilityInterruptive)
        .SetShowSystemUiTime (false)
        .Build ());

    hoursPaint = new Paint();
    hoursPaint.Color = Color.White;
    hoursPaint.TextSize = 48f;
}

OnCreate вызывается вскоре после MyWatchFaceEngine запуска. Он настраивает WatchFaceStyle (который управляет взаимодействием устройства Wear с пользователем) и создает экземпляр Paint объекта, который будет использоваться для отображения времени.

Вызов SetWatchFaceStyle выполняет следующее:

1. Задает режимPeekModeShortпросмотра, в котором уведомления отображаются как небольшие карта на экране.

2. Задает фоновую видимостьInterruptive, которая приводит к тому, что фон просмотра карта отображается только кратко, если он представляет прерывание уведомления.

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

Дополнительные сведения об этих и других параметрах стиля распознавания лиц см. в документации по API Android WatchFaceStyle.Builder .

После SetWatchFaceStyle завершения создает экземпляр Paint объекта (hoursPaint) и задает для него белый цвет, а размер текста — 48 пикселей (TextSize должен быть указан в OnCreate пикселях).

Реализация метода Engine OnDraw

Этот OnDraw метод, возможно, является самым важным CanvasWatchFaceService.Engine методом— это метод, который фактически рисует элементы лица, такие как цифры и часы руки лица. В следующем примере она рисует строку времени на лице часы. Добавьте следующий метод к MyWatchFaceEngine:

public override void OnDraw (Canvas canvas, Rect frame)
{
    var str = DateTime.Now.ToString ("h:mm tt");
    canvas.DrawText (str,
        (float)(frame.Left + 70),
        (float)(frame.Top  + 80), hoursPaint);
}

При вызове OnDrawAndroid он проходит в Canvas экземпляре и границах, в которых можно нарисовать лицо. В приведенном выше примере DateTime кода используется для вычисления текущего времени в часах и минутах (в формате 12 часов). Результирующая строка времени рисуется на холсте Canvas.DrawText с помощью метода. Строка будет отображаться 70 пикселей с левого края и 80 пикселей вниз от верхнего края.

Дополнительные сведения о методе OnDraw см. в документации по API Android onDraw .

Реализация метода Engine OnTimeTick

Android периодически вызывает OnTimeTick метод для обновления времени, отображаемого лицом наблюдения. Он вызывается по крайней мере один раз в минуту (как в внешних, так и в интерактивных режимах), а также при изменении даты и времени или часового пояса. Добавьте следующий метод к MyWatchFaceEngine:

public override void OnTimeTick()
{
    Invalidate();
}

Эта реализация простых OnTimeTick вызовов Invalidate. Метод Invalidate планирует OnDraw перераскрыть лицо часы.

Дополнительные сведения о методе OnTimeTick см. в документации по API Android onTimeTick .

Регистрация CanvasWatchFaceService

MyWatchFaceService необходимо зарегистрировать в AndroidManifest.xml связанного приложения Wear. Для этого добавьте следующий XML-код в <application> раздел:

<service
    android:name="watchface.MyWatchFaceService"
    android:label="Xamarin Sample"
    android:allowEmbedded="true"
    android:taskAffinity=""
    android:permission="android.permission.BIND_WALLPAPER">
    <meta-data
        android:name="android.service.wallpaper"
        android:resource="@xml/watch_face" />
    <meta-data
        android:name="com.google.android.wearable.watchface.preview"
        android:resource="@drawable/preview" />
    <intent-filter>
        <action android:name="android.service.wallpaper.WallpaperService" />
        <category android:name="com.google.android.wearable.watchface.category.WATCH_FACE" />
    </intent-filter>
</service>

Этот XML-код выполняет следующие действия:

1. android.permission.BIND_WALLPAPER Задает разрешение. Это разрешение предоставляет службе распознавания лиц для просмотра разрешение на изменение системного обоя на устройстве. Обратите внимание, что это разрешение должно быть задано в <service> разделе, а не во внешнем <application> разделе.

2. Определяет watch_face ресурс. Этот ресурс представляет собой короткий XML-файл, который объявляет wallpaper ресурс (этот файл будет создан в следующем разделе).

3. Объявляет рисуемое изображение preview , которое будет отображаться на экране выбора средства выбора часов.

4. Включает в intent-filter себя, чтобы сообщить Android, что MyWatchFaceService будет отображать лицо наблюдения.

Это завершает код для базового WatchFace примера. Следующим шагом является добавление необходимых ресурсов.

Добавление файлов ресурсов

Прежде чем запустить службу часов, необходимо добавить ресурс watch_face и образ предварительной версии. Сначала создайте XML-файл в Resources/xml/watch_face.xml и замените его содержимое следующим XML-кодом:

<?xml version="1.0" encoding="UTF-8"?>
<wallpaper xmlns:android="http://schemas.android.com/apk/res/android" />

Задайте для действия сборки этого файла значение AndroidResource:

Visual Studio

Visual Studio для Mac

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

Если вы еще не сделали этого, скачайте preview.png. Установите его по адресу Resources/drawable/preview.png. Обязательно добавьте этот файл в WatchFace проект. Это изображение предварительного просмотра отображается пользователю в средство выбора лиц на устройстве "Носить". Чтобы создать изображение предварительного просмотра для собственного лица, вы можете сделать снимок экрана с лицом часы во время его работы. (Дополнительные сведения о получении снимка экрана с устройств "Носить" см. в разделе Создание снимков экрана).

Попробовать!

Создайте и разверните приложение на устройстве Wear. Вы увидите экран приложения "Носить", как и раньше. Сделайте следующее, чтобы включить новое лицо для просмотра:

1. Проводите пальцем вправо, пока не увидите фон экрана просмотра.

2. Касание и удержание в любом месте экрана в течение двух секунд.

3. Проводите пальцем влево направо, чтобы просмотреть различные лица часов.

4. Выберите лицо Xamarin Sample watch (показанное справа):

   

5. Коснитесь лица Xamarin Sample watch, чтобы выбрать его.

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

Это относительно грубое лицо смотреть, потому что реализация приложения настолько минимальна (например, она не включает фон лица наблюдения и не вызывает Paint методы анти-псевдонима для улучшения внешнего вида). Однако она реализует функциональные возможности голых костей, необходимые для создания пользовательского лица наблюдения.

В следующем разделе это лицо наблюдения будет обновлено до более сложной реализации.

Обновление лица для просмотра

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

1. Указывает время с аналоговым часом, минутой и вторыми руками.

2. Реагирует на изменения видимости.

3. Реагирует на изменения между внешним режимом и интерактивным режимом.

4. Считывает свойства базового устройства Wear.

5. Автоматически обновляет время изменения часового пояса.

Прежде чем реализовать приведенные ниже изменения кода, скачайте drawable.zip, распакуйте его и переместите распакованные .png файлы в resources/drawable (перезаписать предыдущие preview.png). Добавьте в проект новые .png файлы WatchFace .

Функции обработчика обновлений

Следующим шагом является обновление MyWatchFaceService.cs до реализации, которая рисует аналоговое лицо наблюдения и поддерживает новые функции. Замените содержимое MyWatchFaceService.cs аналоговой версией кода распознавания лиц в MyWatchFaceService.cs (вы можете вырезать и вставить этот источник в существующий MyWatchFaceService.cs).

Эта версия MyWatchFaceService.cs добавляет дополнительный код к существующим методам и включает дополнительные переопределенные методы для добавления дополнительных функций. В следующих разделах представлен обзор исходного кода.

OnCreate

Обновленный метод OnCreate настраивает стиль лица часов, как и раньше, но включает в себя некоторые дополнительные действия:

1. Задает фоновое изображение для ресурса xamarin_background , который находится в resources/drawable-hdpi/xamarin_background.png.

2. Инициализирует Paint объекты для рисования часовой рукой, минутной рукой и второй рукой.

3. Инициализирует Paint объект для рисования часовых тиков вокруг края лица часы.

4. Создает таймер, который вызывает Invalidate метод (redraw), чтобы вторая рука была перезаписана каждую секунду. Обратите внимание, что этот таймер необходим, так как OnTimeTick вызывается Invalidate только один раз в минуту.

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

Ondraw

Обновленный метод OnDraw рисует лицо с аналоговым стилем, выполнив следующие действия:

1. Возвращает текущее время, которое теперь сохраняется в объекте time .

2. Определяет границы поверхности документа и его центра.

3. Рисует фон, масштабируемый в соответствии с устройством при рисовании фона.

4. Рисует двенадцать тиков вокруг лица часов (соответствующих часам на лице часов).

5. Вычисляет угол, поворот и длину для каждой рукой часы.

6. Рисует каждую руку на поверхности часов. Обратите внимание, что вторая рука не рисуется, если часы в режиме окружающей среды.

OnPropertiesChanged

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

Дополнительные сведения об этом методе см. в документации по API Android onPropertiesChanged .

OnAmbientModeChanged

Этот метод вызывается при входе или выходе устройства Wear в внешний режим. MyWatchFaceEngine В реализации лицо наблюдения отключает анти-псевдоним, если он находится в режиме окружения.

Дополнительные сведения об этом методе см. в документации по API Android onAmbientModeChanged .

OnVisibilityChanged

Этот метод вызывается всякий раз, когда часы становятся видимыми или скрытыми. В MyWatchFaceEngineэтом методе регистрируются или отменяют регистрацию приемника часового пояса (описанного ниже) в соответствии с состоянием видимости.

Дополнительные сведения об этом методе см. в документации по API Android onVisibilityChanged .

Функция часового пояса

Новая MyWatchFaceService.cs также включает функции для обновления текущего времени при изменении часового пояса (например, во время перемещения по часовым поясам). В конце MyWatchFaceService.cs определяется изменение BroadcastReceiver часового пояса, которое обрабатывает измененные часовыми поясами объекты намерения:

public class TimeZoneReceiver: BroadcastReceiver
{
    public Action<Intent> Receive { get; set; }
    public override void OnReceive (Context context, Intent intent)
    {
        if (Receive != null)
            Receive (intent);
    }
}

Метод RegisterTimezoneReceiver вызывает OnVisibilityChanged метод и UnregisterTimezoneReceiver метод. UnregisterTimezoneReceiver вызывается, когда состояние видимости лица наблюдения изменяется на скрытое. Когда лицо часы отображается снова, RegisterTimezoneReceiver вызывается (см OnVisibilityChanged . метод).

Метод обработчика RegisterTimezoneReceiver объявляет обработчик для этого события приемника Receive часового пояса. Этот обработчик обновляет time объект новым временем при пересечении часового пояса:

timeZoneReceiver = new TimeZoneReceiver ();
timeZoneReceiver.Receive = (intent) => {
    time.Clear (intent.GetStringExtra ("time-zone"));
    time.SetToNow ();
};

Фильтр намерений создается и регистрируется для приемника часовых поясов:

IntentFilter filter = new IntentFilter(Intent.ActionTimezoneChanged);
Application.Context.RegisterReceiver (timeZoneReceiver, filter);

Метод UnregisterTimezoneReceiver отменяет регистрацию приемника часового пояса:

Application.Context.UnregisterReceiver (timeZoneReceiver);

Запуск улучшенного лица наблюдения

Создайте и разверните приложение на устройстве Wear еще раз. Выберите лицо часы из средства выбора лиц, как и раньше. Предварительный просмотр в средства выбора часов отображается слева, а новое лицо часы отображается справа:

На этом снимке экрана секунда перемещается один раз в секунду. При запуске этого кода на устройстве "Носить" вторая рука исчезает, когда часовой режим входит в внешний режим.

Итоги

В этом пошаговом руководстве была реализована и протестирована настраиваемая часы Android Wear 1.0. CanvasWatchFaceService Появились и CanvasWatchFaceService.Engine классы, а основные методы класса подсистемы были реализованы для создания простого цифрового лица. Эта реализация была обновлена с дополнительными функциями для создания аналогового лица наблюдения, а дополнительные методы были реализованы для обработки изменений в режиме видимости, внешнего режима и различий в свойствах устройства. Наконец, был реализован приемник трансляции часового пояса, чтобы часы автоматически обновляли время пересечения часового пояса.

Связанные ссылки

• Создание контрольных лиц
• WatchFaceService.Engine