Android Studio中如何用Java在Indicator ImageButton间绘制线条？

核心思路 #

在按钮所在的布局上叠加一个自定义View专门负责绘制线条——既不会干扰按钮的点击交互，又能灵活根据用户选择控制线条的绘制逻辑。

具体实现步骤 #

1. 调整布局结构 #

在主Activity的布局文件（比如activity_main.xml）中，用FrameLayout或RelativeLayout做根布局，把自定义绘图View放在按钮层级的下方，保证按钮可正常点击：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 自定义绘图View，置于底层 -->
    <com.yourpackagename.LineDrawingView
        android:id="@+id/lineDrawingView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <!-- 你的按钮集合，按需求摆放 -->
    <Button
        android:id="@+id/btnStation1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="站点1"
        android:layout_margin="30dp"/>

    <Button
        android:id="@+id/btnStation2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="站点2"
        android:layout_marginLeft="200dp"
        android:layout_marginTop="150dp"/>

    <!-- 其他按钮... -->
</FrameLayout>

2. 编写自定义绘图View #

新建LineDrawingView类，继承View，封装线条绘制的逻辑：

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Path
import android.util.AttributeSet
import android.view.View

class LineDrawingView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    // 画笔配置
    private val linePaint = Paint().apply {
        color = Color.parseColor("#FF4081")
        strokeWidth = 6f
        style = Paint.Style.STROKE
        isAntiAlias = true
    }
    private val drawPath = Path()
    // 存储线条的起点、终点坐标对
    private val linePairs = mutableListOf<Pair<Float, Float>>()

    // 添加一条需要绘制的线条
    fun addConnectLine(startX: Float, startY: Float, endX: Float, endY: Float) {
        linePairs.add(Pair(startX, startY))
        linePairs.add(Pair(endX, endY))
        invalidate() // 触发View重绘
    }

    // 清空所有线条
    fun clearAllLines() {
        linePairs.clear()
        invalidate()
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas ?: return
        drawPath.reset()
        // 遍历坐标对，绘制每条线条
        for (i in linePairs.indices step 2) {
            if (i + 1 < linePairs.size) {
                val startPoint = linePairs[i]
                val endPoint = linePairs[i + 1]
                drawPath.moveTo(startPoint.first, startPoint.second)
                drawPath.lineTo(endPoint.first, endPoint.second)
                canvas.drawPath(drawPath, linePaint)
            }
        }
    }
}

3. 在主Activity中处理按钮交互 #

监听按钮点击事件，获取按钮的屏幕坐标，调用自定义View的方法绘制线条：

import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    private lateinit var lineDrawingView: LineDrawingView
    private var lastSelectedBtn: View? = null // 记录上一个点击的按钮

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

        lineDrawingView = findViewById(R.id.lineDrawingView)

        // 给所有按钮绑定点击事件
        listOf(
            findViewById<View>(R.id.btnStation1),
            findViewById<View>(R.id.btnStation2)
            // 添加其他按钮...
        ).forEach { btn ->
            btn.setOnClickListener { handleBtnClick(it) }
        }
    }

    private fun handleBtnClick(currentBtn: View) {
        lastSelectedBtn?.let { prevBtn ->
            // 获取上一个按钮的屏幕坐标，计算中心点
            val prevLoc = IntArray(2)
            prevBtn.getLocationOnScreen(prevLoc)
            val prevCenterX = prevLoc[0] + prevBtn.width / 2f
            val prevCenterY = prevLoc[1] + prevBtn.height / 2f

            // 获取当前按钮的屏幕坐标，计算中心点
            val currentLoc = IntArray(2)
            currentBtn.getLocationOnScreen(currentLoc)
            val currentCenterX = currentLoc[0] + currentBtn.width / 2f
            val currentCenterY = currentLoc[1] + currentBtn.height / 2f

            // 绘制两个按钮中心之间的线条
            lineDrawingView.addConnectLine(prevCenterX, prevCenterY, currentCenterX, currentCenterY)
        }
        // 切换选中状态：如果重复点击同一个按钮，取消选中；否则记录当前按钮
        lastSelectedBtn = if (lastSelectedBtn == currentBtn) null else currentBtn
    }
}

关键细节提示 #

• getLocationOnScreen用于获取按钮在屏幕上的绝对坐标，以中心作为线条端点更贴合视觉需求。
• 每次添加线条后必须调用invalidate()，否则View不会触发重绘，线条无法显示。
• 如果需要支持多段连线、删除指定线条等功能，只需扩展LineDrawingView中linePairs集合的操作逻辑即可。

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