初めに
この記事は、Jetpack Compose未経験のしがないAndroidエンジニアがチュートリアルをやってみるだけの記事です。
先日のメルカリのイベント Android Office Hours〜2022年の技術トレンド大予想！〜でも、Jetpack Composeは今後Android開発においてデファクトスタンダードになっていくだろうと予想されていました。
Android開発で食べていく以上触っておかないといけないだろうと思い、とりあえずチュートリアルをやってみることにしました。
Jetpack Composeとは
Jetpack Composeは、GoogleがリリースしているAndroidのUI実装のツールで宣言的なUIフレームワークであるという特徴があります。
宣言的UIとは状態をUIに変換するという考え方です。
従来のXMLを用いた開発では、Viewが持つUI更新メソッドを開発者が手動で呼び出して管理する必要がありましたが、アプリの状態が変更されるとUI が自動的に更新される仕組みになっています。
チュートリアルをやってみる
本題に入り、チュートリアルをやっていきます。
プロジェクトの生成
AndroidStudioでEmpty Compose Activity テンプレートを使用してアプリを作成すると、Jetpack Composeが導入された状態でプロジェクトが生成されます。
作成されたプロジェクトは下記のようになっており、既にいくつかCompose要素が定義されています。
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeSampleTheme {
// A surface container using the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
Greeting("Android")
}
}
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
ComposeSampleTheme {
Greeting("Android")
}
}
他にも、ui.themeというパッケージに何やら色々定義されています。
今回は入門編のため、定義されている要素は使わずに1から実装してみます。
4ステップあるチュートリアルのうち下記の二つをやってみたいと思います
1.ハローワールドをやってみる
2.レイアウトをいじってみる
###1. ハローワールドをやってみる
お馴染みのHello worldを表示するコードはこちらです。
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MessageCard("World")
}
}
}
@Composable
fun MessageCard(name: String) {
Text(text = "Hello $name!")
}
通常のAppCompatActivityではなくComponentActivityを継承し、それが持つsetContentメソッドにてコンポーズ可能な関数を呼び出すことでUIを構築していくんですね。
コンポーズ可能な関数には@Composableアノテーションをつけると。
ちなみに、コンポーズ可能な関数に対して@Previewアノテーションをつけることで、アプリをインストールしなくてもAndroidStudioでデザインのプレビューができます。
プレビューするコンポーズ関数はデフォルト値が提供されている必要があるので、MessageCard のように引数を取る場合下記のようにプレビュー用のメソッドを用意する必要があるそうです。
@Preview
@Composable
fun PreviewMessageCard() {
MessageCard("Android")
}
###2. レイアウトをいじってみる
次に、複数の要素を並べる実装をしてみます。
よくあるリストの要素を想定して、左側に画像があり右側にテキスト情報がある画面を作成します。
垂直に要素を並べたいときはcolumnを、並行に並べたいときにはRowを使用します。
data class Message(val author: String, val body: String)
@Composable
fun MessageCard(msg: Message) {
Row {
Image(
painter = painterResource(R.drawable.ic_launcher_foreground),
contentDescription = "Contact profile picture",
)
Column {
Text(text = msg.author)
Text(text = msg.body)
}
}
}
上記を実行した画面がこちらです。
指定した通り画像とテキストが水平に、テキスト同士が垂直に並んではいますが、細かい配置指定をしていないので気持ち悪いデザインになっていますね、調整します。
@Composable
fun MessageCard(msg: Message) {
Row(modifier = Modifier.padding(all = 8.dp)) {
Image(
painter = painterResource(R.drawable.ic_banana),
contentDescription = "Contact profile picture",
modifier = Modifier
.size(40.dp)
.clip(CircleShape)
)
Spacer(modifier = Modifier.width(8.dp))
Column {
Text(text = msg.author)
Spacer(modifier = Modifier.height(4.dp))
Text(text = msg.body)
}
}
}
Modifier修飾子を使ってpaddingやSpacerのサイズを調整しています。
今回は触りませんが、ユーザー入力の処理などにもModifierを用いるらしいです。
上記を実行した画面がこちらです。
まとめ
本当にただただチュートリアルをやっただけでした。
今回はまだ状態の更新を試せていないので正直あまり旨味は感じられませんが、今後色々試せていければと思います。