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

本篇内容主要讲解“Android自定义图片地图坐标功能的实现方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Android自定义图片地图坐标功能的实现方法”吧!

一、前言

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

二、思路

改功能主要分为三个视图，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)    }        fun setData(signBean: SignBean) {        signNameTv.text = signBean.name        signStateTv.text = signBean.state    }        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)        fun setMapImage(@DrawableRes resId: Int) {        removeAllViews()        mapImage.setImageResource(resId)        addView(mapImage)    }        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()))        }    }        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    }        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    }        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自定义图片地图坐标功能的实现方法”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！