導讀： 本文主要講解了繪制家族關系圖譜中的數據處理、成員位置的計算(核心)、成員關系的連線。閱讀完成你會再次感慨遞歸的強大

先看看效果

最終完成的效果圖如下：

家族關系圖譜

對于需求的支持

• 第一代決定了有幾棵樹
• 父代會在子代位置的中間顯示
• 支持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難的，然后就開始了第一步，處理數據。

其實最開始是如何確定核心功能，確定完成之后，發(fā)現了核心功能對數據的要求，繼而再回來處理數據，本篇文章以代碼流程順序來寫

我一般處理問題： 是不是要做 --> 怎么做 --> 需要(依賴)什么 --> 開始做
開始做之前是需求/方案/技術討論階段，這個時候多花點時間，開始做了會省很多時間

/// 創(chuàng)建一個第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循環(huán)來關聯數據，可能效率有點低，歡迎各大神指教

處理完成后的數據是介個樣子滴
通過小明他祖宗這一個對象，即可獲取所有的家庭成員（我們獲得了一棵樹）
圖里也應該有配偶關系的，原諒我畫工不太好，沒畫出來，可以參考上面的最終結果圖

小明他家成員關系圖譜

核心，位置計算

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

那么問題來了，如果從小明他祖宗往下畫，就會出現很多問題，比如小明他大姑有2個孩子，小明他二大爺有3個孩子，畫完這兩位后，再畫大明...五明肯定會出現位置上的沖突

所以如果想要達到最終的效果，我們就必須從下往上畫。那么如何畫呢？

代數是不確定的，每個成員是否有配偶是不確定的，孩子的數量也是不確定的，都是動態(tài)的，for循環(huán)是無法實現的。

此時，我們就需要用一個不管藏得多深，只要你跟外面有聯系就能到找到你的方法 - 遞歸調用

通過遞歸，我們就可以通過剛才的小明家譜圖從小明的祖宗往下找到所有的人 (也就是因為確定了遍歷方法，所以才出現了第一步的數據處理)

代碼來了

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會綁定這個人的數據，便于點擊觸發(fā)時的響應。

最后

感謝閱讀，歡迎各種問題，歡迎各位大神來指教。