［Jetpack Compose］TextStyle を適用する Text コンポーザブルを予め定義しておくと便利

TextStyle を適用する Text コンポーザブルを用意しておくと毎度 TextStyle を適用せずにすむので便利です。以下のサンプルでは MaterialTheme の typography にある全 TextStyle を利用できるようにしています。

@Immutable
class Typography internal constructor(
    val h1: TextStyle,
    val h2: TextStyle,
    val h3: TextStyle,
    val h4: TextStyle,
    val h5: TextStyle,
    val h6: TextStyle,
    val subtitle1: TextStyle,
    val subtitle2: TextStyle,
    val body1: TextStyle,
    val body2: TextStyle,
    val button: TextStyle,
    val caption: TextStyle,
    val overline: TextStyle
)

object Texts {
    @Composable
    fun H1(text: String, modifier: Modifier = Modifier) {
        Text(text, modifier, style = MaterialTheme.typography.h1)
    }

    @Composable
    fun H2(text: String, modifier: Modifier = Modifier) {
        Text(text, modifier, style = MaterialTheme.typography.h2)
    }

    @Composable
    fun H3(text: String, modifier: Modifier = Modifier) {
        Text(text, modifier, style = MaterialTheme.typography.h3)
    }

    @Composable
    fun H4(text: String, modifier: Modifier = Modifier) {
        Text(text, modifier, style = MaterialTheme.typography.h4)
    }

    @Composable
    fun H5(text: String, modifier: Modifier = Modifier) {
        Text(text, modifier, style = MaterialTheme.typography.h5)
    }

    @Composable
    fun H6(text: String, modifier: Modifier = Modifier) {
        Text(text, modifier, style = MaterialTheme.typography.h6)
    }

    @Composable
    fun Subtitle1(text: String, modifier: Modifier = Modifier) {
        Text(text, modifier, style = MaterialTheme.typography.subtitle1)
    }

    @Composable
    fun Subtitle2(text: String, modifier: Modifier = Modifier) {
        Text(text, modifier, style = MaterialTheme.typography.subtitle2)
    }

    @Composable
    fun Body1(text: String, modifier: Modifier = Modifier) {
        Text(text, modifier, style = MaterialTheme.typography.body1)
    }

    @Composable
    fun Body2(text: String, modifier: Modifier = Modifier) {
        Text(text, modifier, style = MaterialTheme.typography.body2)
    }

    @Composable
    fun Button(text: String, modifier: Modifier = Modifier) {
        Text(text, modifier, style = MaterialTheme.typography.button)
    }

    @Composable
    fun Caption(text: String, modifier: Modifier = Modifier) {
        Text(text, modifier, style = MaterialTheme.typography.caption)
    }
}

実際に利用してみるとこのような感じです。TextStyle を直書きするよりも可読性があがったように感じますね。

@Preview
@Composable
private fun Texts_Preview() {
    Column {
        Texts.H1("H1")
        Texts.H2("H2")
        Texts.H3("H3")
        Texts.H4("H4")
        Texts.H5("H5")
        Texts.H6("H6")
        Texts.Subtitle1("Subtitle1")
        Texts.Subtitle2("Subtitle2")
        Texts.Body1("Body1")
        Texts.Body2("Body2")
        Texts.Button("Button")
        Texts.Caption("Caption")
    }
}