SwiftUI之View Tree 实战2(绘制二叉树)

本篇为大家带来SwiftUI中Preference的第二个实战教程,最后的实效效果如下图:

Kapture 2020-07-15 at 10.09.37.gif

其实,用SwiftUI实现上图的二叉树还算简单,节点与节点之间的连线,需要用到Preference的知识。

定义数据结构

二叉树上的节点由两部分组成:

  • 子节点
struct Tree<A>: Identifiable {
    let id = UUID().uuidString
    var value: A
    var children: [Tree<A>] = []

    init(_ value: A, children: [Tree<A>] = []) {
        self.value = value
        self.children = children
    }
}

我们用value表示该节点的值,它是一个范型,因此该值可以显示任何类型的数据,用children表示该节点的子节点,之所以让Tree实现Identifiable,目的是后续的代码需要遍历子节点,会用到ForEach。

绘制节点

由于每个节点可能存在n多个子节点,并且子节点在父节点的下方,我们很自然的考虑使用VStack包装一个HStack,示意图如下:

企业微信截图_9e08f005-95f9-46cc-8593-171c5ae2ee09.png
struct DiagramSample<A, V: View>: View {
    let tree: Tree<A>
    let node: (A) -> V

    var body: some View {
        VStack(spacing: 10) {
            node(tree.value)

            HStack(alignment: .bottom, spacing: 10) {
                ForEach(tree.children) { child in
                    DiagramSample(tree: child, node: self.node)
                }
            }
        }
    }
}

上边的代码很好理解,采用递归的方法显示各个节点。为了查看效果,我们举个🌰,我们先把节点中value的类型设为Int:Tree<Int>:

struct DiagramSampleExample: View {
    let binarytree = Tree<Int>(10, children: [
        Tree<Int>(20, children: [
            Tree(21),
            Tree(22)
        ]),
        Tree<Int>(30, children: [
            Tree(31),
            Tree(32)
        ])
    ])

    var body: some View {
        DiagramSample(tree: binarytree, node: { value in
            Text("\(value)")
                .modifier(RoundedCircleStyle())
        })
    }
}
企业微信截图_074de763-aa84-4851-9f88-a3ec695caa17.png

我们再把value的类型设置String:Tree(String):

struct DiagramSampleExample1: View {
    let binarytree = Tree<String>("爷爷", children: [
        Tree<String>("大爷", children: [
            Tree("大侄子"),
            Tree("二侄子")
        ]),
        Tree<String>("爸爸", children: [
            Tree("大儿子"),
            Tree("小儿子")
        ])
    ])

    var body: some View {
        DiagramSample(tree: binarytree, node: { value in
            Text("\(value)")
                 .modifier(RoundedCircleStyle())
        })
    }
}
企业微信截图_3d0aecb0-71f9-445a-b0b6-bd3c045462f0.png

完整实现

上边的内容只是一个小小的演示,接下来,我们讲解一下绘制二叉树的具体步骤,大家发现没有,绘制节点并没有用到Preference相关的知识,只有绘制节点与节点之间的连线的时候,才用到了这个技术。

基本思路如下:

  • 我们需要知道每个节点的位置信息
  • 把每个字节点的center同父节点连线

在本例中,我们使用AnchorPreference来获取节点的center,因此我们先定义一个PreferenceKey:

struct CollectDict<Key: Hashable, Value>: PreferenceKey {
    static var defaultValue: [Key: Value] { [:] }
    static func reduce(value: inout [Key: Value], nextValue: () -> [Key: Value]) {
        value.merge(nextValue(), uniquingKeysWith: { $1 })
    }
}

接下来是绘制图形,代码如下:

struct Diagram<A, V: View>: View {
    let tree: Tree<A>
    let node: (A) -> V

    typealias Key = CollectDict<String, Anchor<CGPoint>>

    var body: some View {
        VStack(spacing: 10) {
            node(tree.value)
                .anchorPreference(key: Key.self, value: .center, transform: {
                    [self.tree.id: $0]
                })

            HStack(alignment: .bottom, spacing: 10) {
                ForEach(tree.children) { child in
                    Diagram(tree: child, node: self.node)
                }
            }
        }
        .backgroundPreferenceValue(Key.self) { (centers: [String: Anchor<CGPoint>]) in
            GeometryReader { proxy in
                ForEach(self.tree.children) { child in
                    Line(from: proxy[centers[self.tree.id]!],
                         to: proxy[centers[child.id]!])
                        .stroke()
                }
            }
        }
    }
}

我们通过.anchorPreference为节点绑定信息,这个信息是一个字典,key为tree的id,value为center。在.backgroundPreferenceValue中为节点连线。我们在看看Line这个结构体的定义:

struct Line: Shape {
    var from: CGPoint
    var to: CGPoint

    var animatableData: AnimatablePair<CGPoint, CGPoint> {
        get {
            AnimatablePair(from, to)
        }
        set {
            from = newValue.first
            to = newValue.second
        }
    }

    func path(in rect: CGRect) -> Path {
        var path = Path()

        path.move(to: from)
        path.addLine(to: to)

        return path
    }
}

代码非常简单,就是绘制两点之间的path,我们实现了animatableData,目的是在插入数据的时候,Line的过渡效果是圆滑的,而不是瞬间改变。由于from和to的类型是CGPoint,它并没有实现VectorArithmetic协议,因此,我们需要手动实现该协议:

extension CGPoint: VectorArithmetic {
    public static func - (lhs: CGPoint, rhs: CGPoint) -> CGPoint {
        CGPoint(x: lhs.x - rhs.x, y: lhs.y - rhs.y)
    }

    public mutating func scale(by rhs: Double) {
        x *= CGFloat(rhs)
        y *= CGFloat(rhs)
    }

    public var magnitudeSquared: Double {
        0
    }

    public static func + (lhs: CGPoint, rhs: CGPoint) -> CGPoint {
        CGPoint(x: lhs.x + rhs.x, y: lhs.y + rhs.y)
    }
}

完成了上边的代码后,主要功能已经实现了,接下来,我们把这些代码组合起来:

struct DiagramExample: View {
    @State private var binarytree = Tree<Int>(130, children: [
        Tree<Int>(20, children: [
            Tree(21),
            Tree(22)
        ]),
        Tree<Int>(30, children: [
            Tree(31),
            Tree(32)
        ])
    ])

    var body: some View {
        VStack {
            Diagram(tree: binarytree, node: { value in
                Text("\(value)")
                    .modifier(RoundedCircleStyle())
            })
            
            Button("随机插入") {
                withAnimation {
                    self.binarytree.insert(Int.random(in: 0...100))
                }
            }
        }

    }
}

当点击随机插入的按钮后,我们为Tree随机插入一个0~100的整数,我们打算把这个二叉树做成二叉查找树,当前根节点的左边全部比根节点小,当前根节点的右边全部比根节点大

extension Tree where A == Int {
    mutating func insert(_ number: Int) {
        if number < value {
            if children.count > 0 {
                children[0].insert(number)
            } else {
                children.append(Tree(number))
            }
        } else {
            if children.count == 2 {
                children[1].insert(number)
            } else if children.count == 1, children[0].value > number {
                children[0].insert(number)
            } else {
                children.append(Tree(number))
            }
        }
    }
}

总结

Preference的用处还有很多,在接下来的一个实战中,使用该技术可以为ScrollView添加下拉刷新功能,敬请期待。

参考:https://www.objc.io/blog/2019/12/16/drawing-trees/

SwiftUI集合:FuckingSwiftUI