導入
こんにちは、Androidチームの田村です！
弊社Androidチームでは長らくAndroid Viewを使用してUIを構築しておりましたが、リアーキテクチャを進めていく上で状態管理とUIに通知・反映するロジック間で不都合に感じる部分が多々あり、それらを解決する方法の一つとしてJetpack Composeを導入しました。
本記事ではJetpack Composeを初めて導入してみて個人的に開発する上で便利だなと思った機能を備忘を込めてまとめてみました。
機能まとめ
1. 既存のAndroid Viewと相互運用可能
Jetpack ComposeはAndroid Viewから段階的に移行できるように設計されており、それぞれのUIを共存させながら徐々に置き換えて開発していくことができます。
ActivityやFragment、View上にsetContentやComposeViewを利用してComposeベースのコンポーネントを配置したり、逆にComposeベースのコンポーネント上にAndroidViewコンポーザブルを利用して従来のViewを配置することもできます。
2. Preview機能
UI開発をする上でプレビュー機能は欠かせない機能ですが、Jetpack Composeのプレビュー機能は複数の状態を表示させることが可能で、異なるテーマやフォントサイズ、端末サイズといった項目を一括で表示させることができます。
ダークモード
uiMode引数にConfiguration.UI_MODE_NIGHT_YESを設定するとダークモードの状態を確認できます。テーマ毎の差分を一目で確認できます。
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun SampleScreenPreview() {
MyTheme {
SampleScreen()
}
}
システムUI
showSystemUi引数にtrueを設定するとプレビュー上部にステータスバーが表示できます。より端末の表示に近い形を再現できます。
@Preview(showSystemUi = true)
@Composable
fun SampleScreenPreview() {
MyTheme {
SampleScreen()
}
}
フォントサイズ
fontScale引数に任意の倍率を設定すると表示される文字サイズを設定できます。文字サイズによるレイアウト崩れを一目で確認できます。
@Preview(fontScale = 2f)
@Composable
fun SampleScreenPreview() {
MyTheme {
SampleScreen()
}
}
端末サイズ
device引数に任意のデバイス名を設定すると端末サイズの異なるプレビューを確認できます。
@Preview(device = Devices.PIXEL_4)
@Composable
fun SampleScreenPreview() {
MyTheme {
SampleScreen()
}
}
これらの機能でレイアウト崩れなどを早期に発見できるのでぜひ活用したいところです。
3. Live Editにより自動反映機能
Jetpack Composeにはエミュレーターや実機に即座にUIの変更を反映する Live Edit という機能があります。
設定方法はAndroid Studioのメニューから[Android Studio] > [Settings] > [Editor] > [Live Edit]の項目で、Live Edit機能をオンにし手動もしくは自動で反映を選択することで使用できる様になります。
4. マテリアルアイコン
Jetpack Composeでは以下のマテリアルアイコンがプリセットされており、後述のコード例の様に簡単に参照できる様になっています。
出典：https://developer.android.com/reference/kotlin/androidx/compose/material/icons/package-summary
Icon(
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
contentDescription = null,
)
Icon(
imageVector = Icons.AutoMirrored.Outlined.List,
contentDescription = null,
)
5. UIチェック
プレビューの上部から下記のボタンを選択することで作成したUIのチェック機能を実行できます。
以下のように問題がある場合はそれらの箇所がリストアップされる為、適切なUIになるよう早期に発見・対応したいところです。
さいごに
上記で挙げた項目以外にもスクリーンショットテスト（執筆時点で開発中）などさらなる開発の手助けとなる機能はまだまだあり、日々キャッチアップして活用していきたいと思います。
また、弊社プロジェクトにJetpack Composeを導入したばかりでまだまだ試行錯誤の段階ですが、公式のドキュメントやサンプルアプリなども充実しているので熟読し、公式が推奨するモダンな手法をどんどん取り込んでいけたらなと思います！
助太刀では一緒に開発してくれるメンバを募集してます！
少しでもご興味を持っていただけたら下記よりお気軽にご連絡ください！
Discussion