根据设计图图片的比例和屏幕的比例动态标点

Posted 2023-03-09 黄毛火烧雪下

package com.lxt.gaia.order.widget

import android.annotation.SuppressLint
import android.content.Context
import android.util.AttributeSet
import android.view.LayoutInflater
import android.widget.*
import androidx.constraintlayout.widget.ConstraintLayout
import com.lxt.gaia.R
import com.lxt.gaia.core.extension.clickThrottle
import com.lxt.gaia.core.extension.dp2px
import com.lxt.gaia.core.extension.screenWidth
import com.lxt.gaia.core.extension.toastNormal

/**
 * Auto X3外观损伤View
 * Created by XL  2022/11/11
 * Copyright (c) 2022 LXT. All rights reserved
 */
class AppearanceDamageView(context: Context, attributeSet: AttributeSet) :
    LinearLayout(context, attributeSet) 

    /**
     * 点击View列表
     */
    private var clickItemList: ArrayList<ImageView>? = null


    private val rootLayout =
        LayoutInflater.from(context).inflate(R.layout.view_apperance_damage, this)

    init 
        initView()
    

    private fun initView() 
        initClickViewList()
    

    /**
     * 初始化生成点击View
     */
    @SuppressLint("ResourceType")
    private fun initClickViewList() 
        clickItemList = arrayListOf()
        val container = rootLayout.findViewById<ConstraintLayout>(R.id.view_root)
        val vehicleImageView = container.findViewById<ImageView>(R.id.img_appearance_damage)

        val params = vehicleImageView.layoutParams as ConstraintLayout.LayoutParams
        val withRatio = context.screenWidth.toDouble() / context.dp2px(375).toDouble()
        //UI设计图原始图片宽高比
        val imgOriRatio = context.dp2px(375).toDouble() / context.dp2px(282).toDouble()
        val imgHeight = (context.screenWidth.toDouble() / imgOriRatio).toInt()
        val heightRatio = imgHeight / context.dp2px(282).toDouble()
        params.width = context.screenWidth
        params.height = imgHeight
        vehicleImageView.layoutParams = params

        val clickViewSize = context.dp2px(19)
        //创建右前轮胎点击点
        val clickView0 = ImageView(context)
        clickView0.id = 0x00
        val params0 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params0.startToStart = vehicleImageView.id
        params0.topToTop = vehicleImageView.id
        params0.leftMargin = (context.dp2px(94) * withRatio).toInt()
        params0.topMargin = (context.dp2px(49) * heightRatio).toInt()
        container.addView(clickView0, params0)
        clickItemList?.add(clickView0)

        //创建右前轮上侧点击点
        val clickView1 = ImageView(context)
        clickView1.id = 0x01
        val params1 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params1.startToStart = vehicleImageView.id
        params1.topToTop = vehicleImageView.id
        params1.leftMargin = (context.dp2px(66) * withRatio).toInt()
        params1.topMargin = (context.dp2px(68) * heightRatio).toInt()
        container.addView(clickView1, params1)
        clickItemList?.add(clickView1)

        //创建右前门点击点
        val clickView2 = ImageView(context)
        clickView2.id = 0x02
        val params2 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params2.startToStart = vehicleImageView.id
        params2.topToTop = vehicleImageView.id
        params2.leftMargin = (context.dp2px(75) * withRatio).toInt()
        params2.topMargin = (context.dp2px(106) * heightRatio).toInt()
        container.addView(clickView2, params2)
        clickItemList?.add(clickView2)

        //创建右后门点击点
        val clickView3 = ImageView(context)
        clickView3.id = 0x03
        val params3 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params3.startToStart = vehicleImageView.id
        params3.topToTop = vehicleImageView.id
        params3.leftMargin = (context.dp2px(75) * withRatio).toInt()
        params3.topMargin = (context.dp2px(147) * heightRatio).toInt()
        container.addView(clickView3, params3)
        clickItemList?.add(clickView3)

        //创建右后轮胎点击点
        val clickView4 = ImageView(context)
        clickView4.id = 0x04
        val params4 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params4.startToStart = vehicleImageView.id
        params4.topToTop = vehicleImageView.id
        params4.leftMargin = (context.dp2px(94) * withRatio).toInt()
        params4.topMargin = (context.dp2px(179) * heightRatio).toInt()
        container.addView(clickView4, params4)
        clickItemList?.add(clickView4)

        //创建右后轮上方点击点
        val clickView5 = ImageView(context)
        clickView5.id = 0x05
        val params5 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params5.startToStart = vehicleImageView.id
        params5.topToTop = vehicleImageView.id
        params5.leftMargin = (context.dp2px(66) * withRatio).toInt()
        params5.topMargin = (context.dp2px(216) * heightRatio).toInt()
        container.addView(clickView5, params5)
        clickItemList?.add(clickView5)

        //创建车头车牌号点击点
        val clickView6 = ImageView(context)
        clickView6.id = 0x06
        val params6 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params6.startToStart = vehicleImageView.id
        params6.topToTop = vehicleImageView.id
        params6.leftMargin = (context.dp2px(178) * withRatio).toInt()
        params6.topMargin = (context.dp2px(18) * heightRatio).toInt()
        container.addView(clickView6, params6)
        clickItemList?.add(clickView6)

        //创建引擎盖点击点
        val clickView7 = ImageView(context)
        clickView7.id = 0x07
        val params7 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params7.startToStart = vehicleImageView.id
        params7.topToTop = vehicleImageView.id
        params7.leftMargin = (context.dp2px(178) * withRatio).toInt()
        params7.topMargin = (context.dp2px(49) * heightRatio).toInt()
        container.addView(clickView7, params7)
        clickItemList?.add(clickView7)

        //创建左后视镜点击点
        val clickView8 = ImageView(context)
        clickView8.id = 0x08
        val params8 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params8.startToStart = vehicleImageView.id
        params8.topToTop = vehicleImageView.id
        params8.leftMargin = (context.dp2px(129) * withRatio).toInt()
        params8.topMargin = (context.dp2px(101) * heightRatio).toInt()
        container.addView(clickView8, params8)
        clickItemList?.add(clickView8)

        //创建右后视镜点击点
        val clickView9 = ImageView(context)
        clickView9.id = 0x09
        val params9 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params9.startToStart = vehicleImageView.id
        params9.topToTop = vehicleImageView.id
        params9.leftMargin = (context.dp2px(227) * withRatio).toInt()
        params9.topMargin = (context.dp2px(101) * heightRatio).toInt()
        container.addView(clickView9, params9)
        clickItemList?.add(clickView9)

        //创建车顶点击点
        val clickView10 = ImageView(context)
        clickView10.id = 0x10
        val params10 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params10.startToStart = vehicleImageView.id
        params10.topToTop = vehicleImageView.id
        params10.leftMargin = (context.dp2px(178) * withRatio).toInt()
        params10.topMargin = (context.dp2px(133) * heightRatio).toInt()
        container.addView(clickView10, params10)
        clickItemList?.add(clickView10)

        //创建后备箱盖点击点
        val clickView11 = ImageView(context)
        clickView11.id = 0x11
        val params11 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params11.startToStart = vehicleImageView.id
        params11.topToTop = vehicleImageView.id
        params11.leftMargin = (context.dp2px(162) * withRatio).toInt()
        params11.topMargin = (context.dp2px(229) * heightRatio).toInt()
        container.addView(clickView11, params11)
        clickItemList?.add(clickView11)

        //创建车尾点击点
        val clickView12 = ImageView(context)
        clickView12.id = 0x12
        val params12 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params12.startToStart = vehicleImageView.id
        params12.topToTop = vehicleImageView.id
        params12.leftMargin = (context.dp2px(193) * withRatio).toInt()
        params12.topMargin = (context.dp2px(244) * heightRatio).toInt()
        container.addView(clickView12, params12)
        clickItemList?.add(clickView12)

        //创建左前轮胎点击点
        val clickView13 = ImageView(context)
        clickView13.id = 0x13
        val params13 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params13.startToStart = vehicleImageView.id
        params13.topToTop = vehicleImageView.id
        params13.leftMargin = (context.dp2px(264) * withRatio).toInt()
        params13.topMargin = (context.dp2px(49) * heightRatio).toInt()
        container.addView(clickView13, params13)
        clickItemList?.add(clickView13)

        //创建左前轮上侧点击点
        val clickView14 = ImageView(context)
        clickView14.id = 0x14
        val params14 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params14.startToStart = vehicleImageView.id
        params14.topToTop = vehicleImageView.id
        params14.leftMargin = (context.dp2px(292) * withRatio).toInt()
        params14.topMargin = (context.dp2px(68) * heightRatio).toInt()
        container.addView(clickView14, params14)
        clickItemList?.add(clickView14)

        //创建左前门点击点
        val clickView15 = ImageView(context)
        clickView15.id = 0x15
        val params15 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params15.startToStart = vehicleImageView.id
        params15.topToTop = vehicleImageView.id
        params15.leftMargin = (context.dp2px(282) * withRatio).toInt()
        params15.topMargin = (context.dp2px(106) * heightRatio).toInt()
        container.addView(clickView15, params15)
        clickItemList?.add(clickView15)

        //创建左后门点击点
        val clickView16 = ImageView(context)
        clickView16.id = 0x16
        val params16 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params16.startToStart = vehicleImageView.id
        params16.topToTop = vehicleImageView.id
        params16.leftMargin = (context.dp2px(282) * withRatio).toInt()
        params16.topMargin = (context.dp2px(147) * heightRatio).toInt()
        container.addView(clickView16, params16)
        clickItemList?.add(clickView16)

        //创建左后轮胎点击点
        val clickView17 = ImageView(context)
        clickView17.id = 0x17
        val params17 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params17.startToStart = vehicleImageView.id
        params17.topToTop = vehicleImageView.id
        params17.leftMargin = (context.dp2px(264) * withRatio).toInt()
        params17.topMargin = (context.dp2px(179) * heightRatio).toInt()
        container.addView(clickView17, params17)
        clickItemList?.add(clickView17)

        //创建左后轮胎上方点击点
        val clickView18 = ImageView(context)
        clickView18.id = 0x18
        val params18 = ConstraintLayout.LayoutParams(clickViewSize, clickViewSize)
        params18.startToStart = vehicleImageView.id
        params18.topToTop = vehicleImageView.id
        params18.leftMargin = (context.dp2px(292) * withRatio).toInt()
        params18.topMargin = (context.dp2px(216) * heightRatio).toInt()
        container.addView(clickView18, params18)
        clickItemList?.add(clickView18)
        //统一设置点击点图标
        clickItemList?.forEach 
            it.setImageResource(R.mipmap.icon_vehicle_normal)
            it.clickThrottle 
                //点击检测点图标
                toastNormal("点击了检测点id = $it.id")
            
        
    

<?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:id="@+id/view_root"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="32dp">

    <TextView
        android:id="@+id/tv_damage_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="外观损伤"
        android:textColor="@color/font_g2"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/img_appearance_damage"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_marginTop="16dp"
        android:scaleType="fitXY"
        android:src="@mipmap/icon_appearance_damage"
        app:layout_constraintTop_toBottomOf="@id/tv_damage_title" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:text="请点击对应位置标记外观损伤情况"
        android:textColor="#73000000"
        android:textSize="14sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/img_appearance_damage" />
</androidx.constraintlayout.widget.ConstraintLayout>