• トップ
  • ブログ一覧
  • JetpackCompose日記(深いレイアウト階層を恐れないほうが実践的か?)
  • 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 では、このような懸念はありません。

    と記述されているので
    わかりやすさ優先で、レイアウトの階層を恐れずに深くしていきましょう。

    えばたん(エンジニア)

    えばたん(エンジニア)

    おすすめ記事