iOS 家族关系图 👨‍👩‍👧‍👦

导读： 本文主要讲解了绘制家族关系图谱中的数据处理、成员位置的计算(核心)、成员关系的连线。阅读完成你会再次感慨递归的强大

先看看效果

最终完成的效果图如下：

家族关系图谱

对于需求的支持

• 第一代决定了有几棵树
• 父代会在子代位置的中间显示
• 支持n代m成员
• 不支持隔代连线 (如爷爷 -> 孙子)

开始，数据处理

服务端的数据返回是介个样子滴

class Person {
    var id: String
    var name: String
    var gender: String
    var age: Int
    var coupleID: String        /// 配偶ID
    var childrenIDs: [String]   /// 孩子们的ID

    /// 自己添加的，用于关系绑定
    var coupleModel: Person?      /// 绑定配偶
    var childrenModels: [Person]  /// 绑定孩子
    var parent: Person?           /// 绑定父母
}

let generations = [ [Person, Person, ...], /// 第1代成员数据
                    [Person, Person, ...], /// 第2代成员数据
                    [Person, Person, ...], /// 第3代成员数据
                    ... ]                  /// 第n代成员数据

这种结构，直接画图显然是hin难的，然后就开始了第一步，处理数据。

其实最开始是如何确定核心功能，确定完成之后，发现了核心功能对数据的要求，继而再回来处理数据，本篇文章以代码流程顺序来写

我一般处理问题： 是不是要做 --> 怎么做 --> 需要(依赖)什么 --> 开始做
开始做之前是需求/方案/技术讨论阶段，这个时候多花点时间，开始做了会省很多时间

/// 创建一个第0代 (先把祖宗找出来)
let ancestor = Person()
var idAdded = Set<String>() // 记录已关联的人的id
/// 给祖宗添加第1代的孩子
for (idx, p) in generations[0].enumerated() {
    guard !idAdded.contains(p.id) else { continue }
    ancestor.childrenModels.append(p)
    idAdded.insert(p.id)
    p.parent = ancestor
    for couple in generations[0][idx...] {
        if p.coupleID == couple.id {
            p.coupleModel = couple
            idAdded.insert(couple.id)
            break
        }
    }
}
///  给第一代孩子关联第二代孩子
///  给第n代孩子关联第n+1代孩子

处理数据的核心就是做关联， 我是整体放在一个方法里去做了，这里是为了简单的说明意思，核心就是通过那个for循环来关联数据，可能效率有点低，欢迎各大神指教

处理完成后的数据是介个样子滴
通过小明他祖宗这一个对象，即可获取所有的家庭成员（我们获得了一棵树）
图里也应该有配偶关系的，原谅我画工不太好，没画出来，可以参考上面的最终结果图

小明他家成员关系图谱

核心，位置计算

我们再来看一看需求： 要求每个父代都在其孩子代的正上方中心位置

那么问题来了，如果从小明他祖宗往下画，就会出现很多问题，比如小明他大姑有2个孩子，小明他二大爷有3个孩子，画完这两位后，再画大明...五明肯定会出现位置上的冲突

所以如果想要达到最终的效果，我们就必须从下往上画。那么如何画呢？

代数是不确定的，每个成员是否有配偶是不确定的，孩子的数量也是不确定的，都是动态的，for循环是无法实现的。

此时，我们就需要用一个不管藏得多深，只要你跟外面有联系就能到找到你的方法 - ==递归调用==

通过递归，我们就可以通过刚才的小明家谱图从小明的祖宗往下找到所有的人 (也就是因为确定了遍历方法，所以才出现了第一步的数据处理)

代码来了

let btn_w: CGFloat = 50
let btn_h: CGFloat = 50
let margin: CGFloat = 20
var draw_maxX: CGFloat = 0 // 记录当前成员的坐标x值max
var draw_minX: CGFloat = 0 // 记录当前成员的坐标x值min

// MARK: === 家庭关系递归画图
func p_drawMember(superM: Person, pos_y: CGFloat) -> CGFloat {
    var generationCenter: CGFloat = 0 
    var ori_x: CGFloat = draw_maxX  /// 初始位置
    var ori_init = [ori_x]          /// 兄弟姐妹的位置
    /// 从第0代(祖宗)开始遍历
    for (idx, subM) in superM.childrenModels.enumerated() {
        var subGenerationCenter: CGFloat = 0
        if subM.childrenModels.count > 0 {
            subGenerationCenter = self.p_drawMember(superM: subM, pos_y: pos_y + (btn_h + margin))
        }
        /// 第一代 非第一个成员时
        if pos_y == 80, idx != 0 {
            ori_x = draw_maxX
        }
        var pos_x: CGFloat = 0
        /// 父母只有一个孩子时
        if superM.childrenModels.count == 1,
            let _ = superM.coupleModel {
            ori_x += (btn_w + margin) * 0.5
        }
        /// 最小的那一代
        if subGenerationCenter != 0 {
            let singleX = subGenerationCenter - 0.5 * btn_w
            let doubleX = subGenerationCenter - btn_w - 0.5 * margin
            let isCouple = subM.coupleModel != nil
            pos_x = isCouple ? doubleX : singleX
            ori_x = pos_x
            draw_minX = min(draw_minX, ori_x)
            ori_init.append(ori_x)
            ori_x += (btn_w + margin)
        } else {
            pos_x = ori_x
            ori_init.append(ori_x)
            ori_x += (btn_w + margin)
        }
        let btn = self.p_createGeneBtnWith(model: subM)
        btn.ly_origin = CGPoint.init(x: pos_x, y: pos_y)
        /// 画线 ->  连线到父母
        if let _ = subM.parent {
            let fromPoint = CGPoint.init(x: btn.centerX, y: btn.top)
            self.p_drawLineToParent(model: subM, from: fromPoint)
        }
        /// 画线 ->  single到下一代
        if subM.childrenModels.count > 0,
            subM.coupleID == ""  {
            let fromPoint = CGPoint.init(x: btn.centerX, y: btn.bottom)
            self.p_drawSingleLine(model: subM, from: fromPoint)
        }
        /// 画线 ->  连线夫妻
        if let couple_model = subM.coupleModel {
            let couple_x = pos_x + (btn_w + margin)
            subGenerationCenter = 0
            let coupleBtn = self.p_createGeneBtnWith(model: couple_model)
            coupleBtn.ly_origin = CGPoint.init(x: couple_x, y: pos_y)
            ori_x = couple_x + (btn_w + margin)
            let fromPoint = CGPoint.init(x: coupleBtn.left, y: coupleBtn.top + btn_w * 0.5)
            let toPoint = CGPoint.init(x: btn.right, y: btn.top + btn_w * 0.5)
            self.p_drawCoupleLine(models: [subM,couple_model], from: fromPoint, to: toPoint)
        }
        draw_maxX = max(ori_x,draw_maxX)
    }
    /// 计算中心点给上一代
    generationCenter = ori_init.first!
    if ori_init.count == 2 {
        generationCenter = ori_init[1] + btn_w * 0.5
    }
    if ori_init.count > 2 {
        generationCenter = ori_init[1] + (ori_init.last! - ori_init[1]) * 0.5 + btn_w * 0.5
    }
    return generationCenter
}

连线和事件

这里就不贴代码了，上面的代码里可以看到，连线方法用到的位置，在递归中计算出来了。

另外，每个人像都是用的自定义Button，Button会绑定这个人的数据，便于点击触发时的相应。

最后

感谢阅读，欢迎各种问题，欢迎各位大神来指教。