Android开发Compose集成高德地图实例

目录
  • 正文
    • 高德地图官网开发者建议
  • 初始化MapView并添加到AndroidView里面
    • MapView增加一个管理地图生命周期的扩展
    • 给MapView添加生命周期观察者
    • 添加MapView的生命周期控制

正文

Compose中我们应该怎么使用地图呢?像之前我们在xml里面创建MapView,都是在Activity里面,管理MapView生命周期,和其他的监听器,Compose里面怎么搞?

下面我们以高德地图为例,在Compose中创建地图MapView,然后用AndroidView添加MapView,像下面这样:

AndroidView(modifier = Modifier, factory = { MapView }){...}

高德地图官网开发者建议

我们看到,高德地图官网,给开发者的建议:

所以我们需要做什么,大家晓得了哇,生命周期回调我们要拿到,那我们应该怎么搞?

我们需要用到LocalLifecycleOwner.current.lifecycle去添加生命周期观察者, LifecycleObserver是一个接口,它长下面这样:

我们看注释可以看到,我们可以使用DefaultLifecycleObserver或者LifecycleEventObserverDefaultLifecycleObserver里面它提供了所有的生命周期事件的回调,并且默认情况下都是什么都不做。 LifecycleEventObserver,它提供了一个onStateChanged方法,所有的生命周期事件都可以在这里被接受到。

所以,我们这里就使用LifecycleEventObserver,为啥懂的都懂。

我们有了2个需要初始化的东西,一个是MapView,一个是添加生命周期观察者。

为什么要添加生命周期观察者,看了上面的官方文档应该知道是为什么,是需要管理地图的生命周期,下面我们来讲讲如何做,该怎么做。

初始化MapView并添加到AndroidView里面

val context = LocalContext.current
// aMapOptionsFactory: () -> AMapOptions = { AMapOptions() }
val mapView = remember {
   MapView(context, aMapOptionsFactory()).apply{
      id = R.id.map
   }
}
// 添加MapView
AndroidView(modifier = modifier, factory = { mapView })

我们来拆解一下,如何添加生命周期管理者,我们给大家聊聊:registerComponentCallbacks,这个ComponentCallbacks里面提供了2个方法: onConfigurationChangedonLowMemory

onConfigurationChanged: 设备配置发生改变,组件还在运行时

onLowMemory:系统运行的内存不足时,可以通过实现该方法去释放内存或不需要的资源,我们需要在这个方法里面,调用MapView#onLowMemory

在上面官方文档中,我们看到地图的生命周期管理,需要调用下面4个方法: MapView#onCreateMapView#onResumeMapView#onPauseMapView#onDestory,有了这些前奏,我们就知道怎么写地图生命周期的扩展方法了。

MapView增加一个管理地图生命周期的扩展

// 管理地图生命周期
private fun MapView.lifecycleObserver(): LifecycleEventObserver =
    LifecycleEventObserver { _, event ->
        when (event) {
            Lifecycle.Event.ON_CREATE -> this.onCreate(Bundle())
            Lifecycle.Event.ON_RESUME -> this.onResume() // 重新绘制加载地图
            Lifecycle.Event.ON_PAUSE -> this.onPause()  // 暂停地图的绘制
            Lifecycle.Event.ON_DESTROY -> this.onDestroy() // 销毁地图
            else -> {}
        }
    }
private fun MapView.componentCallbacks(): ComponentCallbacks =
    object : ComponentCallbacks {
        // 设备配置发生改变,组件还在运行时
        override fun onConfigurationChanged(config: Configuration) {}
        // 系统运行的内存不足时,可以通过实现该方法去释放内存或不需要的资源
        override fun onLowMemory() {
            // 调用地图的onLowMemory
            this@componentCallbacks.onLowMemory()
        }
    }

给MapView添加生命周期观察者

@Composable
private fun MapLifecycle(mapView: MapView) {
    val context = LocalContext.current
    val lifecycle = LocalLifecycleOwner.current.lifecycle
    DisposableEffect(context, lifecycle, mapView) {
        val mapLifecycleObserver = mapView.lifecycleObserver()
        val callbacks = mapView.componentCallbacks()
        // 添加生命周期观察者
        lifecycle.addObserver(mapLifecycleObserver)
        // 注册ComponentCallback
        context.registerComponentCallbacks(callbacks)
        onDispose {
            // 删除生命周期观察者
            lifecycle.removeObserver(mapLifecycleObserver)
            // 取消注册ComponentCallback
            context.unregisterComponentCallbacks(callbacks)
        }
    }
}

添加MapView的生命周期控制

使用起来也很容易,先初始化MapView然后添加到AndroidView,最后添加MapView的生命周期控制:

val context = LocalContext.current
val mapView = remember {
   MapView(context, aMapOptionsFactory()).apply{
      id = R.id.map
   }
}
AndroidView(modifier = modifier, factory = { mapView })
MapLifecycle(mapView)

这样只能说满足我们的正常地图显示,实际上我们开发过程中,常见的地图拖拽选点定位蓝点标记位等都需要我们去扩展。

地图拖拽选点功能来说,我们就需要在MapLifecycle添加2个生命周期的回调,onResumeonPause

MapLifecycle(
  mapView = mapView,
  // 从mapView.lifecycleObserver回调回来即可
  onResume = {
      mapView.map.apply{
         setOnMapLoadedListener(...)
         setOnCameraChangeListener(...)
      }
  },
  onPause = {
      mapView.map.apply{
         setOnMapLoadedListener(null)
         setOnCameraChangeListener(null)
      }
  }
)

剩下的功能,都是拿AMap对象去做事情,添加覆盖物移动相机镜头等等。

注意: 初始化地图的时候,传入的aMapOptionsFactory,可以从外面初始化好传进来。

aMapOptionsFactory: () -> AMapOptions = { AMapOptions() }

Compose集成的高德地图效果

以上就是Android开发Compose集成高德地图实例的详细内容,更多关于Android Compose集成高德地图的资料请关注我们其它相关文章!

(0)

相关推荐

  • Android Jetpack结构运用Compose实现微博长按点赞彩虹效果

    目录 原版 1. Compose 动画 API 概览 2. 长按点赞动画分解 3. 彩虹动画 3.1 状态管理 AnimatedRainbow animatedRainbows 列表 3.2 内容绘制 4. 表情动画 4.1 状态管理 AnimatedEmoji infiniteRepeatable CubicBezierEasing 抛物线动画 animatedEmojis 列表 4.2 内容绘制 5. 烟花动画 5.1 状态管理 AnimatedFlower keyframes animat

  • Android Jetpack Compose无限加载列表

    目录 前言 方法一: paging-compose 方法二:自定义实现 添加 LoadingIndicator 总结 前言 Android 中使用 ListView 或者 RecycleView 经常有滚动到底部自动 LoadMore 的需求,那么在 Compose 中该如何实现呢? 两种方法可供选择: 基于 paging-compose 自定义实现 方法一: paging-compose Jetpack 的 Paging 组件提供了对 Compose 的支持 dependencies { ..

  • 使用Compose制作抖音快手视频进度条Loading动画效果

    目录 引言 Loading效果 BoxWithConstraints代码 animateFloat获取动画更新值 线条动画值 执行渐隐 最终效果 引言 现在互联网产品,感觉谁家的App不整点视频功能,严格意义上都不能说是一个现代互联网App了,我们知道最火的是抖音.快手这类短视频App,在刷视频的同时,他们的App交互上面的一些特色能让我们一直沉浸在刷视频中: 比如,我们今天要聊的,短视频翻页流列表,视频加载缓冲的时候,Loading的设计: 它设计:在视频底部,进度条上面,当视频缓冲加载等待的

  • Android开发Compose remember原理解析

    目录 正文 随机色文本 原因分析 正确实现 remember的原理剖析 小结 正文 看过Compose案例或者源码的你,相信肯定是见过 remember 了的.顾名思义,Compose是要让我们的代码“记住”东西,那到底是记住什么呢?要是不 remember,相关功能就实现不了了吗? 带着这些问题,来一探究竟吧 随机色文本 假设有这么一个“随机底色文本”的需求:实现一个 Text,其背景色每次启动都随机产生,且生命周期内不变 用Compose可以实现如下: private val items =

  • Android之Compose页面切换动画介绍

    目录 前因后果 开始尝试 开始撸码 仓促的结尾 前因后果 Compose 正式版已经发布了一个多月了,从 Compose beta 版本发布之后各大网站中热度就一直不减,官方也一直在为开发者们推出学习 Compose 的文章,更加说明了 Android 开发的未来趋势. 在之前我写了 Compose 版本的玩安卓,当然也有 MVVM 版本的,只是不同分支而已,这是 Github地址:https://github.com/zhujiang521/PlayAndroid 但之前一直存在着一个问题,就

  • Android Compose自定义TextField实现自定义的输入框

    目录 概览 简单自定义BasicTextField示例 实现自定义样式的BasicTextField 使用BasicTextField自定义百度输入框 概览 众所周知Compose中默认的TextField和OutlineTextField样式并不能满足所有的使用场景,所以自定义TextField就成了必备技能,本文就揭露一下自定义TextField的实现.自定义TextField主要使用BasicTextField实现. 简单自定义BasicTextField示例 1.代码 var text

  • Android开发Compose集成高德地图实例

    目录 正文 高德地图官网开发者建议 初始化MapView并添加到AndroidView里面 MapView增加一个管理地图生命周期的扩展 给MapView添加生命周期观察者 添加MapView的生命周期控制 正文 Compose中我们应该怎么使用地图呢?像之前我们在xml里面创建MapView,都是在Activity里面,管理MapView生命周期,和其他的监听器,Compose里面怎么搞? 下面我们以高德地图为例,在Compose中创建地图MapView,然后用AndroidView添加Map

  • Android集成高德地图详细介绍

    最终效果是,本App展示地图,点击地图导航,调转三方实现导航. 1.迈出第一步,去创建自己的应用key https://lbs.amap.com/1.1创建完应用之后,点击页面的{添加},要求填写自己项目的信息 对于调试获取SHA1的方法是:1.打开cmd,2.在弹出的控制台窗口中输入 cd .android 定位到 .android 文件夹: 3.继续在控制台输入命令: 调试版本使用 debug.keystore,命令为:keytool -list -v -keystore debug.key

  • Flutter集成高德地图并添加自定义Maker的实践

    目录 一.进入高德地图开放平台申请Key 二.yaml文件集成插件 目前地图开放平台三大巨头:高德.百度.腾讯基本都支持Flutter插件开发集成.从这里也能看出Flutter的生态在逐渐的完善.下面介绍下在Flutter项目集成高德地图的一些步骤和个人踩得一些坑. 一.进入高德地图开放平台申请Key Android端需要设置发布版本和调试版本SHA1值,这里可以通过AndroidStudio 自带工具获取, 点击会生成调式SHA1值.发布版本同理. 接着我们设置完SHA1值和包名之后点击提交即

  • Android 开发中使用Linux Shell实例详解

    Android 开发中使用Linux Shell实例详解 引言 Android系统是基于Linux内核运行的,而做为一名Linux粉,不在Android上面运行一下Linux Shell怎么行呢? 最近发现了一个很好的Android Shell工具代码,在这里分享一下. Shell核心代码 import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import java.

  • android开发仿ios的UIScrollView实例代码

    今天重新装了编译器,结果崩无极限,真是日了狗了了.刚刚才知道问题在哪边. 好了,说正事,对于ios开发我没接触,不是很了解,百度了半天,差不多就是UIScrollView的把.如果不对,请指证.具体什么效果呢,我刚才拿朋友的iphone手机看了下,iphone的设置界面,第一个列表往下拉可以继续滚,上拉同理.不过android好像没有自带的这种情况. 我把这种效果称为滚无极限的scollview. 下面就来上源码: 首先,最最最重要的就是判断当前视图是否为空,你空视图滚不滚好像没啥区别,除了an

  • Android开发Compose框架使用开篇

    目录 Compose的诞生 Compose好处 Compose 架构 @Composable的背后 智能重组真的那么智能吗 最后 Compose的诞生 在2019年的谷歌IO大会上,Compose作为Android新一代UI开发亮相,因为声明式开发越来越流行了,对标IOS开发SwiftUi,Compose的立项也为Android开发新加了声明式ui的开发选项,在2021年7月1.0正式版本的诞生,也意味着Compose即将进入生产环节,国际app巨头Twitter就首当其冲,在新页面上用上了Co

  • vue调用高德地图实例代码

    一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk 引入有两种方式,一种是页面直接引入 复制代码 代码如下: <script type="text/javascript" src=&q

  • Android开发之电话拨号器实例详解

    本文实例分析了Android开发之电话拨号器的用法.分享给大家供大家参考,具体如下: 1.新建一个名为javacallPhone的安卓项目,并在cn.csdn.hr.activity包下建一个CallPhoneActivity.java类 2.打开res下的Layout下的main.xml进行布局,设置布局方式为水平布局,再从左侧分别拖入textview,text files下的Phone,和button按钮,通过new String后效果如下: 3.打开CallPhoneActivity.ja

  • Android开发中滑动分页功能实例详解

    本文实例讲述了Android开发中滑动分页功能.分享给大家供大家参考,具体如下: android UI 往右滑动,滑动到最后一页就自动加载数据并显示 如图: Java代码: package cn.anycall.ju; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import andro

随机推荐