JetpackComposeのチュートリアルをやってみた
こんにちは、tkyです。
かねてから触ってみたかったJetpackComposeのチュートリアルをやってみました。
本稿は2020/08/09時点のAndroid Jetpack compose チュートリアルを実施するに当たり ハマらないため+これからやることをイメージできるようにすることを目的とした共有的な位置づけで記載します。
すでにチュートリアルをやったことがあったり、必要な環境を
事前情報
事前、というか最初にまとめ書いときます。
- jetpack composeを試すにはAndroidStudio canary版が必要
- build gradleバージョンはほぼ最新じゃないとコンパイルエラーになるかも
- jetpack composeバージョンを1つ上げるとコンパイルエラーになることはよくある
Android Studio Canary版をインストールする
ここからCanary版をインストールします。筆者環境はMacなので既存のASと競合することはなかったですが、Win環境の人はインストール先を工夫したりすると良いかもですね。
https://developer.android.com/studio/preview
DL当時は AS 4.2 CANARY7でした。
ちなみにStableのASでjetpack composeを動かそうとすると画像のような通知が表示されます。
app.gradleに必要なもの
Jetpack Composeに必要なものは以下の様です、現時点ではDev13まで進んでいる模様
android { compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } kotlinOptions { jvmTarget = "1.8" } composeOptions { kotlinCompilerExtensionVersion "0.1.0-dev13" } buildFeatures { // Enables Jetpack Compose for this module compose true } } dependencies { implementation 'androidx.ui:ui-core:0.1.0-dev13' implementation 'androidx.ui:ui-tooling:0.1.0-dev13' implementation 'androidx.ui:ui-layout:0.1.0-dev13' implementation 'androidx.ui:ui-material:0.1.0-dev13' }
build.gradleの方も更新が必要です。 最新じゃないと「java.lang.AbstractMethodError」というメッセージのコンパイルエラーが発生してちょっとだけハマります。
classpath "com.android.tools.build:gradle:4.2.0-alpha07"
チュートリアル自体は簡単
こういう関数を作成して、
@Composable fun Greeting(name: String) { Text(text = "Hello $name") }
ActivityのonCreateでsetContentする。 layoutの場合はsetContentView()だったのでまぁまぁ覚えやすいのではないでしょうか。
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Greeting("Android") } }
一応これでビルドするとこちらのようなレイアウトが完成します。
これだけじゃ面白くないし、そもそもTextViewが左によりすぎてますね。
ご安心ください、チュートリアルでちゃんとレイアウト組みます。
いろいろ端折りますが、こんな感じにColumnというレイアウト用のcomposeUIを使ってLinearLayoutのような事ができます。
setContent { Column(modifier = Modifier.padding(16.dp)) { Greeting("Android") Greeting("Android") Greeting("Android") } }
ここで私が抱いた感想はこちらです
「Flutterと同じじゃん、てことは横はRowかな」
はい、Rowでした。ちゃんと横方向レイアウトになりました。
チュートリアルとしてはこの先 ・画像 ・マテリアルデザインの実現(角丸つけたりする)
を行って終了です。
Jetnews という存在
公式のサンプル。チュートリアルの後はこのアプリで実際にどうやってjetpack composeアプリを作るのか学んで行くことになりそうです。
Canary版で新規プロジェクト
を作ることもできます。
ここから作ることで最新のJetPackCompose環境が作れるので自身の環境でビルドエラーになってしまったときなどは このプロジェクトとの差分を見ることでトラブルシューティングできるかもしれません。
これから
jetpack compose チュートリアルをやってみました。 ReactやFlutterなどの宣言的UIでレイアウト組んだことはあったので自然に馴染むことはできました。
今後は ・どのようにUIを作るか、どの単位でUIを作るか ・命名規則 ・パッケージ構成の考察 ・コピペで使える逆引きCompose ・FlutterとかReactとか宣言型UIと比較してみて
このあたりを書いてみるのも面白いかなと思いました。