• トップ
  • ブログ一覧
  • JetpackCompose日記(深いレイアウト階層を恐れないほうが実践的か?)
  • JetpackCompose日記(深いレイアウト階層を恐れないほうが実践的か?)

    以下のような、文字を線で囲ったレイアウトを作りたい場合

    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 では、このような懸念はありません。

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

    ライトコードでは、エンジニアを積極採用中!

    ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

    採用情報へ

    おすすめ記事

    エンジニア大募集中!

    ライトコードでは、エンジニアを積極採用中です。

    特に、WEBエンジニアとモバイルエンジニアは是非ご応募お待ちしております!

    また、フリーランスエンジニア様も大募集中です。

    background