JetpackCompose MDC Compose Theme Adapterでデザインシステムを作成する

前回の記事でJetpackComposeでデザインシステムを構築するというのをやりましたが、

https://zenn.dev/apple_nktn/articles/eef6c97ee5a7af

フルスクラッチしなくとも公式が提供しているライブラリで簡単に

デザインシステムを作成することができるので、

今回はそちらを紹介していきます。

MDC Compose Theme Adapterとは

元々androidでよく使われているデザインテーマがMaterialComponentsなので

恐らくMaterial(Design)Componentsからの

MDCだと思います(多分)

つまりは従来から使用しているTheme.MaterialComponentsを流用して

そのままComposeでも使うことができるというライブラリです。

AppCompatテーマを使っている方は

AppCompat Compose Theme Adapter

という同様のものがあるのでそちらを利用しましょう。

サンプルコード

@Composable
fun CustomTheme(
    content: @Composable () -> Unit,
) {
    val context = LocalContext.current
    val layoutDirection = LocalLayoutDirection.current
    val (colors, type, shapes) = createMdcTheme(
        context = context,
        layoutDirection = layoutDirection
    )

    MaterialTheme(
        colors = colors
            ?: throw IllegalArgumentException("Colors were not imported from MDC theme"),
        typography = type
            ?: throw IllegalArgumentException("Typography was not imported from MDC theme"),
        shapes = shapes
            ?: throw IllegalArgumentException("Shapes were not imported from MDC theme"),
        content = content
    )
}

object CustomTheme {

    val colors
        @Composable
        @ReadOnlyComposable
        get() = MaterialTheme.colors

    val typography
        @Composable
        @ReadOnlyComposable
        get() = MaterialTheme.typography

    val shapes
        @Composable
        @ReadOnlyComposable
        get() = MaterialTheme.shapes
}

解説

雑にいうとベースとなるTheme.MaterialComponentsから情報を引っ張って

ComposeのMaterialThemeのcolor等を上書きしている感じです。

なのでマテリアルテーマで初めから定義されている

primaryColor等しか引き継ぐことはできません

カスタム属性を追加したい場合

そういう場合はライブラリではサポートされていないので、

kotlinの拡張機能を使って

MaterialTheme.Colors等を拡張することで対応することできます。

val Colors.brand_color
    get() = Color(0xFFEE8122)
    
val Typography.appBar
    @Composable
    @ReadOnlyComposable
    get() = TextStyle(
        fontWeight = FontWeight.Bold,
        fontSize = 16.sp,
        textAlign = TextAlign.Center,
        letterSpacing = 0.5.sp
    )

というような感じ。

この際にMaterialThemeから引っ張ってくると

直感的に違和感を感じるためにobject CustomTheme{}

とすることでCustomThemeから引っ張ることができるようにしていますが、

ここについては好みかと思います。

参考記事

https://material-components.github.io/material-components-android-compose-theme-adapter/

https://github.com/material-components/material-components-android-compose-theme-adapter

https://sasikanth.dev/posts/adopting-compose-theming

https://sentinelweb.co.uk/blog_item.html?title=blog_2-setup-theme-in-jetpack-compose.html

https://qiita.com/RyotaMurohoshi/items/4b958af1d23da6d91a61#拡張プロパティとは