Glanceであそぼ

はじめに

こんにちは。どすこいです。
今回は先日リリースされた、Glance 1.0.0-alpha(ComposeでAppWidgetを作れるやつ)で遊んでいきたいと思います。

Glanceの詳細に関してはこちらの記事をご覧ください。

環境

Kotlin 1.6
AGP 7.1.0-beta05

1.準備

まずはbuild.gradle(app)に依存関係を書いていきます。

build.gradle(app)

dependencies {
    implementation "androidx.glance:glance:1.0.0-alpha01"
   implementation "androidx.glance:glance-appwidget:1.0.0-alpha01"
}

android {
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.1.0-beta04"
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }
}

2.作ってみよう

まずGlanceに必要な要素は、

• GlanceAppWidgetReceiver
• GlanceAppWidget

です。上記の各クラスを継承したクラスを作りましょう

class GlanceAppWidgetSample : GlanceAppWidget() {
    @Composable
    override fun Content() {

    }

}

class GlanceAppWidgetReceiverSample : GlanceAppWidgetReceiver() {

    override val glanceAppWidget: GlanceAppWidget
        get() = GlanceAppWidgetSample()
}

こんな感じ

次にmeta-dataを用意します。これはWidgetの設定などをまとめたファイルです。

xml/glance_appwidget_sample_meta_data.xml

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:targetCellHeight="2"
    android:targetCellWidth="2"
    android:previewImage="@drawable/ic_launcher_background"
    android:resizeMode="horizontal|vertical"
    android:widgetCategory="home_screen"
    android:updatePeriodMillis="86400000"
    android:initialLayout="@layout/glance_appwidget_sample" />

targetCellWidthとtargetCellHeightはAndroid12以上でしか動かないので注意です。

次にGlanceAppWidgetSampleReceiverと上記のmeta-dataをAndroidManifest.xmlに登録していきます。

AndroidManifest.xml

<receiver 
    android:name=".GlanceAppWidgetReceiverSample"
    android:exported="false">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
    </intent-filter>
    <meta-data
        android:name="android.appwidget.provider"
        android:resource="@xml/glance_appwidget_sample_meta_data" />
</receiver>

これで準備は完了です。

さて先ほどのGlanceAppWidgetSampleクラスに怪しい記述がありましたね。

class GlanceAppWidgetSample : GlanceAppWidget() {
    @Composable
    override fun Content() {

    }
}

@Composableの記述がありますね。
つまりここにComposeの記述をしていけばいいわけです。

早速作っていきましょう。

最初はとてもシンプルにTextだけ

@Composable
override fun Content() {
    Text(text = "Glance")
}

なんの背景もなしにGlanceとだけ表示されましたね。

次に背景を設定していきます。

@Composable
override fun Content() {
    Box(
        modifier = GlanceModifier.fillMaxSize().background(Color.White),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "Glance")
    }
}

いい感じですね
Composeを経験した方ならオッと思うような記述があることに気づくと思います。

普段はfillMaxSizeやbackgroundを設定する際はModifierを使うと思うのですが、今回はGlanceModifierを用いています。
中のコードは読んでないのでただの推測ですが、ComposeをRemoteViewに変換する際に普段のModifierではうまくできないのでGlanceModifierを用意しているのかなと思ってます。
また今度ComposeをRemoteViewに変換するところは解説したいですね。

ちなみにimportを見ても

import androidx.glance.background
import androidx.glance.layout.Alignment
import androidx.glance.layout.Box
import androidx.glance.layout.fillMaxSize
import androidx.glance.text.Text

androidx.compose.uiに生えているBox等ではなく、androidx.glanceに生えているBoxなので、根本的にものが違うのでしょう。

3.遊んでみよう

次にリスト表示をしてみたいと思います。
従来のRemoteViewを使ったAppWidgetでリスト表示をするのはとても大変でした。
気になる方は下のリンクを覗いてみてください。

Composeでリスト表示はLazyColumnやLazyRowですね。
これらでリスト表示をしてみたいと思います。

private val pokemonList = listOf(
    "ピカチュウ",
    "カイリュー",
    "ヤドラン",
    "ピジョン",
    "コダック",
    "コラッタ",
    "ズバット",
    "ギャロップ",
    "サンダース",
    "メノクラゲ",
    "パウワウ",
    "カラカラ",
    "タマタマ",
    "ガラガラ",
    "フシギダネ"
)
@Composable
override fun Content() {
    Box(
        modifier = GlanceModifier.fillMaxSize().background(Color.White),
        contentAlignment = Alignment.Center
    ) {
        LazyColumn {
            items(pokemonList) {
                Text(text = it)
            }
        }
    }
}

とても簡単ですね

次はリストのどれかがタップされたらActivityを開くようにしましょう。
これも従来のやり方だとPendingIntentを発行して、それをViewに紐付けて...的なことをしなければいけませんでした。
少し面倒ですね。
Glanceではどう変わったのでしょうか。

@Composable
override fun Content() {
    Box(
        modifier = GlanceModifier.fillMaxSize().background(Color.White),
        contentAlignment = Alignment.Center
    ) {
        LazyColumn {
            items(pokemonList) {
                Text(
                    modifier = GlanceModifier.clickable(actionStartActivity<MainActivity>()),
                    text = it
                )
            }
        }
    }
}

ちょっとクリックしたところはわかりにくいですが、実際はリストの要素をクリックしています。
これもとても簡単になりましたね。

4.まとめ

Glanceがリリースされ、AppWidgetが今までよりも簡単に、そしてより直感的に作ることが可能になりましたね。
皆さんもぜひGlanceで遊んでみてください。