chocoZAPアプリのMultipreview annotations

■ イベント
2024年11月13日開催
KINTOテクノロジーズ×RIZAPテクノロジーズ Mobile Tips
https://rizap.connpass.com/event/334440/

■ 発表者
chocoZAP Androidエンジニア
藤井 賢太郎

Transcript

1. chocoZAPアプリの Multipreview annotations
2. アジェンダ • 自己紹介 • Multipreview annotations とは • Multipreview annotations の表示確認 • chocoZAPアプリの Multipreview annotations • まとめ
3. 自己紹介
4. 藤井賢太郎
5. RIZAPテクノロジーズ株式会社
6. Androidアプリエンジニア
7. chocoZAPアプリ
8. Multipreview annotations とは
9. ui-tooling-preview
10. リリースノート
11. Version 1.2.0-alpha06
12. @Previewでアノテーションクラスを アノテーションできる
13. @Preview(fontScale = 1f) @Preview(fontScale = 2f) @Preview(device = "spec:parent=pixel_8,orientation=landscape") @Composable private fun PreviewSampleScreen() { SampleAppTheme { SampleScreen() } }
14. Version 1.6.0-alpha01
15. 一般的なセットを用意した
16. @PreviewLightDark @Composable private fun PreviewSampleScreen() { SampleAppTheme { SampleScreen() } }
17. @PreviewLightDark @PreviewScreenSizes @PreviewFontScale @PreviewDynamicColors
18. ComposeのPreview表示を補助する
19. Multipreview annotations の表示確認
20. サンプル画面の説明
22. @OptIn(ExperimentalMaterial3Api::class) @Composable fun SampleScreen() { Scaffold( topBar = { TopAppBar( title = { Text(text = "サンプル画面") } ) } ) { Box( modifier = Modifier .fillMaxSize() .padding(it) ) { Column( modifier = Modifier .fillMaxSize() .padding( start = 16.dp, end = 16.dp, bottom = 16.dp, ), verticalArrangement = Arrangement.spacedBy( space = 16.dp, alignment = Alignment.CenterVertically, ), ) { Text( text = "SampleSampleSampleSampleSampleSample", maxLines = 1, overflow = TextOverflow.Ellipsis, ) Button( onClick = {}, modifier = Modifier.fillMaxWidth(), ) { Text(text = "ボタン") } } } } }
23. @OptIn(ExperimentalMaterial3Api::class) @Composable fun SampleScreen() { Scaffold( topBar = { TopAppBar( title = { Text(text = "サンプル画面") } ) } ) { Box( modifier = Modifier .fillMaxSize() .padding(it) ) { Column( modifier = Modifier .fillMaxSize() .padding( start = 16.dp, end = 16.dp, bottom = 16.dp, ), verticalArrangement = Arrangement.spacedBy( space = 16.dp, alignment = Alignment.CenterVertically, ), ) { Text( text = "SampleSampleSampleSampleSampleSample", maxLines = 1, overflow = TextOverflow.Ellipsis, ) Button( onClick = {}, modifier = Modifier.fillMaxWidth(), ) { Text(text = "ボタン") } } } } }
24. TopAppBar( title = { Text(text = "サンプル画面") } ) Text( text = "SampleSampleSampleSampleSampleSample", maxLines = 1, overflow = TextOverflow.Ellipsis, ) Button( onClick = {}, modifier = Modifier.fillMaxWidth(), ) { Text(text = "ボタン") }
25. TopAppBar( title = { Text(text = "サンプル画面") } ) Text( text = "SampleSampleSampleSampleSampleSample", maxLines = 1, overflow = TextOverflow.Ellipsis, ) Button( onClick = {}, modifier = Modifier.fillMaxWidth(), ) { Text(text = "ボタン") }
26. TopAppBar( title = { Text(text = "サンプル画面") } ) Text( text = "SampleSampleSampleSampleSampleSample", maxLines = 1, overflow = TextOverflow.Ellipsis, ) Button( onClick = {}, modifier = Modifier.fillMaxWidth(), ) { Text(text = "ボタン") }
27. TopAppBar( title = { Text(text = "サンプル画面") } ) Text( text = "SampleSampleSampleSampleSampleSample", maxLines = 1, overflow = TextOverflow.Ellipsis, ) Button( onClick = {}, modifier = Modifier.fillMaxWidth(), ) { Text(text = "ボタン") }
28. >@Previewでアノテーションクラスを アノテーションできる
29. @Previewを重ねてみる
30. @Preview(fontScale = 1f) @Preview(fontScale = 2f) @Preview(device = "spec:parent=pixel_8,orientation=landscape") @Composable private fun PreviewSampleScreen() { SampleAppTheme { SampleScreen() } }
32. >一般的なセットを用意した
33. 用意されたものを使ってみる
34. @PreviewLightDark @Composable private fun PreviewSampleScreen() { SampleAppTheme { SampleScreen() } }
36. chocoZAPアプリの Multipreview annotations
37. 観点
38. 画面サイズ
39. 表示方向
40. フォントサイズ
41. @Preview( name = "01. 普通端末 縦表示 フォント85%", group = "普通端末", device = "spec:parent=pixel_8", fontScale = 0.85f, )
42. @Preview( name = "02. 普通端末 縦表示 フォント100%", group = "普通端末", device = "spec:parent=pixel_8", fontScale = 1f, )
43. @Preview( name = "03. 普通端末 縦表示 フォント200%", group = "普通端末", device = "spec:parent=pixel_8", fontScale = 2f, )
44. @Preview( name = "04. 普通端末 横表示 フォント100%", group = "普通端末", device = "spec:parent=pixel_8,orientation=landscape", fontScale = 1f, )
45. @Preview( name = "10. 小さい端末 縦表示 フォント100%", group = "小さい端末", device = "id:small_phone", fontScale = 1f, )
46. @Preview( name = "11. 小さい端末 縦表示 フォント200%", group = "小さい端末", device = "id:small_phone", fontScale = 2f, )
47. @Preview( name = "20. Foldable端末 縦表示 フォント100%", group = "Foldable端末", device = "spec:parent=pixel_fold", fontScale = 1f, )
48. @ChocoZapPreviews
49. @Preview( name = "01. 普通端末 縦表示 フォント85%", group = "普通端末", device = "spec:parent=pixel_8", fontScale = 0.85f, ) @Preview( name = "02. 普通端末 縦表示 フォント100%", group = "普通端末", device = "spec:parent=pixel_8", fontScale = 1f, ) @Preview( name = "03. 普通端末 縦表示 フォント200%", group = "普通端末", device = "spec:parent=pixel_8", fontScale = 2f, ) @Preview( name = "04. 普通端末 横表示 フォント100%", group = "普通端末", device = "spec:parent=pixel_8,orientation=landscape", fontScale = 1f, ) @Preview( name = "10. 小さい端末 縦表示 フォント100%", group = "小さい端末", device = "id:small_phone", fontScale = 1f, ) @Preview( name = "11. 小さい端末 縦表示 フォント200%", group = "小さい端末", device = "id:small_phone", fontScale = 2f, ) @Preview( name = "20. Foldable端末 縦表示 フォント100%", group = "Foldable端末", device = "spec:parent=pixel_fold", fontScale = 1f, ) annotation class ChocoZapPreviews
51. まとめ
52. Multipreview annotations は
53. @Preview を重ねていく
54. ライト/ダークなど 用意されているものがある
55. chocoZAPアプリでは
56. 画面サイズ 表示方向 フォントサイズ
57. 普通、小さい、Foldable
58. 縦/横表示
59. フォントサイズ小/中/大
61. ご清聴ありがとうございます