Jetpack Composeのデモアプリを動かしてみた #io19 #io19jp

Android Jepack Composeを試したい人に。
2019.06.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Google I/O 2019のDeveloper KeynoteでJetpack Composeが発表されました。

2019年05月07日の発表後にオープンソースのプロジェクトとして公開された段階で、まだライブラリとしては配布されていません。この記事では、AOSP(Android Open Source Project)に含まれているJetpack Composeのソースコードをビルドして試すための手順を記載します。

Jetpack Composeとは

Jetpack Composeは、FlutterやReactのように宣言的な記述でUIを構築、リアクティブプログラミングが行えるUIツールキットです。

図は「Google Developers Japan: Android Jetpack の新機能」より引用

Repoコマンドのインストール

方法1 スクリプトファイルをダウンロードする

PATHが通っているディレクトリにrepoのスクリプトファイルをダウンロードして、実行権限を追加します。

$ curl https://storage.googleapis.com/git-repo-downloads/repo > $HOME/bin/repo
$ chmod a+x $HOME/bin/repo

方法2 Homebrewでインストールする

Homebrewが導入されている場合は、次のようにインストールできます。

$ brew install repo

AndroidXのリポジトリのダウンロード

まず、リポジトリをダウンロードするディレクトリを作成します(この記事ではホームディレクトリにandroidx-master-devを作成します)。

$ mkdir $HOME/androidx-master-dev

次に、作成したディレクトリに移動して、repoコマンドで初期化します。

$ cd $HOME/androidx-master-dev
$ repo init -u https://android.googlesource.com/platform/manifest -b androidx-master-dev
...

Your identity is: XXX <xxx@example.com>
If you want to change this, please re-run 'repo init' with --config-name

repo has been initialized in /Users/xxx/androidx-master-dev

最後に、AndroidXのソースコードをダウンロードします。約6GBあるので少し時間がかかります。ストレージの空き容量に気を付けてください。

repo sync -j8 -c

推奨のAndroid Studioのダウンロードと起動

Jetpack Composeのディレクトリ(frameworks/support/ui)に移動して、Jetpack Compose自体の開発で推奨されているAndroid Studioをダウンロードします。最後にライセンスへの同意を求められます。

$ cd $HOME/androidx-master-dev/frameworks/support/ui
$ ./studiow
... (zipファイルのダウンロードと解凍、Gradleまわりのセットアップが走る?)
Do you accept the license agreement at /Users/XXX/androidx-master-dev/frameworks/support/ui/studio/android-studio-ide-183.5543569-mac/Android Studio.app/Contents/Resources/LICENSE.txt [Y/n]?

y Enterを入力して同意すると自動でAndroid Studioが起動して、frameworks/support/uiのプロジェクトが開かれます。

Android Studioのダウンロードなどは初回のみです。同じコマンドを使用して、Android Studioでプロジェクトを開き直すことができます。

$ cd $HOME/androidx-master-dev/frameworks/support/ui
$ ./studiow

デモアプリの実行

プロジェクトに、ui-demosui-material-studiesの2つのデモアプリが含まれているので、それぞれ実行してみます。

ui-demos

ui-demosのアプリでは、Jetpack ComposeのUIコンポーネントごとに用意されたデモ画面を表示できます。

たとえば、Material > Floating Action Buttonでは、FABの表示が確認できます。

ui-material-studies

ui-material-studiesのアプリでは、Material studiesに対する実装が確認できます。

2019年06月05日時点で、Rally の一部が実装されていることを確認できました。

Jetpack Compopseのコードを確認

さきほどのui-demosui-material-studiesのUIは、両方ともJetpack Composeで実装されています。

ui-demosのアプリのMaterial > Floating Action Buttonの画面の実装は、ui-material-demosモジュールのFloatingActionButtonDemo.ktに記述されています。

/*
 * Copyright 2019 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package androidx.ui.material.demos

import android.util.Log
import androidx.ui.core.CraneWrapper
import androidx.ui.layout.Center
import androidx.ui.layout.Column
import androidx.ui.layout.MainAxisAlignment
import androidx.ui.material.FloatingActionButton
import androidx.ui.material.MaterialTheme
import androidx.ui.painting.Image
import androidx.compose.Composable
import androidx.compose.composer

@Composable
fun FloatingActionButtonDemo(icon: Image) {
    CraneWrapper {
        MaterialTheme {
            Center {
                val onClick: () -> Unit = { Log.e("FABDemo", "onClick") }
                Column(mainAxisAlignment = MainAxisAlignment.SpaceEvenly) {
                    FloatingActionButton(icon = icon, onClick = onClick)
                    FloatingActionButton(text = "EXTENDED", onClick = onClick)
                    FloatingActionButton(icon = icon, text = "ADD TO FAVS", onClick = onClick)
                }
            }
        }
    }
}

これでJetpack Composeのコードを読んだり、自分で書いてみることができますね。

参考