Jetpack Compose和View的互操作性
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.
至于什么学习曲线, 经验不足, 反正早晚都要学的, 整点新鲜的也挺好, 亦可赛艇.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)