AbstractComposeViewを使ったカスタムビューをData BindingでXMLから設定する方法

こんにちは、@majoLibraryです

既存のAndroidプロジェクトにComposeを導入する場合、AbstractComposeViewを活用すると、よりシンプルかつ柔軟にカスタムビューを作成できます。
本記事では、このAbstractComposeViewを用いてカスタムビューを定義し、Data Bindingを利用してXMLから直接プロパティを設定する方法について解説します。

具体的な例として、プロフィール画面の表示・非表示を管理するためのBoolean型のプロパティprofileVisibleをXML経由で設定する手法を取り上げます。

AbstractComposeViewを用いたカスタムビューの作成

まず、AbstractComposeViewを継承してカスタムComposeビューを作成します。AbstractComposeViewは、Composeコンテンツの記述を強制する抽象クラスで、Content()メソッド内にComposeのUIを定義します。

以下は具体的な実装例です。

// CustomProfileView.kt
import android.content.Context
import android.util.AttributeSet
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.AbstractComposeView

class CustomProfileView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AbstractComposeView(context, attrs, defStyleAttr) {

    // XMLから設定可能なプロパティをComposeの状態として保持
    private var profileVisible by mutableStateOf(false)

    // Data BindingがXMLから値を設定する際に呼び出すsetter
    fun setProfileVisible(visible: Boolean) {
        profileVisible = visible
    }

    @Composable
    override fun Content() {
        ProfileContent(profileVisible)
    }
}

@Composable
fun ProfileContent(profileVisible: Boolean) {
    if (profileVisible) {
        Text(
            text = "プロフィールを表示しています。",
            modifier = Modifier.fillMaxWidth()
        )
    } else {
        Text(
            text = "プロフィールは非表示です。",
            modifier = Modifier.fillMaxWidth()
        )
    }
}

XMLレイアウトからData Bindingを利用して値を設定する方法

次に、Data Bindingを用いてXMLレイアウトからプロパティを設定する方法を示します。Data Bindingを使えば、必ずしもカスタム属性（attrs.xml）を定義する必要はありません。

以下はXMLレイアウトの例です。

<!-- res/layout/activity_main.xml -->
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.example.yourapp.CustomProfileView
            android:id="@+id/customProfileView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:profileVisible="@{true}" />
    </LinearLayout>
</layout>

上記のようにapp:profileVisible="@{true}"と記述すると、Data Bindingが対応するsetterメソッドsetProfileVisible(true)を自動的に呼び出します。これにより、XMLだけでビューの挙動を簡単に制御できます。

AbstractComposeViewとComposeViewの違いと使い分け

ここで、ComposeをXML内で使う場合に選択できる2つの主要なクラスについて整理します。

ComposeView

• setContentを明示的に呼び出す必要がある
• UIのセットをより自由に制御したい場合に適している

AbstractComposeView

• setContentの呼び出しが抽象メソッドContent()として定義されているため、自動的にComposeがセットされる
• カスタムビューとして再利用する場合、シンプルで直感的な実装が可能

シンプルで再利用性の高いカスタムComposeビューを作る場合、AbstractComposeViewが特に推奨されます。

まとめ

この記事では、Jetpack ComposeのAbstractComposeViewを利用したカスタムビューを作成し、Data Bindingを使ってXMLからプロパティを簡単に制御する方法を紹介しました。

これを理解することで、既存のXMLを使用したプロジェクトにも柔軟かつスムーズにComposeを導入できます。ぜひ実務での開発に役立ててください。