Jetpack Composeをカスタムビューで使う

Jetpack Composeをカスタムビューで使ってる例がなかなかなかったので、メモとして残しておきます。

import android.content.Context
import android.util.AttributeSet
import android.widget.FrameLayout
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.ComposeView

class HogeCustomeView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0,
    defStyleRes: Int = 0
) : FrameLayout(context, attrs, defStyleAttr, defStyleRes) {

    init {
        addView(
            ComposeView(context).apply {
                setContent {
                    MaterialTheme {
                        CustomView()
                    }
                }
            }
        )
    }

    @Composable
    fun CustomView() {
        Text(text = "Hello World", color = Color.Black)
    }
}

これを既存のXMLファイルから使えば、既存プロジェクトのレイアウトの一部だけをJetpack　Composeを使うことができます。

<jp.hoge.hoge.mypage.HogeCustomView
   android:layout_width="match_parent"
   android:layout_height="100dp"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintTop_toTopOf="parent"
   app:layout_constraintBottom_toBottomOf="parent"
/>