Modifierを忘れない

Android

カンカクでAndroidエンジニアをやっている @haru067です。好きな鶏肉は、ささみです。

今回はJetpack ComposeのModifierの話です。

仮引数のModifier

一般に、@Composableの関数にはmodifier: Modifierの仮引数を追加するのが良いとされています。

⛔️ Don't

@Composable
private fun HeaderText(
    text: String  // Modifierがない
) {
    Text(
        text = text,
        ...
        modifier = Modifier.fillMaxWidth()
    )
}

@Composable
fun HeaderGroup(...) {
   Box(...) {
       HeaderText(
           text = "some text"
       )
   }
}

✅ Do

@Composable
private fun HeaderText(
    text: String,
    modifier: Modifier = Modifier   // Modifierがある
) {
    Text(
        text = text,
        ...
        modifier = modifier
    )
}

@Composable
fun HeaderGroup(...) {
   Box(...) {
       HeaderText(
           text = "some text",
           modifier = Modifier.fillMaxWidth()
       )
   }
}

これは、Jetpack ComposeのAPIガイドラインにも書かれています。
https://github.com/androidx/androidx/blob/androidx-main/compose/docs/compose-api-guidelines.md#elements-accept-and-respect-a-modifier-parameter

なぜ？の部分に関しては、こちらのブログ記事が詳しいです。
chris.banes.dev

フレームワーク・ライブラリの開発においては、インターフェイスをきちっと定める必要性が高い一方、アプリ開発者では後から足せば何とかなる分「頭ではわかってるけど、面倒くさい」「付け忘れた」となりがちです。事実、上に挙げたAPIガイドラインでもフレームワーク・ライブラリ開発ではMUSTとなっていますが、アプリ開発ではSHOULDとされています。

Jetpack Compose framework development and Library development MUST follow all guidelines in this section.

Jetpack Compose app development SHOULD follow all guidelines in this section.

Live Templateの活用

では、どうしたら面倒と感じずに書けるか？

考えた結果、行き着いたのはLive Templateでした。Jetpack Compose（Android Studio）には、いくつかのLive Templateがデフォルトで用意されています。
https://developer.android.com/jetpack/compose/tooling#live-templates

例えば、compと入力してTabキーを押すと、次のように定型文が挿入されます。

これを編集して、modifier: Modifierも挿入されるようにします。

この設定画面を次のように変更します。

// Before
@androidx.compose.runtime.Composable
fun $NAME$() {
$END$
}

// After
@androidx.compose.runtime.Composable
fun $NAME$(modifier: androidx.compose.ui.Modifier = androidx.compose.ui.Modifier) {
$END$
}

結果

良い感じになりました。完。

その他