[DroidKaigi 2018] Android WearのWatch Faceを作ろう〜時計の盤面に小さな情報を添えて〜

Android WearのWatch Faceを作ろう〜時計の盤面に小さな情報を添えて〜 DroidKaigi 2018 2018/02/09 (Fri.) Taichi Sato
(@syarihu)

今回話すこと • デジタル時計を例にしたWatch Faceの作り方 • Watch FaceへのComplications 対応 • Complication
Data Providerの作り方

最終的に作れるもの

最終的に作れるもの Complications

自己紹介

Taichi Sato (@syarihu) • MoneyForward, Inc. ◦ Android Engineer •
TechBooster

TechBooster C92 技術書典3 C93

Watch Faceとは

Watch Faceとは • Android Wearでは時計の盤面を変更できる • その時計の盤面のことをWatch Faceと呼ぶ

Watch Faceとは

以前のWatch Face

以前のWatch Face • WatchViewStubというクラスを使って作る非公式の Watch Faceが多くあった WatchViewStub | Android
Developers https://developer.android.com/reference/android/support/wearable/view/WatchViewStub.html

以前のWatch Face

以前のWatch Face WatchViewStub | Android Developers https://developer.android.com/reference/android/support/wearable/view/WatchViewStub.html

以前のWatch Face • 非公式のWatch Faceが増加する中、ようやく公式のWatch Face APIが公開される

Watch Face APIが公開される Android Developers Blog: Watch Face API Now
Available for Android Wear https://android-developers.googleblog.com/2014/12/watch-face-api-now-available-for.html

Android Developers Blog: Watch Face API Now Available for Android
Wear https://android-developers.googleblog.com/2014/12/watch-face-api-now-available-for.html Watch Face APIが公開される

Watch Face APIが公開される • 2015年1月31日までに公式の Watch Face APIに移行しないと削除するよというアナウンスがされる

Watch Face APIが公開される • 2015年1月31日までに公式の Watch Face APIに移行しないと削除するよというアナウンスがされる
• 非公式のWatch Faceが終わりを迎えた

Watch Face API

Watch Face API • Gles2WatchFaceService • CanvasWatchFaceService

Watch Faceを作る

今回作るWatch Face • 普通のデジタル時計 • アンビエントモードに変わった時に背景色を変える

アンビエントモード • Android Wearの画面をタップしてからしばらくすると暗くなる • その暗くなった状態をアンビエントモードという

プロジェクトを作成

class DigitalWatchFaceService : CanvasWatchFaceService() { override fun onCreateEngine(): Engine {
return Engine() } WatchFaceServiceの作成 (DigitalWatchFaceService.kt)

inner class Engine : CanvasWatchFaceService.Engine() { override fun onCreate(holder: SurfaceHolder?)
{ super.onCreate(holder) } override fun onAmbientModeChanged(inAmbientMode: Boolean) { super.onAmbientModeChanged(inAmbientMode) } override fun onTimeTick() { super.onTimeTick() } override fun onDraw(canvas: Canvas, bounds: Rect) { super.onDraw(canvas, bounds) } } WatchFaceServiceの作成 (DigitalWatchFaceService.kt)

inner class Engine : CanvasWatchFaceService.Engine() { // 時間を取得するためのCalendar private val
calendar: Calendar = Calendar.getInstance() // 時計の背景色 private var backgroundColor = Color.BLACK 初期化処理 (DigitalWatchFaceService.kt)

… // 時間を描画するためのPaint private val timePaint: Paint = Paint().apply {
color = Color.WHITE textSize = 75f isAntiAlias = true } // 日付を描画するためのPaint private val datePaint: Paint = Paint().apply { color = Color.WHITE textSize = 20f isAntiAlias = true } 初期化処理 (DigitalWatchFaceService.kt)

… // 時間の位置を保持するためのPoint private val timePosition: Point = Point() //
日付の位置を保持するためのPoint private val datePosition: Point = Point() // 時間の文字の大きさを保持するためのRect private val timeBounds: Rect = Rect() // 日付の文字の大きさを保持するためのRect private val dateBounds: Rect = Rect() 初期化処理 (DigitalWatchFaceService.kt)

inner class Engine : CanvasWatchFaceService.Engine() { ... override fun onDraw(canvas:
Canvas, bounds: Rect) { super.onDraw(canvas, bounds) val now = System.currentTimeMillis() // 時間を更新 calendar.timeInMillis = now drawWatchFace(canvas) } 時計の描画 (DigitalWatchFaceService.kt)

inner class Engine : CanvasWatchFaceService.Engine() { ... private fun drawWatchFace(canvas:
Canvas) { // 時間 val strTime = DateUtils.formatDateTime( this@DigitalWatchFaceService, calendar.timeInMillis, DateUtils.FORMAT_SHOW_TIME or DateUtils.FORMAT_24HOUR ) 時計の描画 (DigitalWatchFaceService.kt)

Canvas) { ... // 時間のテキストの大きさを再取得 timePaint.getTextBounds( strTime, 0, strTime.length, timeBounds) // 中央に配置するための座標を計算する timePosition.set( canvas.width / 2 - timeBounds.width() / 2, canvas.height / 2 ) 時計の描画 (DigitalWatchFaceService.kt)

Canvas) { ... // 日付 val strDate = DateUtils.formatDateTime( this@DigitalWatchFaceService, calendar.timeInMillis, DateUtils.FORMAT_SHOW_DATE or DateUtils.FORMAT_SHOW_WEEKDAY ) 時計の描画 (DigitalWatchFaceService.kt)

Canvas) { ... // 日付のテキストの大きさを取得 datePaint.getTextBounds( strDate, 0, strDate.length, dateBounds) datePosition.set( canvas.width / 2 - dateBounds.width() / 2, canvas.height / 2 + timeBounds.height() / 2 + (10 / resources.displayMetrics.density).toInt() ) 時計の描画 (DigitalWatchFaceService.kt)

Canvas) { ... // 背景色、日時を描画 canvas.drawColor(backgroundColor) canvas.drawText( strTime, timePosition.x.toFloat(), timePosition.y.toFloat(), timePaint ) 時計の描画 (DigitalWatchFaceService.kt)

Canvas) { ... canvas.drawText( strDate, datePosition.x.toFloat(), datePosition.y.toFloat(), datePaint ) } 時計の描画 (DigitalWatchFaceService.kt)

inner class Engine : CanvasWatchFaceService.Engine() { ... override fun onAmbientModeChanged(
inAmbientMode: Boolean) { super.onAmbientModeChanged(inAmbientMode) backgroundColor = if (inAmbientMode) Color.BLACK else applicationContext.getColor( android.R.color.holo_blue_light ) invalidate() } アンビエントモード (DigitalWatchFaceService.kt)

時間が変わったときの処理 • 時間が変わったときには、 onTimeTickというメソッドが呼ばれる

onTimeTickが呼ばれる条件 • アンビエントモードとインタラクティブモードで少なくとも１分に１回

onTimeTickが呼ばれる条件 • 日付または時刻が変わったとき • タイムゾーンが変わったとき

inner class Engine : CanvasWatchFaceService.Engine() { ... override fun onTimeTick()
{ super.onTimeTick() // 時間が変わったら再描画 invalidate() } 時間が変わったときの処理 (DigitalWatchFaceService.kt)

AndroidManifest.xml <uses-feature android:name="android.hardware.type.watch" /> <uses-permission android:name="android.permission.WAKE_LOCK" />

AndroidManifest.xml <service android:name=".DigitalWatchFaceService" android:allowEmbedded="true" android:label="DroidKaigi WatchFaceSample" android:permission="android.permission.BIND_WALLPAPER" android:taskAffinity=""> </service>

AndroidManifest.xml <service ...> <meta-data android:name="android.service.wallpaper" android:resource="@xml/watch_face" /> ... </service>

watch_face.xml <?xml version="1.0" encoding="UTF-8"?> <wallpaper />

AndroidManifest.xml <service ...> ... <meta-data android:name="com.google.android.wearable.watchface.preview" android:resource="@drawable/preview" /> <meta-data android:name="com.google.android.wearable.watchface.preview_circular"
android:resource="@drawable/preview_circular" /> ... </service>

AndroidManifest.xml <service ...> ... <intent-filter> <action android:name="android.service.wallpaper.WallpaperService" /> <category android:name=
"com.google.android.wearable.watchface.category.WATCH_FACE" /> </intent-filter> </service>

実行する

インタラクティブモード

アンビエントモード

Complications API

Complicationsとは • 時間に加えて表示されるWatch Faceの機能のこと • Android Wear 2.0から使える

Complicationsとは

Complication Data Providers • Watch Faceにデータを提供するアプリ

Complication Data Providers Watch Face Complications | Android Developers https://developer.android.com/training/wearables/watch-faces/complications.html

System Providers • 日付 • 時間 • 歩数 • アプリ
• 未読通知数 • 世界時計 • 次の予定 • バッテリー残量

Complications Types • Complicationに表示するデータの種類

Complications Types • ICON • SHORT_TEXT • LONG_TEXT • SMALL_IMAGE
• LARGE_IMAGE • RANGED_VALUE

Complications Types Adding Complications to a Watch Face | Android
Developers https://developer.android.com/training/wearables/watch-faces/adding-complications.html

Complications Types Type 必須フィールドオプション SHORT_TEXT Short text Icon Burn-in
protection icon Short title ICON Icon Burn-in protection icon RANGED_VALUE Value Min value Max value Icon Burn-in protection icon Short text Short title

Complications Types Type 必須フィールドオプション LONG_TEXT Long text Long title
Icon Burn-in protection icon Small image SMALL_IMAGE Small image LARGE_IMAGE Large image

Watch Faceに Complicationを追加する

Complicationを追加する • Complicationを表示するためには、Watch Faceがそれに対応している必要がある

Complicationを追加する • Watch FaceにComplication を配置 • Complicationsを設定するための設定画面

今回作るもの

enum class ComplicationLocation( val complicationId: Int, val complicationSupportedTypes: IntArray )
{ LEFT(101, intArrayOf( ComplicationData.TYPE_RANGED_VALUE, ComplicationData.TYPE_ICON, ComplicationData.TYPE_SHORT_TEXT, ComplicationData.TYPE_SMALL_IMAGE )), Complicationsの設定を決める (ComplicationLocation.kt)

... RIGHT(102, intArrayOf( ComplicationData.TYPE_RANGED_VALUE, ComplicationData.TYPE_ICON, ComplicationData.TYPE_SHORT_TEXT, ComplicationData.TYPE_SMALL_IMAGE )); Complicationsの設定を決める (ComplicationLocation.kt)

... companion object { fun getComplicationIds(): IntArray = values().map {
it.complicationId }.toIntArray() fun valueOf( complicationId: Int ): ComplicationLocation? = values().firstOrNull { it.complicationId == complicationId } } } Complicationsの設定を決める (ComplicationLocation.kt)

設定画面のレイアウトを作る (activity_complications_config.xml) <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"
android:background="@color/black" android:paddingEnd="24dp" android:paddingStart="24dp"> <android.support.wear.widget.WearableRecyclerView android:id="@+id/wearable_recycler_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:clipToPadding="true" android:padding="20dp" /> </FrameLayout> </layout>

<?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <net.syarihu.android.watchfacesample.ComplicationsConfigPreviewView
android:id="@+id/complication_settings_preview" android:layout_width="@dimen/complication_settings_preview_size" android:layout_height="@dimen/complication_settings_preview_size" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> 設定画面のレイアウトを作る (viewholder_preview_and_complications.xml)

class ComplicationsConfigPreviewView : View { ... constructor(context: Context?) : super(context)
constructor( context: Context?, attrs: AttributeSet? ) : super(context, attrs) constructor( context: Context?, attrs: AttributeSet?, defStyleAttr: Int ) : super(context, attrs, defStyleAttr) override fun onDraw(canvas: Canvas) { super.onDraw(canvas) 設定画面のレイアウトを作る (ComplicationsConfigPreviewView.kt)

<android.support.constraint.ConstraintLayout ...> ... <android.support.constraint.Guideline android:id="@+id/guideline_center_vertical" android:layout_width="0dp" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.5" />
設定画面のレイアウトを作る (viewholder_preview_and_complications.xml)

<ImageView android:id="@+id/left_complication_background" style="?android:borderlessButtonStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/transparent" android:importantForAccessibility="no" android:src="@drawable/added_complication" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toLeftOf="@+id/guideline_center_vertical"
/> <ImageButton android:id="@+id/left_complication" style="?android:borderlessButtonStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/transparent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toLeftOf="@+id/guideline_center_vertical" /> 設定画面のレイアウトを作る (viewholder_preview_and_complications.xml)

設定画面のレイアウトを作る (viewholder_preview_and_complications.xml) <ImageView android:id="@+id/right_complication_background" style="?android:borderlessButtonStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/transparent" android:importantForAccessibility="no" android:src="@drawable/added_complication"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@+id/guideline_center_vertical" /> <ImageButton android:id="@+id/right_complication" style="?android:borderlessButtonStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/transparent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@+id/guideline_center_vertical" />

プレビュー画面の初期化 (PreviewAndComplicationsViewHolder.kt) class PreviewAndComplicationsViewHolder( context: Context, parent: ViewGroup? ) :
RecyclerView.ViewHolder( ViewholderPreviewAndComplicationsBinding.inflate( LayoutInflater.from(context), parent, false ).root ) { private val binding: ViewholderPreviewAndComplicationsBinding = DataBindingUtil.bind(itemView)

プレビュー画面の初期化 (PreviewAndComplicationsViewHolder.kt) fun bind( context: Context, complicationClickListener: (complicationLocation: ComplicationLocation) ->Unit
) { val defaultDrawable = context.getDrawable(R.drawable.add_complication) binding.run { leftComplication.run { setImageDrawable(defaultDrawable) setOnClickListener { view -> onClickComplication(view, complicationClickListener) } } leftComplicationBackground.visibility = View.INVISIBLE

プレビュー画面の初期化 (PreviewAndComplicationsViewHolder.kt) rightComplication.run { setImageDrawable(defaultDrawable) setOnClickListener { view -> onClickComplication(view,
complicationClickListener) } } rightComplicationBackground.visibility = View.INVISIBLE } }

プレビュー画面の初期化 (PreviewAndComplicationsViewHolder.kt) private fun onClickComplication( view: View, complicationClickListener: (complicationLocation: ComplicationLocation)
-> Unit ) { val complicationLocation: ComplicationLocation? = when (view.id) { R.id.left_complication -> ComplicationLocation.LEFT R.id.right_complication -> ComplicationLocation.RIGHT else -> null } complicationLocation?.let { complicationClickListener(it) launchComplicationHelperActivity(view.context, it) } }

プレビュー画面の初期化 (ComplicationsConfigRecyclerViewAdapter.kt) override fun onBindViewHolder( holder: RecyclerView.ViewHolder, position: Int )
{ if (holder is PreviewAndComplicationsViewHolder) { holder.bind(context, { selectedComplicationLocation = it })

Complication選択画面 (PreviewAndComplicationsViewHolder.kt) private fun launchComplicationHelperActivity( context: Context, complicationLocation: ComplicationLocation )
{ val activity = context as? Activity ?: return // Complicationを表示するWatchFace val watchFace = ComponentName( activity, DigitalWatchFaceService::class.java)

Complication選択画面 (PreviewAndComplicationsViewHolder.kt) // Complication選択画面へのIntent val intent = ComplicationHelperActivity.createProviderChooserHelperIntent( activity, watchFace,
complicationLocation.complicationId, *complicationLocation.complicationSupportedTypes ) activity.startActivityForResult( intent, ComplicationsConfigActivity.COMPLICATION_CONFIG_REQUEST_CODE ) }

Complication選択画面 (ComplicationsConfigActivity.kt) override fun onActivityResult( requestCode: Int, resultCode: Int, data:
Intent? ) { super.onActivityResult(requestCode, resultCode, data) if (requestCode == COMPLICATION_CONFIG_REQUEST_CODE && resultCode == Activity.RESULT_OK && data != null) { complicationsConfigRecyclerViewAdapter?.updateSelectedComplication( data.getParcelableExtra( ProviderChooserIntent.EXTRA_PROVIDER_INFO )) }

ComplicationをUIに反映 (ComplicationsConfigRecyclerViewAdapter.kt) fun updateSelectedComplication( complicationProviderInfo: ComplicationProviderInfo? ) { val complicationLocation
= selectedComplicationLocation ?: return updateComplicationView( complicationProviderInfo, complicationLocation ) }

ComplicationをUIに反映 (ComplicationsConfigRecyclerViewAdapter.kt) fun updateComplicationView( complicationProviderInfo: ComplicationProviderInfo?, complicationLocation: ComplicationLocation ) {
previewAndComplicationsViewHolder?.updateComplicationViews( complicationProviderInfo, complicationLocation ) }

ComplicationをUIに反映 (PreviewAndComplicationsViewHolder.kt) fun updateComplicationViews( complicationProviderInfo: ComplicationProviderInfo?, complicationLocation: ComplicationLocation ) {
val button: ImageButton val background: ImageView when (complicationLocation) { ComplicationLocation.LEFT -> { button = binding.leftComplication background = binding.leftComplicationBackground } ComplicationLocation.RIGHT -> { button = binding.rightComplication background = binding.rightComplicationBackground } }

ComplicationをUIに反映 (PreviewAndComplicationsViewHolder.kt) // データが入っていなければ「＋」アイコンをセットする if (complicationProviderInfo == null) { button.setImageDrawable(
button.context.getDrawable(R.drawable.add_complication)) background.visibility = View.INVISIBLE return } // データが入っていればProviderIconをセットする button.setImageIcon(complicationProviderInfo.providerIcon) background.visibility = View.VISIBLE }

起動時にComplicationを取得 (ComplicationsConfigRecyclerViewAdapter.kt) class ComplicationsConfigRecyclerViewAdapter( private val context: Context ) :
RecyclerView.Adapter<RecyclerView.ViewHolder>() { private val providerInfoRetriever: ProviderInfoRetriever = ProviderInfoRetriever( context.applicationContext, Executors.newCachedThreadPool() ).apply { init() }

起動時にComplicationを取得 (ComplicationsConfigRecyclerViewAdapter.kt) override fun onBindViewHolder( holder: RecyclerView.ViewHolder, position: Int )
{ if (holder is PreviewAndComplicationsViewHolder) { ... providerInfoRetriever.retrieveProviderInfo( callback, ComponentName(context, DigitalWatchFaceService::class.java), *ComplicationLocation.getComplicationIds() ) } }

起動時にComplicationを取得 (ComplicationsConfigRecyclerViewAdapter.kt) val callback = object : ProviderInfoRetriever.OnProviderInfoReceivedCallback() { override
fun onProviderInfoReceived( watchFaceComplicationId: Int, complicationProviderInfo: ComplicationProviderInfo? ) { complicationProviderInfo?.let { providerInfo -> ComplicationLocation.valueOf(watchFaceComplicationId) ?.let { complicationLocation -> updateComplicationView(providerInfo, complicationLocation) } } } }

起動時にComplicationを取得 (ComplicationsConfigRecyclerViewAdapter.kt) override fun onDetachedFromRecyclerView(recyclerView: RecyclerView?) { super.onDetachedFromRecyclerView(recyclerView) providerInfoRetriever.release() }

Complicationを表示する (DigitalWatchFaceService.Engine) private var complicationDrawableSparseArray = SparseArray<ComplicationDrawable>( ComplicationLocation.getComplicationIds().size ).apply {
put( ComplicationLocation.LEFT.complicationId, ComplicationDrawable(applicationContext) ) put( ComplicationLocation.RIGHT.complicationId, ComplicationDrawable(applicationContext) ) }

Complicationを表示する (DigitalWatchFaceService.Engine) override fun onCreate(holder: SurfaceHolder?) { super.onCreate(holder) setWatchFaceStyle( WatchFaceStyle.Builder(this@DigitalWatchFaceService)
.setAcceptsTapEvents(true) .build()) // 有効なComplicationIdをセットする setActiveComplications(*ComplicationLocation.getComplicationIds()) }

Complicationを表示する (DigitalWatchFaceService.Engine) private fun drawComplications(canvas: Canvas, currentTimeMillis: Long) { val
complicationSize = canvas.width / 4 complicationDrawableSparseArray[ComplicationLocation.LEFT.complicationId].run { setBounds( canvas.width / 2 - COMPLICATION_MARGIN - complicationSize, datePosition.y + dateBounds.height(), canvas.width / 2 - COMPLICATION_MARGIN, datePosition.y + dateBounds.height() + complicationSize ) }

Complicationを表示する (DigitalWatchFaceService.Engine) complicationDrawableSparseArray[ComplicationLocation.RIGHT.complicationId].run { setBounds( canvas.width / 2 + COMPLICATION_MARGIN,
datePosition.y + dateBounds.height(), canvas.width / 2 + COMPLICATION_MARGIN + complicationSize, datePosition.y + dateBounds.height() + complicationSize ) }

Complicationを表示する (DigitalWatchFaceService.Engine) ComplicationLocation.getComplicationIds().forEach { complicationId -> // Complicationをcanvasに描画する complicationDrawableSparseArray[complicationId].draw(canvas, currentTimeMillis)
} }

Complicationを表示する (DigitalWatchFaceService.Engine) override fun onDraw(canvas: Canvas, bounds: Rect) { super.onDraw(canvas,
bounds) val now = System.currentTimeMillis() // 時間を更新 calendar.timeInMillis = now ... drawComplications(canvas, now) }

Complicationを表示する (DigitalWatchFaceService.Engine) override fun onTapCommand( tapType: Int, x: Int, y:
Int, eventTime: Long) { super.onTapCommand(tapType, x, y, eventTime) if (tapType == WatchFaceService.TAP_TYPE_TAP) { ComplicationLocation.getComplicationIds().forEach { // ComplicationDrawableの範囲内ならtrue val successfulTap = complicationDrawableSparseArray[it].onTap(x, y) if (successfulTap) return } } }

Complicationを表示する (DigitalWatchFaceService.Engine) override fun onComplicationDataUpdate( watchFaceComplicationId: Int, data: ComplicationData) {
super.onComplicationDataUpdate(watchFaceComplicationId, data) complicationDrawableSparseArray[watchFaceComplicationId].run { setComplicationData(data) } invalidate() }

AndroidManifest.xml <uses-permission android:name= "com.google.android.wearable.permission.RECEIVE_COMPLICATION_ DATA" />

AndroidManifest.xml <activity android:name="android.support.wearable.complications.ComplicationHelperActivity" /> <activity android:name=".ComplicationsConfigActivity"> <intent-filter> <action android:name="net.syarihu.android.watchfacesample.CONFIG_COMPLICATION" />
<category android:name= "com.google.android.wearable.watchface.category.WEARABLE_CONFIGURATION" /> <category android:name="android.intent.category.DEFAULT" /> </intent-filter> </activity> <receiver android:name=".ComplicationReceiver" />

AndroidManifest.xml <service android:name=".DigitalWatchFaceService" … > <meta-data android:name="com.google.android.wearable.watchface.wearableConfigurationAction" android:value="net.syarihu.android.watchfacesample.CONFIG_COMPLICATION" />

Complications Data Providerを作る

Complication Data Providers • Watch Faceにデータを提供するアプリ

今回作るもの • タップしたらインクリメントする RANGED_VALUE のData Provider

class ComplicationReceiver : BroadcastReceiver() { override fun onReceive(context: Context, intent:
Intent) { val extras = intent.extras ?: return val pref = PreferenceManager .getDefaultSharedPreferences(context) val provider = extras.getParcelable<ComponentName>( EXTRA_PROVIDER_COMPONENT) val complicationId = extras.getInt(EXTRA_COMPLICATION_ID) タップ後のイベントを受け取る (ComplicationReceiver.kt)

override fun onReceive(context: Context, intent: Intent) { ... val preferenceKey
= getPreferenceKey( provider, complicationId) val value = pref.getFloat(preferenceKey, 0f) pref.edit().apply { putFloat(preferenceKey, if (value + 1f < 11f) { value + 1f } else { 0f }) }.apply() タップ後のイベントを受け取る (ComplicationReceiver.kt)

override fun onReceive(context: Context, intent: Intent) { … // 対象のComplicationIdの変更をリクエストする
val requester = ProviderUpdateRequester(context, provider) requester.requestUpdate(complicationId) } タップ後のイベントを受け取る (ComplicationReceiver.kt)

companion object { private const val EXTRA_PROVIDER_COMPONENT = "providerComponent" private
const val EXTRA_COMPLICATION_ID = "complicationId" internal fun getPreferenceKey( provider: ComponentName, complicationId: Int): String { return provider.className + complicationId } タップ後のイベントを受け取る (ComplicationReceiver.kt)

internal fun getIntent( context: Context, provider: ComponentName, complicationId: Int ):
PendingIntent { val intent = Intent(context, ComplicationReceiver::class.java) intent.putExtra(EXTRA_PROVIDER_COMPONENT, provider) intent.putExtra(EXTRA_COMPLICATION_ID, complicationId) return PendingIntent.getBroadcast( context, complicationId, intent, PendingIntent.FLAG_UPDATE_CURRENT) } } タップ後のイベントを受け取る (ComplicationReceiver.kt)

class RangedValueProviderService : ComplicationProviderService() { override fun onComplicationUpdate( complicationId: Int,
type: Int, manager: ComplicationManager ) { // 対象のComplicationDataでなければ何もしない if (type != ComplicationData.TYPE_RANGED_VALUE) { manager.noUpdateRequired(complicationId) return } ProviderServiceを作る (RangedValueProviderService.kt)

val thisProvider = ComponentName(this, javaClass) val complicationPendingIntent = ComplicationReceiver.getIntent( this,
thisProvider, complicationId ) val preferences = PreferenceManager.getDefaultSharedPreferences(this) val state = preferences.getFloat( ComplicationReceiver.getPreferenceKey( thisProvider, complicationId ), 0f) ProviderServiceを作る (RangedValueProviderService.kt)

val complicationData = ComplicationData.Builder(type) .setMinValue(0f) .setMaxValue(10f) .setValue(state) .setShortText( ComplicationText.plainText(state.toInt().toString())) .setIcon(Icon.createWithResource(
this, R.drawable.ic_cc_settings_button_bottom)) .setTapAction(complicationPendingIntent) .build() // ComplicationDataの変更を通知する manager.updateComplicationData( complicationId, complicationData) ProviderServiceを作る (RangedValueProviderService.kt)

AndroidManifest.xml <service android:name=".RangedValueProviderService" android:icon="@drawable/ic_donut_large_24dp" android:label="@string/ranged_value" android:permission= "com.google.android.wearable.permission.BIND_COMPLICATION_PR OVIDER"> <intent-filter> <action
android:name=" android.support.wearable.complications.ACTION_COMPLICATION_U PDATE_REQUEST" /> </intent-filter>

AndroidManifest.xml <service ...> <meta-data android:name= "android.support.wearable.complications.SUPPORTED_TYPES" android:value="RANGED_VALUE" /> <meta-data android:name=
"android.support.wearable.complications.UPDATE_PERIOD_SECOND S" android:value="0" /> </service>

実行する

Complication Provider Serviceが複数ある場合

まとめ

まとめ • CanvasWatchFaceServiceを使えばデジタル時計であれば簡単に作成できる

まとめ • Complications対応するには ◦ Complicationsの設定画面 ◦ ComplicationDrawableを利用したWatchFaceへの Complicationsの描画

まとめ • Complication Data Providerを作れば、Complicationsに対応しているどのWatchFaceにもそのデータを描画できる

まとめ • 今回作ったサンプルコード https://github.com/syarihu/WatchFaceSample

ぜひオリジナルのWatch Faceや Complication Providersを作ってみてください！

ご清聴ありがとうございました

[DroidKaigi 2018] Android WearのWatch Faceを作ろう 〜...

[DroidKaigi 2018] Android WearのWatch Faceを作ろう 〜時計の盤面に小さな情報を添えて〜

More Decks by syarihu

Other Decks in Technology

Featured

Transcript

[DroidKaigi 2018] Android WearのWatch Faceを作ろう〜...

[DroidKaigi 2018] Android WearのWatch Faceを作ろう〜時計の盤面に小さな情報を添えて〜