如何绘制可动态更新的家族树：成员增删时自动重绘

核心思路：数据驱动+视图自动更新 #

别再直接操作Bitmap硬绘，改用数据绑定+自定义视图/成熟树形控件的方式，让视图跟着数据库数据变化自动刷新。

步骤1：数据库监听与数据同步 #

• 给本地数据库加数据变更监听（比如Room的LiveData、SQLite的ContentObserver，或者数据库操作回调），成员添加/删除时自动触发数据同步。
• 把数据库里的成员数据转换成树结构模型（每个节点包含id、父节点id、姓名、关系等字段），确保数据层级清晰，方便视图遍历处理。

步骤2：选择灵活的绘制方式 #

放弃Bitmap，换这两种更适配动态场景的方案：

• 自定义ViewGroup：
  1. 重写onMeasure，根据树的层级（比如父节点在上，子节点左右/下方分布）计算每个节点的位置和大小，分配布局空间。
  2. 重写onDraw，用Canvas绘制节点（矩形/圆形+文本）和节点间的连接线。
  3. 数据变化时调用invalidate()，ViewGroup会自动重新计算布局并绘制。
• 现成树形视图库：
  直接用基于RecyclerView实现的树形控件，把家族树数据转换成库要求的格式，设置适配器后，数据变更时调用notifyDataSetChanged()就能自动刷新视图。

步骤3：自动重绘的关键逻辑 #

• 数据库数据更新后，先同步内存中的树结构模型，再调用视图的刷新方法（自定义View用invalidate()，库控件用适配器刷新）。
• 复杂的树布局计算放到子线程处理，避免阻塞主线程，计算完成后通知主线程更新视图。

示例代码片段（自定义View核心逻辑） #

// 家族节点数据类
data class FamilyNode(val id: String, val parentId: String?, val name: String, val relation: String)

// 自定义家族树View
class FamilyTreeView(context: Context, attrs: AttributeSet?) : View(context, attrs) {
    private var familyTree: List<FamilyNode> = emptyList()
    private val paint = Paint().apply {
        isAntiAlias = true
        textSize = 40f
    }

    fun setTreeData(data: List<FamilyNode>) {
        familyTree = data
        invalidate() // 数据更新触发重绘
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // 示例：绘制根节点，实际需补充子节点遍历与连接线逻辑
        familyTree.firstOrNull { it.parentId == null }?.let { root ->
            canvas.drawRect(100f, 100f, 300f, 200f, paint.apply { color = Color.LTGRAY })
            canvas.drawText(root.name, 150f, 160f, paint.apply { color = Color.BLACK })
        }
    }
}

踩坑修复 #

• 之前Bitmap绘制失败的原因：Bitmap是静态资源，每次数据变更都要重新创建、绘制，操作繁琐还容易内存泄漏；而自定义View基于Canvas动态绘制，天生适配动态更新场景。
• 节点布局混乱：用层级遍历计算坐标，比如根节点居中，子节点均匀分布在父节点下方，避免重叠。

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