Android 自定义图片地图坐标功能的实现

 更新时间:2021年7月6日 10:00  点击:1850

一、前言

最近项目要求实现一个在自定义地图图片上添加坐标信息的功能,类似于在图片做标注的功能。如下图所示。坐标的位置是相对于图片宽高的百分比

在这里插入图片描述
在这里插入图片描述

二、思路

改功能主要分为三个视图,1.继承FrameLayout作为父容器;2.添加一个铺满父布局的ImageView显示地图图片;3.动态添加自定义坐标视图

三、代码实现

1. 自定义坐标视图

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/iv_sign"
        android:layout_width="20dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:src="@mipmap/dot2"
        app:layout_constraintEnd_toStartOf="@+id/tv_sign_name"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_sign_name"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:text="美食城"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_sign_state"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:background="@color/teal_200"
        android:text="正常"
        android:textColor="@color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/tv_sign_name"
        app:layout_constraintTop_toBottomOf="@+id/tv_sign_name" />

</androidx.constraintlayout.widget.ConstraintLayout>

class SignView : ConstraintLayout {
    private val TAG = SignView::class.java.simpleName

    private var view: View
    private var signIv: ImageView
    private var signNameTv: TextView
    private var signStateTv: TextView

    constructor(context: Context) : super(context)

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)

    constructor(context: Context, attrs: AttributeSet?, @AttrRes defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    )

    init {
        view = LayoutInflater.from(context).inflate(R.layout.sign_view, this, true)
        signIv = view.findViewById(R.id.iv_sign)
        signNameTv = view.findViewById(R.id.tv_sign_name)
        signStateTv = view.findViewById(R.id.tv_sign_state)
    }

    /**
     * 设置坐标信息
     * @param signBean SignBean
     */
    fun setData(signBean: SignBean) {
        signNameTv.text = signBean.name
        signStateTv.text = signBean.state
    }


    /**
     * 计算坐标图标在整个视图的偏移量
     * @return IntArray
     */
    fun getSignOffset(): IntArray {
        val w = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
        val h = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
        signIv.measure(w, h)

        val offset = IntArray(2)
        val signImageWidth = signIv.measuredWidth
        val signImageHeight = signIv.measuredHeight
        offset[0] = signImageWidth / 2
        offset[1] = 20 + signImageHeight - offset[0]
        Log.d(TAG, "getSignOffset: x:${offset[0]}, y:${offset[1]}")
        return offset
    }
}

自定义的坐标视图是一个组合的控件,主要是要计算出坐标图片在整个控件的偏移量

2. 父容器

class MapView : FrameLayout {
    private val TAG = MapView::class.java.simpleName

    //地图图片
    private var mapImage = ImageView(context)

    private var mapWidth = 0

    private var mapHeight = 0

    private var mapLeft = 0

    private var mapTop = 0

    private var signBeanList = listOf<SignBean>()

    private var signOffsetList = mutableListOf<IntArray>()

    private var signViewList = mutableListOf<SignView>()

    private var capturedViewIndex = 0

    private val mDragger: ViewDragHelper =
        ViewDragHelper.create(this, 1.0f, object : ViewDragHelper.Callback() {
            override fun tryCaptureView(child: View, pointerId: Int): Boolean {
                return child != mapImage
            }

            override fun onViewCaptured(capturedChild: View, activePointerId: Int) {
                signViewList.forEachIndexed { index, signView ->
                    if (signView == capturedChild) {
                        capturedViewIndex = index
                        return@forEachIndexed
                    }
                }
            }

            override fun onViewPositionChanged(
                changedView: View,
                left: Int,
                top: Int,
                dx: Int,
                dy: Int
            ) {
                signOffsetList[capturedViewIndex][0] += dx
                signOffsetList[capturedViewIndex][1] += dy
            }

            override fun clampViewPositionHorizontal(child: View, left: Int, dx: Int): Int {
                val move = if (left <= mapLeft)
                    mapLeft
                else if (left >= mapWidth + mapLeft)
                    mapWidth + mapLeft
                else
                    left
                return move
            }

            override fun clampViewPositionVertical(child: View, top: Int, dy: Int): Int {
                val move = if (top <= mapTop)
                    mapTop
                else if (top >= mapHeight + mapTop)
                    mapHeight + mapLeft
                else
                    top
                return move
            }
        })

    constructor(context: Context) : super(context)

    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)

    constructor(context: Context, attrs: AttributeSet?, @AttrRes defStyleAttr: Int) : this(
        context,
        attrs,
        defStyleAttr,
        0
    )

    constructor(
        context: Context, attrs: AttributeSet?,
        @AttrRes defStyleAttr: Int, @StyleRes defStyleRes: Int
    ) : super(context, attrs, defStyleAttr, defStyleRes)


    /**
     * 添加地图图片
     * @param resId Int
     */
    fun setMapImage(@DrawableRes resId: Int) {
        removeAllViews()
        mapImage.setImageResource(resId)
        addView(mapImage)
    }


    /**
     * 设置坐标列表
     * @param list List<SignBean>
     */
    fun setSignData(list: List<SignBean>) {
        val mapOffset = getBitmapOffset(mapImage, true)
        mapLeft = mapOffset[0]
        mapTop = mapOffset[1]

        mapWidth = mapImage.width - mapLeft * 2
        mapHeight = mapImage.height - mapTop * 2

        var signOffset = IntArray(2)
        var boolean = true

        Log.d(TAG, "mapWidth:$mapWidth, mapHeight:$mapHeight, mapLeft:$mapLeft, mapTop:$mapTop")

        signBeanList = list
        removeViews(1, childCount - 1)
        signViewList.clear()
        signOffsetList.clear()
        list.forEach {
            val signView = SignView(context).apply {
                setData(it)
            }
            // 只需要计算一次
            if (boolean) {
                boolean = false
                signOffset = signView.getSignOffset()
            }
            signView.layoutParams = getParams(it, signOffset)
            addView(signView)
            signViewList.add(signView)
            signOffsetList.add(intArrayOf((it.x * mapWidth).toInt(), (it.y * mapHeight).toInt()))
        }
    }


    /**
     * 获取移动后的坐标信息
     * @return List<SignBean>
     */
    fun getMoveSignData(): List<SignBean> {
        val data = mutableListOf<SignBean>()
        signOffsetList.forEachIndexed { index, ints ->
            val signBean = signBeanList[index]
            data.add(
                SignBean(
                    signBean.name,
                    signBean.state,
                    ints[0] / mapWidth.toFloat(),
                    ints[1] / mapHeight.toFloat()
                )
            )
        }
        return data
    }


    /**
     * 计算坐标位置
     * @param signBean SignBean
     * @return LayoutParams
     */
    private fun getParams(signBean: SignBean, signOffset: IntArray): LayoutParams {
        val params = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
        params.setMargins(
            (signBean.x * mapWidth + mapLeft - signOffset[0]).toInt(),
            (signBean.y * mapHeight + mapTop - signOffset[1]).toInt(),
            0,
            0
        )
        return params
    }


    /**
     * 计算图像在ImageView的位移量
     * @param img ImageView
     * @param includeLayout Boolean
     * @return IntArray?
     */
    private fun getBitmapOffset(img: ImageView, includeLayout: Boolean): IntArray {
        val offset = IntArray(2)
        val values = FloatArray(9)
        val m: Matrix = img.imageMatrix
        m.getValues(values)
        offset[0] = values[2].toInt()
        offset[1] = values[5].toInt()

        if (includeLayout) {
            val lp = img.layoutParams as MarginLayoutParams
            offset[0] += img.paddingLeft + lp.leftMargin
            offset[1] += img.paddingTop + lp.topMargin
        }
        return offset
    }

    override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
        return mDragger.shouldInterceptTouchEvent(event)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        mDragger.processTouchEvent(event)
        return true
    }

}

父容器中要注意的是由于图片不拉伸,所以会出现图片不会完成铺满ImageView,会有黑边。所以要计算出实际图片显示的大小。

3. Activity

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <com.itc.floatparade.MapView
        android:id="@+id/map"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="12dp"
        android:background="@color/black"
        app:layout_constraintBottom_toTopOf="@+id/tv_add_sign"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/tv_add_sign"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="25dp"
        android:layout_marginBottom="12dp"
        android:text="添加坐标"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btn_get_sign"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="25dp"
        android:text="获取坐标"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/map" />

    <TextView
        android:id="@+id/tv_sign_list"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text=""
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btn_get_sign"
        app:layout_constraintStart_toEndOf="@+id/tv_add_sign"
        app:layout_constraintTop_toBottomOf="@+id/map" />
</androidx.constraintlayout.widget.ConstraintLayout>

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.map.setMapImage(R.mipmap.map)

        binding.tvAddSign.setOnClickListener {
            val list = mutableListOf<SignBean>()
            list.add(SignBean("美食城", "正常", 0.2f, 0.4f))
            list.add(SignBean("恐龙危机", "正常", 0.5f, 0.5f))
            list.add(SignBean("海盗船", "正常", 0.7f, 0.6f))
            list.add(SignBean("魔法城堡", "正常", 0.4f, 0.8f))
            binding.map.setSignData(list)
        }
        binding.btnGetSign.setOnClickListener {
            val list = binding.map.getMoveSignData()
            binding.tvSignList.text = list.toString()
        }
    }

}

完整代码:https://github.com/MattLjp/FloatParade

到此这篇关于Android 自定义图片地图坐标的文章就介绍到这了,更多相关Android 自定义地图内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!

[!--infotagslink--]

相关文章

  • Android子控件超出父控件的范围显示出来方法

    下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法,希望这篇文章能够帮助到各位朋友,有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02
  • C#创建自定义控件及添加自定义属性和事件使用实例详解

    这篇文章主要给大家介绍了关于C#创建自定义控件及添加自定义属性和事件使用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用C#具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-25
  • JS实现自定义简单网页软键盘效果代码

    本文实例讲述了JS实现自定义简单网页软键盘效果。分享给大家供大家参考,具体如下:这是一款自定义的简单点的网页软键盘,没有使用任何控件,仅是为了练习JavaScript编写水平,安全性方面没有过多考虑,有顾虑的可以不用,目的是学...2015-11-08
  • Android开发中findViewById()函数用法与简化

    findViewById方法在android开发中是获取页面控件的值了,有没有发现我们一个页面控件多了会反复研究写findViewById呢,下面我们一起来看它的简化方法。 Android中Fin...2016-09-20
  • JS中引用百度地图并将百度地图的logo和信息去掉

    采用CSS覆盖的方法就可以了,但是官方是不允许这么做的...2013-10-13
  • Android模拟器上模拟来电和短信配置

    如果我们的项目需要做来电及短信的功能,那么我们就得在Android模拟器开发这些功能,本来就来告诉我们如何在Android模拟器上模拟来电及来短信的功能。 在Android模拟...2016-09-20
  • 夜神android模拟器设置代理的方法

    夜神android模拟器如何设置代理呢?对于这个问题其实操作起来是非常的简单,下面小编来为各位详细介绍夜神android模拟器设置代理的方法,希望例子能够帮助到各位。 app...2016-09-20
  • android自定义动态设置Button样式【很常用】

    为了增强android应用的用户体验,我们可以在一些Button按钮上自定义动态的设置一些样式,比如交互时改变字体、颜色、背景图等。 今天来看一个通过重写Button来动态实...2016-09-20
  • Android WebView加载html5页面实例教程

    如果我们要在Android应用APP中加载html5页面,我们可以使用WebView,本文我们分享两个WebView加载html5页面实例应用。 实例一:WebView加载html5实现炫酷引导页面大多...2016-09-20
  • 深入理解Android中View和ViewGroup

    深入理解Android中View和ViewGroup从组成架构上看,似乎ViewGroup在View之上,View需要继承ViewGroup,但实际上不是这样的。View是基类,ViewGroup是它的子类。本教程我们深...2016-09-20
  • Android自定义WebView网络视频播放控件例子

    下面我们来看一篇关于Android自定义WebView网络视频播放控件开发例子,这个文章写得非常的不错下面给各位共享一下吧。 因为业务需要,以下代码均以Youtube网站在线视...2016-10-02
  • 自定义jquery模态窗口插件无法在顶层窗口显示问题

    自定义一个jquery模态窗口插件,将它集成到现有平台框架中时,它只能在mainFrame窗口中显示,无法在顶层窗口显示. 解决这个问题的办法: 通过以下代码就可能实现在顶层窗口弹窗 复制代码 代码如下: $(window.top.documen...2014-05-31
  • Android用MemoryFile文件类读写进行性能优化

    java开发的Android应用,性能一直是一个大问题,,或许是Java语言本身比较消耗内存。本文我们来谈谈Android 性能优化之MemoryFile文件读写。 Android匿名共享内存对外A...2016-09-20
  • 自定义feignClient的常见坑及解决

    这篇文章主要介绍了自定义feignClient的常见坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-10-20
  • Android设置TextView竖着显示实例

    TextView默认是横着显示了,今天我们一起来看看Android设置TextView竖着显示如何来实现吧,今天我们就一起来看看操作细节,具体的如下所示。 在开发Android程序的时候,...2016-10-02
  • android.os.BinderProxy cannot be cast to com解决办法

    本文章来给大家介绍关于android.os.BinderProxy cannot be cast to com解决办法,希望此文章对各位有帮助呀。 Android在绑定服务的时候出现java.lang.ClassCastExc...2016-09-20
  • pytorch 自定义卷积核进行卷积操作方式

    今天小编就为大家分享一篇pytorch 自定义卷积核进行卷积操作方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-06
  • 如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)

    以下是使用js代码实现百度地图计算两地距离,代码如下所示:<script src="js/jquery-1.9.0.js" type="text/javascript" language="javascript"></script><script language="javascript" type="text/javascript" src="js/...2015-10-30
  • PHP YII框架开发小技巧之模型(models)中rules自定义验证规则

    YII的models中的rules部分是一些表单的验证规则,对于表单验证十分有用,在相应的视图(views)里面添加了表单,在表单被提交之前程序都会自动先来这里面的规则里验证,只有通过对其有效的限制规则后才能被提交,可以很有效地保证...2015-11-24
  • Android 实现钉钉自动打卡功能

    这篇文章主要介绍了Android 实现钉钉自动打卡功能的步骤,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下...2021-03-15