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

() translation by (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.

1	public class WatchFaceService extends CanvasWatchFaceService

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

1	private class WatchFaceEngine extends Engine

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

1	@Override
2	public Engine onCreateEngine() {
3	return new WatchFaceEngine();
4	}

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

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

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

1	<uses-feature android:name="android.hardware.type.watch" />

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

1	<uses-permission android:name="com.google.android.permission.PROVIDE_BACKGROUND" />
2	<uses-permission android:name="android.permission.WAKE_LOCK" />

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

<service android:name=".service.CustomWatchFaceService"
    android:label="Tuts+ Wear Watch Face"
    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="@mipmap/ic_launcher" />
    <meta-data
        android:name="com.google.android.wearable.watchface.preview_circular"
        android:resource="@mipmap/ic_launcher" />
    <intent-filter>
        <action android:name="android.service.wallpaper.WallpaperService" />
        <category android:name="com.google.android.wearable.watchface.category.WATCH_FACE" />
    </intent-filter>

</service>

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

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

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

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

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

//Member variables
private Typeface WATCH_TEXT_TYPEFACE = Typeface.create( Typeface.SERIF, Typeface.NORMAL );

private static final int MSG_UPDATE_TIME_ID = 42;
private long mUpdateRateMs = 1000;

private Time mDisplayTime;

private Paint mBackgroundColorPaint;
private Paint mTextColorPaint;

private boolean mHasTimeZoneReceiverBeenRegistered = false;
private boolean mIsInMuteMode;
private boolean mIsLowBitAmbient;

private float mXOffset;
private float mYOffset;

private int mBackgroundColor = Color.parseColor( "black" );
private int mTextColor = Color.parseColor( "red" );

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

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

final BroadcastReceiver mTimeZoneBroadcastReceiver = new BroadcastReceiver() {
    @Override
    public void onReceive(Context context, Intent intent) {
        mDisplayTime.clear( intent.getStringExtra( "time-zone" ) );
        mDisplayTime.setToNow();
    }
};

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

private final Handler mTimeHandler = new Handler() {
    @Override
    public void handleMessage(Message msg) {
        switch( msg.what ) {
            case MSG_UPDATE_TIME_ID: {
                invalidate();
                if( isVisible() && !isInAmbientMode() ) {
                    long currentTimeMillis = System.currentTimeMillis();
                    long delay = mUpdateRateMs - ( currentTimeMillis % mUpdateRateMs );
                    mTimeHandler.sendEmptyMessageDelayed( MSG_UPDATE_TIME_ID, delay );
                }
                break;
            }
        }
    }
};

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

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

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

@Override
public void onCreate(SurfaceHolder holder) {
    super.onCreate(holder);

    setWatchFaceStyle( new WatchFaceStyle.Builder( CustomWatchFaceService.this )
                    .setBackgroundVisibility( WatchFaceStyle.BACKGROUND_VISIBILITY_INTERRUPTIVE )
                    .setCardPeekMode( WatchFaceStyle.PEEK_MODE_VARIABLE )
                    .setShowSystemUiTime( false )
                    .build()
    );

    mDisplayTime = new Time();

    initBackground();
    initDisplayText();
}

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

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

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

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

private void initBackground() {
    mBackgroundColorPaint = new Paint();
    mBackgroundColorPaint.setColor( mBackgroundColor );
}

private void initDisplayText() {
    mTextColorPaint = new Paint();
    mTextColorPaint.setColor( mTextColor );
    mTextColorPaint.setTypeface( WATCH_TEXT_TYPEFACE );
    mTextColorPaint.setAntiAlias( true );
    mTextColorPaint.setTextSize( getResources().getDimension( R.dimen.text_size ) );
}

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

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

@Override
public void onVisibilityChanged( boolean visible ) {
    super.onVisibilityChanged(visible);

    if( visible ) {
        if( !mHasTimeZoneReceiverBeenRegistered ) {

            IntentFilter filter = new IntentFilter( Intent.ACTION_TIMEZONE_CHANGED );
            CustomWatchFaceService.this.registerReceiver( mTimeZoneBroadcastReceiver, filter );

            mHasTimeZoneReceiverBeenRegistered = true;
        }

        mDisplayTime.clear( TimeZone.getDefault().getID() );
        mDisplayTime.setToNow();
    } else {
        if( mHasTimeZoneReceiverBeenRegistered ) {
            CustomWatchFaceService.this.unregisterReceiver( mTimeZoneBroadcastReceiver );
            mHasTimeZoneReceiverBeenRegistered = false;
        }
    }

    updateTimer();
}

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

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

private void updateTimer() {
    mTimeHandler.removeMessages( MSG_UPDATE_TIME_ID );
    if( isVisible() && !isInAmbientMode() ) {
        mTimeHandler.sendEmptyMessage( MSG_UPDATE_TIME_ID );
    }
}

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

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

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

@Override
public void onApplyWindowInsets(WindowInsets insets) {
    super.onApplyWindowInsets(insets);

    mYOffset = getResources().getDimension( R.dimen.y_offset );

    if( insets.isRound() ) {
        mXOffset = getResources().getDimension( R.dimen.x_offset_round );
    } else {
        mXOffset = getResources().getDimension( R.dimen.x_offset_square );
    }
}

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

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

@Override
public void onPropertiesChanged( Bundle properties ) {
    super.onPropertiesChanged( properties );

    if( properties.getBoolean( PROPERTY_BURN_IN_PROTECTION, false ) ) {
        mIsLowBitAmbient = properties.getBoolean( PROPERTY_LOW_BIT_AMBIENT, false );
    }
}

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

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

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

@Override
public void onAmbientModeChanged(boolean inAmbientMode) {
    super.onAmbientModeChanged(inAmbientMode);

    if( inAmbientMode ) {
        mTextColorPaint.setColor( Color.parseColor( "white" ) );
    } else {
        mTextColorPaint.setColor( Color.parseColor( "red" ) );
    }

    if( mIsLowBitAmbient ) {
        mTextColorPaint.setAntiAlias( !inAmbientMode );
    }

    invalidate();
    updateTimer();
}

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

@Override
public void onInterruptionFilterChanged(int interruptionFilter) {
    super.onInterruptionFilterChanged(interruptionFilter);

    boolean isDeviceMuted = ( interruptionFilter == android.support.wearable.watchface.WatchFaceService.INTERRUPTION_FILTER_NONE );
    if( isDeviceMuted ) {
        mUpdateRateMs = TimeUnit.MINUTES.toMillis( 1 );
    } else {
        mUpdateRateMs = DEFAULT_UPDATE_RATE_MS;
    }

    if( mIsInMuteMode != isDeviceMuted ) {
        mIsInMuteMode = isDeviceMuted;
        int alpha = ( isDeviceMuted ) ? 100 : 255;
        mTextColorPaint.setAlpha( alpha );
        invalidate();
        updateTimer();
    }
}

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

@Override
public void onTimeTick() {
    super.onTimeTick();

    invalidate();
}

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

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

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

@Override
public void onDraw(Canvas canvas, Rect bounds) {
    super.onDraw(canvas, bounds);

    mDisplayTime.setToNow();

    drawBackground( canvas, bounds );
    drawTimeText( canvas );
}

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

1	private void drawBackground( Canvas canvas, Rect bounds ) {
2	canvas.drawRect( 0, 0, bounds.width(), bounds.height(), mBackgroundColorPaint );
3	}

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

private void drawTimeText( Canvas canvas ) {
    String timeText = getHourString() + ":" + String.format( "%02d", mDisplayTime.minute );
    if( isInAmbientMode() || mIsInMuteMode ) {
        timeText += ( mDisplayTime.hour < 12 ) ? "AM" : "PM";
    } else {
        timeText += String.format( ":%02d", mDisplayTime.second);
    }
    canvas.drawText( timeText, mXOffset, mYOffset, mTextColorPaint );
}

private String getHourString() {
    if( mDisplayTime.hour % 12 == 0 )
        return "12";
    else if( mDisplayTime.hour <= 12 )
        return String.valueOf( mDisplayTime.hour );
    else
        return String.valueOf( mDisplayTime.hour - 12 );
}

Заключение

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

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

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