Go to Qiita Advent Calendar 2024 Top
LoginSignup
9
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@tkhs0604(kenken)

Jetpack Composeを利用したコンポーネント作成からレイアウト生成までの流れ

Last updated at Posted at 2019-06-17

Google I/O 2019でJetpack Composeというツールキットの発表がありました。
現時点ではまだpre-alpha版ですが、Jetpack Composeを利用してどのようにコンポーネントを作成し、それらを組み合わせ、レイアウトを生成するかについてデモアプリのソースコードを元に調べてみました。

ソースコードはAOSP(Android Open Source Project)からダウンロードしました。手順は以下の記事を参考にしました。
Jetpack Composeのデモアプリを動かしてみた

ソースコードとレイアウト

以降はRallyというデモアプリをベースに話を進めます。
まず、ソースコードは以下です。

class RallyActivity : Activity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CraneWrapper {
                RallyApp()
            }
        }
    }

    @Composable
    fun RallyApp() {
        RallyTheme {
            Scaffold(appBar = { RallyAppBar() }) {
                RallyBody()
            }
        }
    }

    @Composable
    fun RallyAppBar() {
        // TODO: Transform to tabs
        Row {
            // Icon()
            Text(text = "Overview", style = +themeTextStyle { h4 })
            // TODO: Other items
        }
    }
}

@Composable
fun RallyBody() {
    Padding(padding = 16.dp) {
        Column {
            // TODO: scrolling container
            RallyAlertCard()
            HeightSpacer(height = 10.dp)
            RallyAccountsCard()
            HeightSpacer(height = 10.dp)
            RallyBillsCard()
        }
    }
}

また、上記によって生成されるレイアウトは以下です。
Jetpack Composeによって生成されたレイアウト
両者を比較しながら、Jetpack Composeを利用したコンポーネント作成からレイアウト生成までの流れを少しずつ見ていきたいと思います。

コンポーネントの作成方法

まず、肝となるコンポーネントの作成方法について見ていきます。

コンポーネントを作成する際は、関数を宣言し、その関数に@Composableアノテーションを付与します。これによってソースコード上でコンポーネントとして認識されます。
以降、@Composableアノテーションの付与された関数を「Composable function」と呼ぶこととします。Composable functionの関数名は慣習的(？)に大文字始まりで命名するようです。

コンポーネントに子Viewを追加する場合、コンポーネントにネストする形で記述していきます。
以下ではRowコンポーネントの子ViewとしてTextコンポーネントが配置されています。

@Composable
fun RallyAppBar() {
    // TODO: Transform to tabs
    Row {
        // Icon()
        Text(text = "Overview", style = +themeTextStyle { h4 })
        // TODO: Other items
    }
}

ここで、親ViewとなっているRowコンポーネントの実装を見てみると、最後の引数に@Childrenというアノテーションが付与されています。
この@Childrenアノテーションによって、ネストされたTextコンポーネントが子Viewとして認識されます。

@Composable
fun Row(
    mainAxisAlignment: Int = MainAxisAlignment.Start,
    mainAxisSize: Int = MainAxisSize.Max,
    crossAxisAlignment: Int = CrossAxisAlignment.Center,
    @Children block: @Composable() () -> Unit
) {
    FlexRow(
        mainAxisAlignment = mainAxisAlignment,
        mainAxisSize = mainAxisSize,
        crossAxisAlignment = crossAxisAlignment
    ) {
        inflexible {
            block()
        }
    }
}

Composable functionがコンポーネントとしてレイアウトに追加される仕組み

次に、Composable functionがコンポーネントとしてレイアウトに追加される仕組みについて見ていきます。

setContent

onCreateのすぐ下にsetContentという関数があります。
これはActivityの拡張関数として定義されており、コンテンツのRoot Viewとして使うFrameLayoutをidで探し、なければ新規で作成します。そして、引数として受け取ったComposable functionをcompose()でRoot Viewに渡します。

fun Activity.setContent(composable: @Composable() () -> Unit): CompositionContext? {
    // If there is already a FrameLayout in the root, we assume we want to compose
    // into it instead of create a new one. This allows for `setContent` to be
    // called multiple times.
    val root = window
        .decorView
        .findViewById<ViewGroup>(android.R.id.content)
        .getChildAt(0) as? ViewGroup
    ?: FrameLayout(this).also { setContentView(it) }
    return root.compose(composable)
}

CraneWrapper

さらに、setContentの下にCraneWrapperという関数があります。
内容としては先ほどsetContent内で作成されたFrameLayoutの子ViewとしてAndroidCraneViewというViewを配置しているようです。

@Composable
fun CraneWrapper(@Children children: @Composable() () -> Unit) {
    val rootRef = +memo { Ref<AndroidCraneView>() }

    // TODO(nona): Tie the focus manger lifecycle to Window, otherwise FocusManager won't work with
    //             nested AndroidCraneView case
    val focusManager = +memo { FocusManager() }

    <AndroidCraneView ref=rootRef>
        var reference: CompositionReference? = null
        var cc: CompositionContext? = null

        // This is a temporary solution until we get proper subcomposition APIs in place.
        // Right now, we want to enforce a sort of "depth-first" ordering of recompositions,
        // even when they happen across composition contexts. When we do "subcomposition",
        // like we are doing here, that means for every invalidation of the child context, we
        // need to invalidate the scope of the parent reference, and wait for it to recompose
        // the child. The Observe is put in place here to ensure that the scope around the
        // reference we are using is as small as possible, and, in particular, does not include
        // the composition of `children()`. This means that we are using the nullability of `cc`
        // to determine if the CraneWrapper in general is getting recomposed, or if its just
        // the invalidation scope of the Observe. If it's the latter, we just want to call
        // `cc.recomposeSync()` which will only recompose the invalidations in the child context,
        // which means it *will not* call `children()` again if it doesn't have to.
        Observe {
            reference = +compositionReference()
            cc?.recomposeSync()
        }
        val rootLayoutNode = rootRef.value?.root ?: error("Failed to create root platform view")
        val context = rootRef.value?.context ?: composer.composer.context
        cc = Compose.composeInto(container = rootLayoutNode, context = context, parent = reference) {
            ContextAmbient.Provider(value = context) {
                DensityAmbient.Provider(value = Density(context)) {
                    FocusManagerAmbient.Provider(value = focusManager) {
                        TextInputServiceAmbient.Provider(value = rootRef.value?.textInputService) {
                            children()
                        }
                    }
                }
            }
        }
    </AndroidCraneView>
}

CraneWrapper内では、AndroidCraneViewの子Viewとして配置されるView群がContextやDensityなどのリソースにアクセスするための設定も行っており(Ambientの意味が今ひとつ分かっていないですが)、基本的に実装しなければならないComposable functionとなります。
特にテーマをカスタマイズする場合、この記述がないとクラッシュしてしまいます。
(だったらsetContent内に最初から実装してほしい感じがしますが…ｗ)

また、Jetpack Composeを利用して生成されるレイアウトはすべてのコンポーネントが組み合わさった状態でAndroidCraneViewとして認識されます。
Layout Inspectorでもそのように表示されるので、レイアウトをデバッグする際は少し苦労するかもしれないという印象を受けました。
Layout Inspectorで見たレイアウトの階層構造

テーマのカスタマイズ方法

さらに、レイアウトのテーマのカスタマイズ方法について見ていきます。

RallyApp

CraneWrapperの下にRallyAppという関数があります。この関数の内容が実際にレイアウトとして生成されることになります。

@Composable
fun RallyApp() {
    RallyTheme {
        Scaffold(appBar = { RallyAppBar() }) {
            RallyBody()
        }
    }
}

RallyAppの下にRallyThemeという関数があります。これはRallyアプリのテーマ(フォントファミリーやカラーなど)の設定を行うための関数です。

@Composable
fun RallyTheme(@Children children: @Composable() () -> Unit) {
    val colors = MaterialColors(
        primary = rallyGreen,
        surface = Color(0xFF26282F.toInt()),
        onSurface = Color(0xFFFFFFFF.toInt())
    )
    val typography = MaterialTypography(
        h1 = TextStyle(fontFamily = FontFamily("RobotoCondensed"),
            fontWeight = FontWeight.w100,
            fontSize = 96f),
        h2 = TextStyle(fontFamily = FontFamily("RobotoCondensed"),
            fontWeight = FontWeight.w100,
            fontSize = 60f),
        h3 = TextStyle(fontFamily = FontFamily("Eczar"),
            fontWeight = FontWeight.w500,
            fontSize = 48f),
        h4 = TextStyle(fontFamily = FontFamily("RobotoCondensed"),
            fontWeight = FontWeight.w700,
            fontSize = 34f),
        h5 = TextStyle(fontFamily = FontFamily("RobotoCondensed"),
            fontWeight = FontWeight.w700,
            fontSize = 24f),
        h6 = TextStyle(fontFamily = FontFamily("RobotoCondensed"),
            fontWeight = FontWeight.w700,
            fontSize = 20f),
        subtitle1 = TextStyle(fontFamily = FontFamily("RobotoCondensed"),
            fontWeight = FontWeight.w700,
            fontSize = 16f),
        subtitle2 = TextStyle(fontFamily = FontFamily("RobotoCondensed"),
            fontWeight = FontWeight.w500,
            fontSize = 14f),
        body1 = TextStyle(fontFamily = FontFamily("Eczar"),
            fontWeight = FontWeight.w700,
            fontSize = 16f),
        body2 = TextStyle(fontFamily = FontFamily("RobotoCondensed"),
            fontWeight = FontWeight.w200,
            fontSize = 14f),
        button = TextStyle(fontFamily = FontFamily("RobotoCondensed"),
            fontWeight = FontWeight.w800,
            fontSize = 14f),
        caption = TextStyle(fontFamily = FontFamily("RobotoCondensed"),
            fontWeight = FontWeight.w500,
            fontSize = 12f),
        overline = TextStyle(fontFamily = FontFamily("RobotoCondensed"),
            fontWeight = FontWeight.w500,
            fontSize = 10f)

    )
    MaterialTheme(colors = colors, typography = typography) {
        // TODO: remove this when surface auto-sets the text color
        val value = TextStyle(color = Color(0xFFFFFFFF.toInt()))
        CurrentTextStyleProvider(value = value) {
            children()
        }
    }
}

内容としては単にMaterialThemeをカスタマイズしています。
クラスの継承に近い雰囲気ですが、Jetpack Composeを利用する場合、元となるComposable functionをラップした形でテーマをカスタマイズするようです。
コンポーネントをカスタマイズする場合も同様になります。

Composable functionのソースコードとレイアウト

最後に、Composable functionのソースコードとレイアウトを見ていきたいと思います。

冒頭に記載した画像を再掲します。
Jetpack Composeによって生成されたレイアウト

いくつか具体的なコンポーネントがありますが、実装を理解する意味ではすべてを追う必要はないので、ここではRallyAlertCardを取り上げます。

RallyAlertCard

RallyAlertCardのソースコードは以下です。

@Composable
fun RallyAlertCard() {
    Card(color = cardInternalColor) {
        Padding(padding = 12.dp) {
            Column {
                Row(mainAxisAlignment = MainAxisAlignment.SpaceBetween) {
                    Text(text = "Alerts", style = +themeTextStyle { subtitle2 })
                    TransparentButton(text = "See All", onClick = { })
                }
                Padding(padding = EdgeInsets(0.dp, 12.dp, 0.dp, 12.dp)) {
                    val colors = +ambient(Colors)
                    Divider(color = colors.surface, height = 2.dp)
                }
                FlexRow {
                    expanded(flex = 1.0f) {
                        val text = "Heads up, you've used up 90% of your " +
                                "Shopping budget for this month."
                        Text(
                            style = +themeTextStyle { body1 },
                            text = text
                        )
                    }
                    inflexible {
                        // TODO: icons still don't work
//                        <vectorResource res=context.resources
//                            resId=androidx.ui.material.studies.R.drawable.sort_icon/>
                        TransparentButton(text = "Sort", onClick = { })
                    }
                }
            }
        }
    }
}

また、上記によって生成されるレイアウトは以下です。
RallyAlertCard

ここまで来れば、ソースコードとレイアウトの対応について特に説明する必要はないかと思います。
1つ特徴的だと感じたのは、今まで属性として指定していたPaddingがコンポーネントとして別個に用意されている点です。

個人的には+themeTextStyle { body1 }などの実装によって、内部的にどのような処理が行われ、指定したテーマが設定されるのかがきちんと追えなかったのでもやもやしているのですが、ここで時間をかけるよりは一旦production-readyになるのを待てばいいかなとも思い、"おまじない"として追うのを諦めました。笑
(単なる技術力不足の言い訳です。ご教示いただける方がいればぜひお願いしたいです…！🙏)

ざっとではありますが、Jetpack Composeを利用したコンポーネント作成からレイアウト生成までの流れについて、デモアプリのソースコードとレイアウトを比較しながら調べてみました。
力及ばず、この土日では本記事でまとめた内容を理解するので精一杯でしたが、ステートフルなコンポーネントの作成方法、エフェクトの付け方、リスト表示など気になる要素はたくさんあるので、追々見ていければと思います。

※個人ブログにも同様の内容を書いたのですが、Qiitaの方がコメントやアドバイスがいただける可能性が高そうなので、Qiitaにも転記させていただきました。

9
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?