Jetpack Composeのデモアプリを動かしてみた #io19 #io19jp
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-demosとui-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-demosとui-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のコードを読んだり、自分で書いてみることができますね。
