在Android Studio中如何将网络图应用到自定义视图？

一、先明确网络图核心要素 #

• 节点：代表单个用户，需存储用户标识、显示内容（昵称/头像）、最终绘制坐标(x,y)、绘制半径等信息
• 边：代表用户间的关系，存储两个关联节点的引用或ID，用于绘制连线

二、选择适合的布局算法（坐标计算核心） #

根据你的社交关系场景，推荐优先使用以下两种布局：

• 力导向布局：模拟物理世界的引力/斥力，关系紧密的节点会靠近，松散关系的节点会远离，适合展示社交关系的亲疏
• 环形布局：所有好友节点围绕当前用户呈环形排列，适合层级简单的好友关系展示

下面以最常用的力导向布局为例，讲解坐标计算逻辑：

1. 初始化当前用户节点在视图中心，其他节点随机分布在中心周围
2. 多轮迭代计算节点受力：
   • 斥力：所有节点间互相排斥，距离越近斥力越强
   • 引力：有连接关系的节点间互相吸引
   • 边界约束：防止节点超出自定义视图范围
3. 每次迭代更新节点坐标，直到节点移动距离小于设定阈值（位置趋于稳定）

三、在Fragment中完成坐标计算 #

1. 定义数据模型 #

// 用户节点数据类
data class UserNode(
    val userId: String,
    val displayName: String,
    var x: Float = 0f,
    var y: Float = 0f,
    val radius: Float = 40f,
    var forceX: Float = 0f, // 存储X轴受力
    var forceY: Float = 0f  // 存储Y轴受力
)

// 关系边数据类
data class RelationshipEdge(
    val fromNode: UserNode,
    val toNode: UserNode
)

2. Fragment中处理数据与计算 #

class NetworkGraphFragment : Fragment() {
    private lateinit var customGraphView: CustomGraphView
    private val userNodes = mutableListOf<UserNode>()
    private val relationshipEdges = mutableListOf<RelationshipEdge>()

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        customGraphView = view.findViewById(R.id.custom_graph_view)
        
        // 1. 加载用户关系数据（替换为你的真实数据逻辑）
        val currentUser = UserNode("me", "我自己")
        val friend1 = UserNode("friend1", "好友A")
        val friend2 = UserNode("friend2", "好友B")
        val friend3 = UserNode("friend3", "好友C")
        userNodes.addAll(listOf(currentUser, friend1, friend2, friend3))
        relationshipEdges.addAll(
            listOf(
                RelationshipEdge(currentUser, friend1),
                RelationshipEdge(currentUser, friend2),
                RelationshipEdge(friend1, friend3)
            )
        )

        // 2. 计算节点坐标（后台线程执行避免阻塞UI）
        lifecycleScope.launch(Dispatchers.Default) {
            calculateForceDirectedLayout()
            // 主线程更新视图
            withContext(Dispatchers.Main) {
                customGraphView.setGraphData(userNodes, relationshipEdges)
            }
        }
    }

    private fun calculateForceDirectedLayout() {
        val viewWidth = customGraphView.width.toFloat()
        val viewHeight = customGraphView.height.toFloat()
        val centerX = viewWidth / 2
        val centerY = viewHeight / 2
        val iterations = 50 // 迭代次数，次数越多位置越稳定
        val repulsionFactor = 10000f // 斥力系数
        val attractionFactor = 500f // 引力系数
        val damping = 0.8f // 阻尼系数，防止节点无限运动

        // 初始化中心节点位置
        userNodes.first().apply {
            x = centerX
            y = centerY
        }
        // 初始化其他节点在中心周围随机分布
        userNodes.drop(1).forEach { node ->
            val angle = Random.nextFloat() * 2 * Math.PI.toFloat()
            val distance = Random.nextFloat() * 150 + 100
            node.x = centerX + distance * cos(angle)
            node.y = centerY + distance * sin(angle)
        }

        // 多轮迭代计算受力与位置
        repeat(iterations) {
            // 重置所有节点受力
            userNodes.forEach { node ->
                node.forceX = 0f
                node.forceY = 0f
            }

            // 计算节点间斥力
            for (i in userNodes.indices) {
                val nodeA = userNodes[i]
                for (j in i + 1 until userNodes.size) {
                    val nodeB = userNodes[j]
                    val dx = nodeB.x - nodeA.x
                    val dy = nodeB.y - nodeA.y
                    val distance = sqrt(dx * dx + dy * dy)
                    if (distance < 10f) continue // 避免除以0
                    val repulsion = repulsionFactor / (distance * distance)
                    // 对两个节点施加反向斥力
                    nodeA.forceX -= repulsion * dx / distance
                    nodeA.forceY -= repulsion * dy / distance
                    nodeB.forceX += repulsion * dx / distance
                    nodeB.forceY += repulsion * dy / distance
                }
            }

            // 计算关联节点间引力
            relationshipEdges.forEach { edge ->
                val nodeA = edge.fromNode
                val nodeB = edge.toNode
                val dx = nodeB.x - nodeA.x
                val dy = nodeB.y - nodeA.y
                val distance = sqrt(dx * dx + dy * dy)
                val attraction = attractionFactor * (distance - 100f) // 100为期望的节点间距
                nodeA.forceX += attraction * dx / distance
                nodeA.forceY += attraction * dy / distance
                nodeB.forceX -= attraction * dx / distance
                nodeB.forceY -= attraction * dy / distance
            }

            // 更新节点位置并添加边界约束
            userNodes.forEach { node ->
                node.x += node.forceX * damping
                node.y += node.forceY * damping
                // 限制节点在视图范围内
                node.x = node.x.coerceIn(node.radius, viewWidth - node.radius)
                node.y = node.y.coerceIn(node.radius, viewHeight - node.radius)
            }
        }
    }
}

四、自定义视图的绘制逻辑 #

自定义视图接收计算好的节点和边数据，负责最终绘制：

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

    private var userNodes = emptyList<UserNode>()
    private var relationshipEdges = emptyList<RelationshipEdge>()
    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)

    fun setGraphData(nodes: List<UserNode>, edges: List<RelationshipEdge>) {
        this.userNodes = nodes
        this.relationshipEdges = edges
        invalidate() // 触发重绘
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // 先绘制边（层级在节点下方）
        paint.color = Color.GRAY
        paint.strokeWidth = 2f
        relationshipEdges.forEach { edge ->
            canvas.drawLine(edge.fromNode.x, edge.fromNode.y, edge.toNode.x, edge.toNode.y, paint)
        }

        // 绘制节点
        userNodes.forEach { node ->
            // 绘制节点背景
            paint.color = Color.BLUE
            canvas.drawCircle(node.x, node.y, node.radius, paint)
            // 绘制节点文字
            paint.color = Color.WHITE
            paint.textSize = 14f
            val textBounds = Rect()
            paint.getTextBounds(node.displayName, 0, node.displayName.length, textBounds)
            canvas.drawText(
                node.displayName,
                node.x - textBounds.width() / 2,
                node.y + textBounds.height() / 2,
                paint
            )
        }
    }
}

五、优化建议 #

• 视图尺寸变化时（如屏幕旋转），重新计算节点坐标并更新视图
• 添加节点点击、拖拽交互，提升用户体验
• 节点数量较多时，可增加节点聚类、缩放平移功能

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