えばたん(エンジニア)
JetpackCompose日記(深いレイアウト階層を恐れないほうが実践的か?)
えばたん(エンジニア)
2024.02.19
IT技術
以下のような、文字を線で囲ったレイアウトを作りたい場合
Modifierの順番を工夫することで実現できる。
1@Composable
2fun MyLabel1() {
3 Text(
4 modifier = Modifier
5 .padding(all = 4.dp) // 外側のpadding
6 .border(
7 width = 2.dp,
8 color = Color.Blue
9 )
10 .padding(all = 8.dp), // 内側のpadding
11 text = "Border付きテキスト1"
12 )
13}
ただ、これはあまり実践的ではないと思います。
Modiferへの設定順番を利用した書き方だが・・・
「.padding(all = 4.dp)」が枠線の外側なのか内側なのか、パッと見では分からないことが大問題。
JetpackComposeのいいところは
「パッと見でどのようなViewが定義されているのかがわかること」なので
この書き方では、その利点を殺していると言える。
より実践的なのは?
レイアウトの階層を深くしたほうが、誰が見ても分かりやすいですよね。
1@Composable
2fun MyLabel2() {
3 Box(
4 modifier = Modifier
5 .padding(all = 4.dp)
6 .border(
7 width = 2.dp,
8 color = Color.Blue
9 )
10 ) {
11 Text(
12 modifier = Modifier
13 .padding(all = 8.dp),
14 text = "Border付きテキスト1"
15 )
16 }
17}
ComposeのConstraintLayoutのDevelopersにも記載されている通り
注: View システムでは、大規模で複雑なレイアウトを作成する場合、ConstraintLayout を使用することが推奨されていました。これは、ネストされたビューよりもフラットなビュー階層の方がパフォーマンスに優れているためです。しかし、深いレイアウト階層を効率的に扱える Compose では、このような懸念はありません。
と記述されているので
わかりやすさ優先で、レイアウトの階層を恐れずに深くしていきましょう。
ライトコードでは、エンジニアを積極採用中!
ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
おすすめ記事
immichを知ってほしい
キムくん(エンジニア)
2024.10.31