🔍
ゆめみ社のAndroidインターンに参加してきたので学んだことをまとめておく(Compose のプレビュー機能編)
ゆめみ社の Android インターンに参加しました。
なかなかにありがたい経験をさせてもらえたので、アウトプットします 👍
- 基本的には課題を進めていく 🚶
- 課題は AndroidView で開発する前提になっていたが、Jetpack Compose の方が得意という旨を伝えると、Compose を使って UI を作っていくことに。柔軟に対応していただくことができた。感謝 😊
Compose のプレビュー機能
Compose のプレビュー機能はめちゃめちゃ充実していると思い知らされました。
@Preview
の引数
こちらの通り。
いくつかピックアップしてみます。
name,showBackground
@Preview(
name = "previewSample",
showBackground = true,
)
@Composable
fun PreviewSample() {
Sample()
}
タイトルと背景が表示されました。
ダークモード
uiMode
引数でダークモードに設定できます。
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun MyPreviews() {
Text("${isSystemInDarkTheme()}")
}
ちなみに背景を暗くしたり、文字を明るくしたりしたかったらテーマやSurface
を使えばいい感じになります。
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun MyPreviews() {
MaterialTheme(
colors = if (isSystemInDarkTheme()) {
darkColors()
} else {
lightColors()
},
) {
Surface {
Text("${isSystemInDarkTheme()}")
}
}
}
ライトモード時
ダークモード時
画面サイズを指定する
widthDp
やheightDp
を指定すれば表示幅(画面サイズ)を指定できます。注意としてはwidthDp = 100.dp
ではなく Int 型(widthDp = 100
)で指定します。
@Preview(widthDp = 100)
@Composable
fun MyPreview() {
Column {
Text("s")
Text("normal")
Text("very very very very very very very very very very long text")
}
}
横幅が 100dp の時に very very ... long text
がきちんと改行されているのが確認できたりします。
プレビューをまとめる
Android Studio Dolphin
ではプレビューモードを 1 つのアノテーションにまとめることができます。
ダークモードの時のプレビューとライトモードの時のプレビューをまとめる
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
annotation class MultiModePreviews
例のようにダークモードとライトモードのプレビューをまとめてMultiModePreviews
をつけるだけで二つのプレビューを作ってくれます 😍
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
annotation class MultiModePreviews
@MultiModePreviews
@Composable
fun MyPreview() {
Text("${isSystemInDarkTheme()}")
}
他にもwidthDp
を複数パターン用意したりできそうですね。
PreviewParameter
UI は同じだけど表示するものが少し違う。そんな時は違う部分だけをまとめて渡したいですよね!
PreviewParameter
を使えば Preview コンポーザブルに引数として違う部分だけをまとめて渡せます。
文字列が"s","normal text","very ... long text"を表示するプレビュー
class TextPreviewProvider : PreviewParameterProvider<String> {
override val values: Sequence<String>
get() = sequenceOf(
"s",
"normal text",
"very very very very very very very very very very very very very very very very very very long text",
)
}
@Preview
@Composable
fun MyPreview(
@PreviewParameter(TextPreviewProvider::class) text: String,
) {
Text(text)
}
この例ではテキストが短くても長くてもレイアウトが崩れないかチェックするみたいなことができます。
Discussion