Android倒车影像模拟APP：停车网格线上下调整功能开发求助

嘿，作为Android开发新手能搞定左右调整已经超棒啦！针对你要实现的网格线上下移动需求，我给你整理了几个新手友好的方案，一步步来很容易上手～

一、核心思路：固定X坐标，动态更新Y坐标 #

你已经搞定了左右移动的逻辑，那X坐标的控制应该没问题了。现在只需要给每条网格线的上下边界定义独立的Y坐标变量，通过触摸或按钮操作修改这些变量，最后通知View重新绘制就行。

二、具体实现步骤 #

1. 用自定义View管理网格线与绘制 #

自定义View是绘制这类自定义图形的最佳选择，能灵活控制每一条线的坐标：

class ParkingGridView(context: Context, attrs: AttributeSet?) : View(context, attrs) {
    // 固定X坐标（这里按屏幕宽度的20%和80%设置，你可以根据需求调整）
    private val leftX = resources.displayMetrics.widthPixels * 0.2f
    private val rightX = resources.displayMetrics.widthPixels * 0.8f

    // 各网格线的初始Y坐标（按屏幕高度比例设置，可根据需求修改）
    private var topGreenY = resources.displayMetrics.heightPixels * 0.3f
    private var bottomGreenY = resources.displayMetrics.heightPixels * 0.4f
    private var topYellowY = resources.displayMetrics.heightPixels * 0.5f
    private var bottomYellowY = resources.displayMetrics.heightPixels * 0.6f
    private var topRedY = resources.displayMetrics.heightPixels * 0.7f
    private var bottomRedY = resources.displayMetrics.heightPixels * 0.8f

    // 初始化画笔（放在构造方法里，避免onDraw重复创建影响性能）
    private val greenPaint = Paint().apply {
        color = Color.GREEN
        strokeWidth = 5f
        style = Paint.Style.STROKE
    }
    private val yellowPaint = Paint().apply {
        color = Color.YELLOW
        strokeWidth = 5f
        style = Paint.Style.STROKE
    }
    private val redPaint = Paint().apply {
        color = Color.RED
        strokeWidth = 5f
        style = Paint.Style.STROKE
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas ?: return

        // 绘制绿色网格框
        canvas.drawLine(leftX, topGreenY, rightX, topGreenY, greenPaint)
        canvas.drawLine(leftX, bottomGreenY, rightX, bottomGreenY, greenPaint)
        canvas.drawLine(leftX, topGreenY, leftX, bottomGreenY, greenPaint)
        canvas.drawLine(rightX, topGreenY, rightX, bottomGreenY, greenPaint)

        // 绘制黄色网格框
        canvas.drawLine(leftX, topYellowY, rightX, topYellowY, yellowPaint)
        canvas.drawLine(leftX, bottomYellowY, rightX, bottomYellowY, yellowPaint)
        canvas.drawLine(leftX, topYellowY, leftX, bottomYellowY, yellowPaint)
        canvas.drawLine(rightX, topYellowY, rightX, bottomYellowY, yellowPaint)

        // 绘制红色网格框
        canvas.drawLine(leftX, topRedY, rightX, topRedY, redPaint)
        canvas.drawLine(leftX, bottomRedY, rightX, bottomRedY, redPaint)
        canvas.drawLine(leftX, topRedY, leftX, bottomRedY, redPaint)
        canvas.drawLine(rightX, topRedY, rightX, bottomRedY, redPaint)
    }

    // 提供修改Y坐标的方法，供按钮或触摸事件调用
    fun adjustGreenTop(delta: Float) {
        topGreenY += delta
        // 边界限制：防止线超出屏幕或与下边界重叠
        topGreenY = topGreenY.coerceAtLeast(0f).coerceAtMost(bottomGreenY - 10f)
        invalidate() // 通知View重绘，更新界面
    }

    fun adjustGreenBottom(delta: Float) {
        bottomGreenY += delta
        bottomGreenY = bottomGreenY.coerceAtLeast(topGreenY + 10f).coerceAtMost(topYellowY - 10f)
        invalidate()
    }

    // 黄色、红色网格的调整方法逻辑完全一致，照着上面复制修改即可
    fun adjustYellowTop(delta: Float) {
        topYellowY += delta
        topYellowY = topYellowY.coerceAtLeast(bottomGreenY + 10f).coerceAtMost(bottomYellowY - 10f)
        invalidate()
    }

    // ... 其他如yellowBottom、redTop、redBottom的调整方法
}

2. 按钮点击控制（新手首选，操作直观） #

如果觉得触摸事件有点复杂，可以先从按钮点击入手，逻辑更简单：
在布局文件中添加控制按钮和自定义View：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp">

    <Button
        android:id="@+id/btn_green_top_up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="绿线上移"/>

    <Button
        android:id="@+id/btn_green_top_down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="绿线下移"
        android:layout_marginStart="8dp"/>

    <!-- 其他颜色网格的调整按钮，比如黄线、红线的上下移按钮 -->
</LinearLayout>

<com.yourpackage.ParkingGridView
    android:id="@+id/parking_grid_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

然后在Activity中绑定按钮点击事件：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val gridView = findViewById<ParkingGridView>(R.id.parking_grid_view)
        val btnGreenTopUp = findViewById<Button>(R.id.btn_green_top_up)
        val btnGreenTopDown = findViewById<Button>(R.id.btn_green_top_down)

        btnGreenTopUp.setOnClickListener {
            gridView.adjustGreenTop(-10f) // 每次上移10像素
        }

        btnGreenTopDown.setOnClickListener {
            gridView.adjustGreenTop(10f) // 每次下移10像素
        }

        // 其他按钮的点击事件同理，调用对应的adjust方法即可
    }
}

3. 触摸拖动控制（贴近视频效果） #

如果要实现触摸拖动调整网格线，在自定义View中重写onTouchEvent方法，判断用户触摸的线并跟随手指移动：

// 先定义枚举类标记选中的线类型
private enum class LineType {
    GREEN_TOP, GREEN_BOTTOM, YELLOW_TOP, YELLOW_BOTTOM, RED_TOP, RED_BOTTOM
}
private var selectedLine: LineType? = null

override fun onTouchEvent(event: MotionEvent?): Boolean {
    event ?: return super.onTouchEvent(event)

    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            // 按下时判断触摸点是否靠近某条线（误差范围20像素）
            selectedLine = when {
                abs(event.y - topGreenY) < 20 -> LineType.GREEN_TOP
                abs(event.y - bottomGreenY) < 20 -> LineType.GREEN_BOTTOM
                abs(event.y - topYellowY) < 20 -> LineType.YELLOW_TOP
                // 其他线的判断逻辑
                else -> null
            }
        }
        MotionEvent.ACTION_MOVE -> {
            selectedLine?.let { line ->
                when (line) {
                    LineType.GREEN_TOP -> {
                        topGreenY = event.y
                        topGreenY = topGreenY.coerceAtLeast(0f).coerceAtMost(bottomGreenY - 10f)
                    }
                    LineType.GREEN_BOTTOM -> {
                        bottomGreenY = event.y
                        bottomGreenY = bottomGreenY.coerceAtLeast(topGreenY + 10f).coerceAtMost(topYellowY - 10f)
                    }
                    // 其他线的拖动逻辑
                }
                invalidate() // 实时重绘更新位置
            }
        }
        MotionEvent.ACTION_UP -> {
            selectedLine = null // 松开手指后取消选中
        }
    }
    return true
}

三、新手必看注意事项 #

• 边界限制不能少：一定要给Y坐标设置上下边界，不然网格线会重叠或者跑到屏幕外面，影响体验。
• 必须调用invalidate()：每次修改坐标后都要调用这个方法，通知View重新绘制，不然界面不会更新。
• 画笔初始化要高效：不要在onDraw方法里初始化Paint，会频繁创建对象影响性能，放在构造方法里初始化一次就够了。

先从按钮版本入手，熟悉逻辑后再尝试触摸拖动，难度会小很多～

内容的提问来源于stack exchange，提问作者Sam