XMLベースのコードをJetpack Composeに移行する方法 3-ComposeView~旧来のXMLの一部だけ利用

class ComposeViewUsageActivity : AppCompatActivity() {

  companion object {
    fun intent(context: Context) = Intent(context, ComposeViewUsageActivity::class.java).apply {
      flags = Intent.FLAG_ACTIVITY_CLEAR_TOP or Intent.FLAG_ACTIVITY_NEW_TASK
    }
  }

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.compose_view_activity)
    if (savedInstanceState == null) {
      supportFragmentManager.beginTransaction()
        .replace(R.id.container, ComposeViewUsageFragment.newInstance())
        .commitNow()
    }
  }
}

class ComposeViewUsageFragment : Fragment(R.layout.compose_view_fragment) {

  companion object {
    fun newInstance() = ComposeViewUsageFragment()
  }

  private lateinit var viewModel: ComposeViewModel

  private var _binding: ComposeViewFragmentBinding? = null
  private val binding get() = _binding!!

  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    viewModel = ViewModelProvider(this)[ComposeViewModel::class.java]
    _binding = DataBindingUtil.bind(view)
    binding.viewModel = viewModel
    binding.lifecycleOwner = viewLifecycleOwner
  }

  override fun onDestroyView() {
    super.onDestroyView()
    _binding = null
  }
}

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable
            name="viewModel"
            type="com.ko2ic.spike.migrate.compose.ui.ComposeViewModel" />
    </data>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:id="@+id/label1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:text="Hello"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        <TextView
            android:id="@+id/label2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:text="Hello label2!!"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/label1" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

-        <TextView
-            android:id="@+id/label2"
+        <androidx.compose.ui.platform.ComposeView
+            android:id="@+id/compose_view"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginTop="24dp"
-            android:text="Hello label2!!"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@id/label1" />

   override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
     super.onViewCreated(view, savedInstanceState)
     viewModel = ViewModelProvider(this)[ComposeViewModel::class.java]
     _binding = DataBindingUtil.bind(view)
     binding.viewModel = viewModel
     binding.lifecycleOwner = viewLifecycleOwner
+    binding.composeView.apply {
+      setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+      setContent {
+        AppCompatTheme {
+          HelloCompose()
+        }
+      }
+    }
   }

+  @Composable
+  private fun HelloCompose() {
+    Text(
+      "Hello Compose!!",
+      style = MaterialTheme.typography.body2,
+      modifier = Modifier
+        .fillMaxWidth()
+        .padding(24.dp)
+        .wrapContentWidth(Alignment.CenterHorizontally)
+    )
  }

implementation "com.google.android.material:compose-theme-adapter:1.1.7"
 or 
implementation "com.google.android.material:compose-theme-adapter-3:1.0.7"

implementation "com.google.accompanist:accompanist-appcompat-theme:0.16.0"

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                MaterialTheme {
                    // In Compose world
                    Text("Hello Compose!")
                }
            }
        }
    }

  override fun onCreateView(...): View = LinearLayout(...).apply {
      addView(ComposeView(...).apply {
          id = R.id.compose_view_x
          ...
      })
      addView(TextView(...))
      addView(ComposeView(...).apply {
          id = R.id.compose_view_y
          ...
      })
    }
  }

<resources>
    <item name="compose_view_x" type="id" />
    <item name="compose_view_y" type="id" />
</resources>

  @Preview(
    uiMode = Configuration.UI_MODE_NIGHT_YES,
    showBackground = true
  )
  @Preview
  @Composable
  fun DarkHelloComposePreview() {
    AppCompatTheme {
      HelloCompose()
    }
  }