Android View与Compose互相调用实例探究

目录
  • 1. 前言
  • 2. Android传统View调用Compose
    • 2.1 新建传统View体系的Android项目
    • 2.2 项目添加Compose配置
      • 2.2.1 在android代码块添加
      • 2.2.2 在dependencies中添加依赖
    • 2.3 定义Compose函数
    • 2.4 修改xml文件
    • 2.5 关联Compose函数
    • 2.6 运行项目
  • 3. Compose中调用Android View
    • 3.1 调用传统View的日历
      • 3.1.1 使用AndroidView
      • 3.1.2 显示效果如下
    • 3.2 调用传统View的WebView
      • 3.2.1 添加网络权限
      • 3.2.2 首先要注册WebView的生命周期
      • 3.2.3 创建有状态的WebView
      • 3.2.4 调用Android View
      • 3.2.5 显示效果如下所示
  • 4. 双层嵌套
    • 4.1 在定义Xml中定义ComposeView
    • 4.2 关联Compose函数
    • 4.3 创建ids.xml定义原生view id
    • 4.4 实现ComposeContent
    • 4.5 在外层的原生代码处获取Compose中的原生View
    • 4.6 运行项目
  • 5. 本文源码下载

1. 前言

Compose 具有超强的兼容性,兼容现有的所有代码,Compose 能够与现有 View 体系并存,可实现渐进式替换。这就很有意义了,我们可以在现有项目中一小块一小块逐步地替换Compose,或者在旧项目中实现新的需求的时候,使用Compose

今天,我们就来演示一下,ComposeAndroid View怎么互相调用,以及在双层嵌套(原生View嵌套ComposeCompose中又嵌套原生View)的情况下,在最外层原生View中,怎么获取到Compose内部的原生View

2. Android传统View调用Compose

2.1 新建传统View体系的Android项目

新建项目的时候选择 Empty Activity

2.2 项目添加Compose配置

2.2.1 在android代码块添加

appbuild.config android代码块中添加

buildFeatures {
    compose true
}
composeOptions {
    kotlinCompilerExtensionVersion '1.1.1'
}

2.2.2 在dependencies中添加依赖

appbuild.config dependencies代码块中添加

dependencies {
    //...省略...

def compose_ui_version = '1.1.1'
    implementation "androidx.compose.ui:ui:$compose_ui_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_ui_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_ui_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_ui_version"

implementation 'androidx.activity:activity-compose:1.3.1' //kotlin对应版本1.6.20
    implementation 'androidx.compose.material:material:1.1.1'
}

2.3 定义Compose函数

MainActivity.kt中定义Compose函数

@Composable
fun ComposeContent() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "Hello world!")
    }
}

2.4 修改xml文件

activity_main.xml中添加androidx.compose.ui.platform.ComposeView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

2.5 关联Compose函数

MainActivity.kt中,先通过findViewById找到ComposeView,然后通过composeView.setContent将Android 传统View和Compose建立关联。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val composeView : ComposeView = findViewById(R.id.compose_view)
    composeView.setContent {
        ComposeContent()
    }
}

2.6 运行项目

可以发现界面显示如下,成功在传统View项目中调用了Compose

3. Compose中调用Android View

3.1 调用传统View的日历

3.1.1 使用AndroidView

@Composable内使用: androidx.compose.ui.viewinterop.AndroidView,然后在factory里面返回原生View即可

@Composable
fun AndroidViewPage() {
    AndroidView(factory = {
        CalendarView(it)
    }, modifier = Modifier.fillMaxWidth(), update = {
        it.setOnDateChangeListener { view, year, month, day ->
            Toast.makeText(view.context, "${year}年${month}月${day}日", Toast.LENGTH_SHORT).show()
        }
    })
}

3.1.2 显示效果如下

3.2 调用传统View的WebView

3.2.1 添加网络权限

首先需要在AndroidManifest.xml中添加网络权限

<uses-permission android:name="android.permission.INTERNET" />

3.2.2 首先要注册WebView的生命周期

@Composable
private fun rememberWebViewLifecycleObserver(webView: WebView): LifecycleEventObserver {
    return remember(webView) {
        LifecycleEventObserver { _, event ->
            run {
                when (event) {
                    Lifecycle.Event.ON_RESUME -> webView.onResume()
                    Lifecycle.Event.ON_PAUSE -> webView.onPause()
                    Lifecycle.Event.ON_DESTROY -> webView.destroy()
                    else -> Log.e("WebView", event.name)
                }
            }
        }
    }
}

3.2.3 创建有状态的WebView

创建有状态的WebView,并注册生命周期

@Composable
fun rememberWebViewWIthLifecycle(): WebView {
    val context = LocalContext.current
    val webView = remember {
        WebView(context)
    }
    val lifecycleObserver = rememberWebViewLifecycleObserver(webView)
    val lifecycle = LocalLifecycleOwner.current.lifecycle
    DisposableEffect(lifecycle) {
        lifecycle.addObserver(lifecycleObserver)
        onDispose {
            lifecycle.removeObserver(lifecycleObserver)
        }
    }
    return webView
}

3.2.4 调用Android View

@Composable
fun WebViewPage() {
    //创建有状态的WebView,并注册生命周期
    val webView = rememberWebViewWIthLifecycle()
    AndroidView(factory = {
        webView
    }, modifier = Modifier
        .fillMaxSize() //宽高占满父布局
        .background(Color.Red),
    update = {webView ->
        //设置支持JavaScript
        val webSettings = webView.settings
        webSettings.javaScriptEnabled = true
        webView.loadUrl("https://www.baidu.com")
    })
}

3.2.5 显示效果如下所示

4. 双层嵌套

获取AndroidView中的原生View id

有时候,我们会遇到这种情况,就是在原生项目了,页面中有部分使用了Compose,然后在Compose中又有部分组件使用了原生View,这种情况下,要如何取到AndroidView中的原生View id 呢 ?

4.1 在定义Xml中定义ComposeView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

4.2 关联Compose函数

MainActivity.kt中,先通过findViewById找到ComposeView,然后通过composeView.setContent将Android 传统View和Compose建立关联。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val composeView : ComposeView = findViewById(R.id.compose_view)
    composeView.setContent {
        ComposeContent()
    }
}
@Composable
fun ComposeContent() {
	//....
}

4.3 创建ids.xml定义原生view id

resources/values目录下创建ids.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item type="id" name="my_calendar_view" />
</resources>

4.4 实现ComposeContent

@Composable
fun ComposeContent() {
    AndroidView(factory = {
        //这里也可以通过 layoutInflater.inflate(R.layout.xxxxxx) 的方式返回原生View
        val calendarView = CalendarView(it)
        val keyboard = R.id.my_calendar_view
        Log.i(TAG,"my_calendar_view id:$keyboard")
        calendarView.id = keyboard
        calendarView
    }, modifier = Modifier.fillMaxWidth(), update = {
        it.setOnDateChangeListener { view, year, month, day ->
            Toast.makeText(view.context, "${year}年${month}月${day}日", Toast.LENGTH_SHORT).show()
        }
    })
}

4.5 在外层的原生代码处获取Compose中的原生View

在原生代码的地方,通过composeView.findViewById查找id为my_calendar_view的原生View

window?.decorView?.post {
    val calendarViewId = R.id.my_calendar_view
    Log.i(TAG,"my_calendar_view id ===>:$calendarViewId")
    val calendarView = composeView.findViewById<CalendarView>(calendarViewId)
    Log.i(TAG,"calendarView:$calendarView")
    calendarView.setOnDateChangeListener { view, year, month, day ->
        Toast.makeText(view.context, "!!!! ${year}年${month}月${day}日", Toast.LENGTH_SHORT).show()
    }
}

注意这里的window?.decorView?.post : 必须在页面加载完成后,才能查找到my_calendar_view对应的原生View,如果直接在onCreate里面去查找,会发现composeView.findViewById<CalendarView>(calendarViewId)返回的是null

4.6 运行项目

选择任意一个日期,可以发现弹出的toast是!!!! year年month月day日,即原生的setOnDateChangeListener覆盖了Compose中的setOnDateChangeListener监听,这样说明我们也在原生代码处,取到了Compose内部的原生View了。

5. 本文源码下载

本文源码下载地址 : 传送门

到此这篇关于Android View与Compose互相调用实例探究的文章就介绍到这了,更多相关Android View与Compose 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • AndroidView与Compose框架交互实现介绍

    目录 1.在ComposeUI中加载AndroidView控件 2.在AndroidView中加载ComposeUI 3.LiveData数据转换成State数据 1.在ComposeUI中加载AndroidView控件 Compose中可以加载AndroidView还是比较简单的,直接引入AndroidView来加载AndroidView布局文件. @Composable fun Greeting(name: String) { Column { Text(text = "Hello $nam

  • Android View与Compose互相调用实例探究

    目录 1. 前言 2. Android传统View调用Compose 2.1 新建传统View体系的Android项目 2.2 项目添加Compose配置 2.2.1 在android代码块添加 2.2.2 在dependencies中添加依赖 2.3 定义Compose函数 2.4 修改xml文件 2.5 关联Compose函数 2.6 运行项目 3. Compose中调用Android View 3.1 调用传统View的日历 3.1.1 使用AndroidView 3.1.2 显示效果如下

  • 实例探究Android开发中Fragment状态的保存与恢复方法

    我们都知道,类似 Activity, Fragment 有 onSaveInstanceState() 回调用来保存状态. 在Fragment里面,利用onSaveInstanceState保存数据,并可在onActivityCreated里面恢复数据. public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); ... if (savedInsta

  • Android View.onMeasure方法详解及实例

    Android View.onMeasure方法详解及实例 View在屏幕上显示出来要先经过measure(计算)和layout(布局). 1.什么时候调用onMeasure方法? 当控件的父元素正要放置该控件时调用.父元素会问子控件一个问题,"你想要用多大地方啊?",然后传入两个参数--widthMeasureSpec和heightMeasureSpec. 这两个参数指明控件可获得的空间以及关于这个空间描述的元数据. 更好的方法是你传递View的高度和宽度到setMeasuredDi

  • Android View刷新机制实例分析

    本文实例讲述了Android View刷新机制.分享给大家供大家参考,具体如下: 一.总体说明 在Android的布局体系中,父View负责刷新.布局显示子View:而当子View需要刷新时,则是通知父View来完成. 二.代码分析 1).ViewGroup的addView方法,理解参数的意义和传递 invalidate调用父类View的方法 addViewInner方法主要做的事情是 view的dispatchAttachedToWindow(AttachInfo info, int visi

  • Android自定义View中attrs.xml的实例详解

    Android自定义View中attrs.xml的实例详解 我们在自定义View的时候通常需要先完成attrs.xml文件 在values中定义一个attrs.xml 然后添加相关属性 这一篇先详细介绍一下attrs.xml的属性. <?xml version="1.0" encoding="utf-8"?> <resources> //自定义属性名,定义公共属性 <attr name="titleText" for

  • android 自定义圆角button效果的实例代码(自定义view Demo)

    概述 在平时开发过程中经常会碰到需要使用圆角button的情况,一般也会包括很多其他小功能,比如要在里面添加img,设置不同的圆角大小等. 针对这样的场景,直接使用创建多个shape,定义多个xml文件也是可以实现的.但是如果使用非常频繁,那么直接自定义一个就会来的非常方便. 甚至在一些情况下,不是可以用shape定义的规则图形,比如需要用到贝塞尔曲线等. 如果全局需要这样风格的view,那么自定义一个View是非常必要的. 本文主要是个demo记录,如有需要的读者可以借鉴学习. Demo 主要

  • Android View添加 Listener 实例代码

    复制代码 代码如下: findViewById(R.id.myButton).setOnClickListener(new View.OnClickListener() {        public void onClick(View v) {            // Do stuff        }    }); 采用上述方法添加Listener有个缺点就是如果控件太多的话,Listener数量也会增多,因此,可以采用如下的小窍门减少Listener的数量: 复制代码 代码如下: Vi

  • BackBone及其实例探究_动力节点Java学院整理

    MVC简介 基本介绍 MVC即模型(Model),视图(View)和控制(Controller),旨在实现Web系统的职能分工,具体来说就是使业务逻辑和数据显示分离. 在MVC中,视图(View)为用户提供交互,模型(Model)负责处理数据和业务逻辑,控制器(Controller)则是View与Model之间沟通的桥梁. MVC一个很重要的标志就是,视图(View)与模型(Model)没有直接的交互,而是通过控制器(Controller)来沟通.具体地:用户通过View进行输入,Control

  • Android编程中的消息机制实例详解

    本文实例讲述了Android编程中的消息机制.分享给大家供大家参考,具体如下: 在分析Android消息机制之前,我们先来看一段代码: public class MainActivity extends Activity implements View.OnClickListener { private TextView stateText; private Button btn; @Override public void onCreate(Bundle savedInstanceState)

  • Android控件之ListView用法实例详解

    本文实例讲述了Android控件之ListView用法.分享给大家供大家参考.具体如下: 示例一: 在android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示. main.xml布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:id="@+id/LinearLayout01" androi

随机推荐