Jetpack ComposeにおけるLayoutの共通化処理について

概要

おはこんにちは！
エキサイトホールディングス新卒の奥田です！
本日はJetpack Composeを使用したLayoutの共通化処理について記事を執筆していきます。（具体的な実装方法については公式ドキュメントを参照していただけると幸いです。）

論点

Jetpack ComposeでLayoutを作成する場合に共通化することで実装を効果的に進めることができます。
具体的には「チーム内でのLayoutの統一」ができる、「Layout全体に修正がある場合にも柔軟に対応可能」などの利点があります。

実装

実際の共通化したLayoutが下記になります。

sample.kt

@Composable
fun AppColumnLayout(
    modifier: Modifier = Modifier,
    horizontalAlignment: Alignment.Horizontal = Alignment.CenterHorizontally,
    verticalArrangement: Arrangement.Vertical = Arrangement.Center,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    content: @Composable ColumnScope.() -> Unit,
) {
    Scaffold(
        modifier = modifier.fillMaxSize(),
        backgroundColor = backgroundColor,
        contentColor = contentColor,
    ) {
        Column(
            verticalArrangement = verticalArrangement,
            horizontalAlignment = horizontalAlignment,
            modifier = Modifier.fillMaxSize(),
            content = content,
        )
    }
}

共通化する場合のポイントとして

1. 取り回しのしやすさをそのままに拡張性を担保する
2. TopAppBarなど全体に共通する実装を内包することでボイラープレートを抑えることができ、実装に集中することができる
3. 引数にcontent: @Composable ColumnScope.() -> Unitを指定することで構成要素を動的に変更できるので柔軟にUIの実装ができる

使用方法

共通化したLayoutを使用する場合は下記のように簡単に実装することができます。
外部から共通化した箇所を認識することなく実装ができ、大変便利です。

sampleView.kt

    AppColumnLayout {
        Text(text = "確認用文言")
    }

まとめ

今回は「Jetpack ComposeにおけるLayoutの共通化処理について」の記事を執筆しました。
共通化することで様々なメリットを受けることができるのでぜひ活用していきましょう！
他にも共通化する場合の方法などがあればどしどしコメント欄に意見いただけると幸いです🙇‍♂️

最後に弊社では一緒に働いてくれる仲間を募集中です！
興味のある方は下記から応募お願いいたします✨