经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » Android » 查看文章
Jetpack Compose和View的互操作性
来源:cnblogs  作者:圣骑士wind  时间:2021/6/28 9:10:45  对本文有异议

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

  1. class ExampleActivity : AppCompatActivity() {
  2. override fun onCreate(savedInstanceState: Bundle?) {
  3. super.onCreate(savedInstanceState)
  4. setContent { // In here, we can call composables!
  5. MaterialTheme {
  6. Greeting(name = "compose")
  7. }
  8. }
  9. }
  10. }
  11. @Composable
  12. fun Greeting(name: String) {
  13. Text(text = "Hello $name!")
  14. }

Use Compose in Fragment

  1. class PureComposeFragment : Fragment() {
  2. override fun onCreateView(
  3. inflater: LayoutInflater,
  4. container: ViewGroup?,
  5. savedInstanceState: Bundle?
  6. ): View {
  7. return ComposeView(requireContext()).apply {
  8. setContent {
  9. MaterialTheme {
  10. Text("Hello Compose!")
  11. }
  12. }
  13. }
  14. }
  15. }

在View中使用Compose

ComposeView内嵌在Xml中:

一个平平无奇的xml布局文件中加入ComposeView:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical">
  6. <TextView
  7. android:id="@+id/hello_world"
  8. android:layout_width="match_parent"
  9. android:layout_height="wrap_content"
  10. android:text="Hello from XML layout" />
  11. <androidx.compose.ui.platform.ComposeView
  12. android:id="@+id/compose_view"
  13. android:layout_width="match_parent"
  14. android:layout_height="match_parent" />
  15. </LinearLayout>

使用的时候, 先根据id查找出来, 再setContent:

  1. class ComposeViewInXmlActivity : AppCompatActivity() {
  2. override fun onCreate(savedInstanceState: Bundle?) {
  3. super.onCreate(savedInstanceState)
  4. setContentView(R.layout.activity_compose_view_in_xml)
  5. findViewById<ComposeView>(R.id.compose_view).setContent {
  6. // In Compose world
  7. MaterialTheme {
  8. Text("Hello Compose!")
  9. }
  10. }
  11. }
  12. }

动态添加ComposeView

在代码中使用addView()来添加View对于ComposeView来说也同样适用:

  1. class ComposeViewInViewActivity : AppCompatActivity() {
  2. override fun onCreate(savedInstanceState: Bundle?) {
  3. super.onCreate(savedInstanceState)
  4. setContentView(LinearLayout(this).apply {
  5. orientation = VERTICAL
  6. addView(ComposeView(this@ComposeViewInViewActivity).apply {
  7. id = R.id.compose_view_x
  8. setContent {
  9. MaterialTheme {
  10. Text("Hello Compose View 1")
  11. }
  12. }
  13. })
  14. addView(TextView(context).apply {
  15. text = "I'm am old TextView"
  16. })
  17. addView(ComposeView(context).apply {
  18. id = R.id.compose_view_y
  19. setContent {
  20. MaterialTheme {
  21. Text("Hello Compose View 2")
  22. }
  23. }
  24. })
  25. })
  26. }
  27. }

这里在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

例子:

  1. @Composable
  2. fun CustomView() {
  3. val state = remember { mutableStateOf(0) }
  4. //widget.Button
  5. AndroidView(
  6. factory = { ctx ->
  7. //Here you can construct your View
  8. android.widget.Button(ctx).apply {
  9. text = "My Button"
  10. layoutParams = LinearLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT)
  11. setOnClickListener {
  12. state.value++
  13. }
  14. }
  15. },
  16. modifier = Modifier.padding(8.dp)
  17. )
  18. //widget.TextView
  19. AndroidView(factory = { ctx ->
  20. //Here you can construct your View
  21. TextView(ctx).apply {
  22. layoutParams = LinearLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT)
  23. }
  24. }, update = {
  25. it.text = "You have clicked the buttons: " + state.value.toString() + " times"
  26. })
  27. }

这里的桥梁是AndroidView, 它是一个composable方法:

  1. @Composable
  2. fun <T : View> AndroidView(
  3. factory: (Context) -> T,
  4. modifier: Modifier = Modifier,
  5. update: (T) -> Unit = NoOpUpdate
  6. )

factory接收一个Context参数, 用来构建一个View.
update方法是一个callback, inflate之后会执行, 读取的状态state值变化后也会被执行.

在Compose中使用xml布局

上面提到的在Compose中使用AndroidView的方法, 对于少量的UI还行.
如果需要复用一个已经存在的xml布局怎么办?
不用怕, view binding登场了.

使用起来也很简单:

  • 首先你需要开启View Binding.
  1. buildFeatures {
  2. compose true
  3. viewBinding true
  4. }
  • 其次你需要一个xml的布局, 比如叫complex_layout.
  • 然后添加一个Compose view binding的依赖: androidx.compose.ui:ui-viewbinding.

然后build一下, 生成binding类,
这样就好了, 哒哒:

  1. @Composable
  2. private fun ComposableFromLayout() {
  3. AndroidViewBinding(ComplexLayoutBinding::inflate) {
  4. sampleButton.setBackgroundColor(Color.GRAY)
  5. }
  6. }

其中ComplexLayoutBinding是根据布局名字生成的类.

AndroidViewBinding内部还是调用了AndroidView这个composable方法.

番外篇: 在Compose中显示Fragment

这个场景听上去有点奇葩, 因为Compose的设计理念, 貌似就是为了跟Fragment说再见.
在Compose构建的UI中, 再找地方显示一个Fragment, 有点新瓶装旧酒的意思.

但是遇到的场景多了, 你没准真能遇上呢.

Fragment通过FragmentManager添加, 需要一个布局容器.
把上面ViewBinding的例子改改, 布局里加入一个fragmentContainer, 点击显示Fragment:

  1. Column(Modifier.fillMaxSize()) {
  2. Text("I'm a Compose Text!")
  3. Button(
  4. onClick = {
  5. showFragment()
  6. }
  7. ) {
  8. Text(text = "Show Fragment")
  9. }
  10. ComposableFromLayout()
  11. }
  12. @Composable
  13. private fun ComposableFromLayout() {
  14. AndroidViewBinding(
  15. FragmentContrainerBinding::inflate,
  16. modifier = Modifier.fillMaxSize()
  17. ) {
  18. }
  19. }
  20. private fun showFragment() {
  21. supportFragmentManager
  22. .beginTransaction()
  23. .add(R.id.fragmentContainer, PureComposeFragment())
  24. .commit()
  25. }

这里没有考虑时机的问题, 因为点击按钮展示Fragment, 将时机拖后了.
如果直接在初始化的时候想显示Fragment, 可能会抛出异常:

  1. java.lang.IllegalArgumentException: No view found for id

解决办法:

  1. @Composable
  2. private fun ComposableFromLayout() {
  3. AndroidViewBinding(
  4. FragmentContrainerBinding::inflate,
  5. modifier = Modifier.fillMaxSize()
  6. ) {
  7. // here is safe
  8. showFragment()
  9. }
  10. }

所以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.
至于什么学习曲线, 经验不足, 反正早晚都要学的, 整点新鲜的也挺好, 亦可赛艇.

原文链接:http://www.cnblogs.com/mengdd/p/Jetpack-Compose-Interoperability.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号