Jetpack Compose Interoperability
Compose風這麼大, 對於已有專案使用新技術, 難免會擔心相容性.
對於Compose來說, 至少和View的結合是無縫的.
(目前來講, 已有專案要採用Compose, 可能初期要解決的就是升級gradle plugin, gradle, Android Studio, kotlin之類的問題.)
構建UI的靈活性還是有保證的:
- 新介面想用Compose, 可以.
- Compose支援不了的, 用View.
- 已有介面不想動, 可以不動.
- 已有介面的一部分想用Compose, 可以.
- 有的UI效果想複用之前的, 好的, 可以直接拿來內嵌.
本文就是一些互相呼叫的簡單小demo, 初期用的時候可以複製貼上一下很趁手.
官方文件:
https://developer.android.com/jetpack/compose/interop/interop-apis
在Activity或者Fragment中全部使用Compose來搭建UI
Use Compose in Activity
class ExampleActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent { // In here, we can call composables!
MaterialTheme {
Greeting(name = "compose")
}
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
Use Compose in Fragment
class PureComposeFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View {
return ComposeView(requireContext()).apply {
setContent {
MaterialTheme {
Text("Hello Compose!")
}
}
}
}
}
在View中使用Compose
ComposeView內嵌在Xml中:
一個平平無奇的xml佈局檔案中加入ComposeView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/hello_world"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello from XML layout" />
<androidx.compose.ui.platform.ComposeView
android:id="@+id/compose_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
使用的時候, 先根據id查找出來, 再setContent:
class ComposeViewInXmlActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_compose_view_in_xml)
findViewById<ComposeView>(R.id.compose_view).setContent {
// In Compose world
MaterialTheme {
Text("Hello Compose!")
}
}
}
}
動態新增ComposeView
在程式碼中使用addView()來新增View對於ComposeView來說也同樣適用:
class ComposeViewInViewActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(LinearLayout(this).apply {
orientation = VERTICAL
addView(ComposeView(this@ComposeViewInViewActivity).apply {
id = R.id.compose_view_x
setContent {
MaterialTheme {
Text("Hello Compose View 1")
}
}
})
addView(TextView(context).apply {
text = "I'm am old TextView"
})
addView(ComposeView(context).apply {
id = R.id.compose_view_y
setContent {
MaterialTheme {
Text("Hello Compose View 2")
}
}
})
})
}
}
這裡在LinearLayout中添加了三個child: 兩個ComposeView中間還有一個TextView.
起到橋樑作用的ComposeView是一個ViewGroup, 它本身是一個View, 所以可以混進View的hierarchy tree裡佔位,
它的setContent()方法開啟了Compose世界的大門, 在這裡可以傳入composable的方法, 繪製UI.
在Compose中使用View
都用Compose搭建UI了, 什麼時候會需要在其中內嵌View呢?
- 要用的View還沒有Compose版本, 比如
AdView,MapView,WebView. - 有一塊之前寫好的UI, (暫時或者永遠)不想動, 想直接用.
- 用Compose實現不了想要的效果, 就得用View.
在Compose中加入Android View
例子:
@Composable
fun CustomView() {
val state = remember { mutableStateOf(0) }
//widget.Button
AndroidView(
factory = { ctx ->
//Here you can construct your View
android.widget.Button(ctx).apply {
text = "My Button"
layoutParams = LinearLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT)
setOnClickListener {
state.value++
}
}
},
modifier = Modifier.padding(8.dp)
)
//widget.TextView
AndroidView(factory = { ctx ->
//Here you can construct your View
TextView(ctx).apply {
layoutParams = LinearLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT)
}
}, update = {
it.text = "You have clicked the buttons: " + state.value.toString() + " times"
})
}
這裡的橋樑是AndroidView, 它是一個composable方法:
@Composable
fun <T : View> AndroidView(
factory: (Context) -> T,
modifier: Modifier = Modifier,
update: (T) -> Unit = NoOpUpdate
)
factory接收一個Context引數, 用來構建一個View.
update方法是一個callback, inflate之後會執行, 讀取的狀態state值變化後也會被執行.
在Compose中使用xml佈局
上面提到的在Compose中使用AndroidView的方法, 對於少量的UI還行.
如果需要複用一個已經存在的xml佈局怎麼辦?
不用怕, view binding登場了.
使用起來也很簡單:
- 首先你需要開啟View Binding.
buildFeatures {
compose true
viewBinding true
}
- 其次你需要一個xml的佈局, 比如叫
complex_layout. - 然後新增一個Compose view binding的依賴:
androidx.compose.ui:ui-viewbinding.
然後build一下, 生成binding類,
這樣就好了, 噠噠:
@Composable
private fun ComposableFromLayout() {
AndroidViewBinding(ComplexLayoutBinding::inflate) {
sampleButton.setBackgroundColor(Color.GRAY)
}
}
其中ComplexLayoutBinding是根據佈局名字生成的類.
AndroidViewBinding內部還是呼叫了AndroidView這個composable方法.
番外篇: 在Compose中顯示Fragment
這個場景聽上去有點奇葩, 因為Compose的設計理念, 貌似就是為了跟Fragment說再見.
在Compose構建的UI中, 再找地方顯示一個Fragment, 有點新瓶裝舊酒的意思.
但是遇到的場景多了, 你沒準真能遇上呢.
Fragment通過FragmentManager新增, 需要一個佈局容器.
把上面ViewBinding的例子改改, 佈局里加入一個fragmentContainer, 點選顯示Fragment:
Column(Modifier.fillMaxSize()) {
Text("I'm a Compose Text!")
Button(
onClick = {
showFragment()
}
) {
Text(text = "Show Fragment")
}
ComposableFromLayout()
}
@Composable
private fun ComposableFromLayout() {
AndroidViewBinding(
FragmentContrainerBinding::inflate,
modifier = Modifier.fillMaxSize()
) {
}
}
private fun showFragment() {
supportFragmentManager
.beginTransaction()
.add(R.id.fragmentContainer, PureComposeFragment())
.commit()
}
這裡沒有考慮時機的問題, 因為點選按鈕展示Fragment, 將時機拖後了.
如果直接在初始化的時候想顯示Fragment, 可能會丟擲異常:
java.lang.IllegalArgumentException: No view found for id
解決辦法:
@Composable
private fun ComposableFromLayout() {
AndroidViewBinding(
FragmentContrainerBinding::inflate,
modifier = Modifier.fillMaxSize()
) {
// here is safe
showFragment()
}
}
所以show的時機至少要保證container view已經inflated了.
Theme & Style
遷移View的app到Compose, 你可能會需要Theme Adapter:
https://github.com/material-components/material-components-android-compose-theme-adapter
關於在現有的view app中使用compose:
https://developer.android.com/jetpack/compose/interop/compose-in-existing-ui
總結
Compose和View的結合, 主要是靠兩個橋樑.
還挺有趣的:
ComposeView其實是個Android View.AndroidView其實是個Composable方法.
Compose和View可以互相相容的特點保證了專案可以逐步遷移, 並且也給夠了安全感, 像極了當年java專案遷移kotlin.
至於什麼學習曲線, 經驗不足, 反正早晚都要學的, 整點新鮮的也挺好, 亦可賽艇.