How to model a tree structure using NSDiffableDataSourceSectionSnapshot? - swift

Question

How can you model a tree structure using NSDiffableDataSourceSectionSnapshot? I would like to make something that resembles a family tree. SwiftUI makes this relatively simple by using the built in List.

Answer 1

First we have to make our node object to represent heretical tree data.
import Foundation
#resultBuilder
struct NodeBuilder {
static func buildBlock<Value>(_ children: Node<Value>...) -> [Node<Value>] {
children
}
}
struct Node<Value>: Identifiable {
var value: Value
private(set) var children: [Node]?
var id = UUID()
mutating func add(child: Node) {
children?.append(child)
}
init(_ value: Value) {
self.value = value
}
init(_ value: Value, children: [Node]) {
self.value = value
}
init(_ value: Value, #NodeBuilder builder: () -> [Node]) {
self.value = value
self.children = builder()
}
var count: Int {
1 + (children?.reduce(0) { $0 + $1.count } ?? 0)
}
var recursiveChildren: [Node] {
return [self] + (children?.flatMap { $0.recursiveChildren } ?? [])
}
}
extension Node: Equatable where Value: Equatable { }
extension Node: Hashable where Value: Hashable { }
extension Node: Codable where Value: Codable { }
Next, and most importantly we configure the NSDiffableDataSourceSectionSnapshot using recursion. See applySnapshot and addChildren.
class ViewController: UIViewController {
private var collectionView: UICollectionView! = nil
var dataSource: UICollectionViewDiffableDataSource<String, Node<String>>! = nil
let root = Node("Terry") {
Node("Paul") {
Node("Sophie")
Node("Timmy")
Node("Sandra") {
Node("Aimee")
Node("Niki")
}
Node("Bob")
}
Node("Andrew") {
Node("John")
Node("Adam")
Node("Suzzie")
Node("Ricky"){
Node("Taylor")
Node("Megan")
Node("Arthur") {
Node("Fred")
Node("George")
Node("Giny") {
Node("Harry")
Node("Harold")
}
}
}
}
}
//MARK: - View
override func viewDidLoad() {
super.viewDidLoad()
configureCollectionView()
configureDataSource()
applySnapshot(animated: false)
}
private func configureCollectionView() {
let config = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
let layout = UICollectionViewCompositionalLayout.list(using: config)
collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.translatesAutoresizingMaskIntoConstraints = false
collectionView.backgroundColor = .systemBackground
view.addSubview(collectionView)
NSLayoutConstraint.activate([
collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
])
}
//MARK: - Data Source
func configureDataSource() {
let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, Node<String>> { (cell, indexPath, node) in
var content = cell.defaultContentConfiguration()
content.text = node.value
cell.contentConfiguration = content
cell.accessories = node.children == nil ? [] : [.outlineDisclosure()]
}
dataSource = UICollectionViewDiffableDataSource<String, Node<String>>(collectionView: collectionView) { (collectionView, indexPath, node) -> UICollectionViewCell? in
return collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: node)
}
}
func applySnapshot(animated: Bool) {
guard let children = root.children else { return }
var sectionSnapshot = NSDiffableDataSourceSectionSnapshot<Node<String>>()
sectionSnapshot.append([root])
sectionSnapshot.append(children, to: root)
addChildren(of: root, to: &sectionSnapshot)
sectionSnapshot.expand(sectionSnapshot.items)
dataSource.apply(sectionSnapshot, to: root.value, animatingDifferences: animated)
}
func addChildren(of node: Node<String>, to sectionSnapshot: inout NSDiffableDataSourceSectionSnapshot<Node<String>>) {
guard let children = node.children else { return }
for subChild in children {
if let grandChildren = subChild.children {
sectionSnapshot.append(grandChildren, to: subChild)
addChildren(of: subChild, to: &sectionSnapshot)
}
}
}
}
If you would like multiple sections, that's easily done as well by modifying the applySnapshot function.
func applySnapshot(animated: Bool) {
guard let children = root.children else { return }
for child in children {
if let grandChildren = child.children {
var sectionSnapshot = NSDiffableDataSourceSectionSnapshot<Node<String>>()
sectionSnapshot.append([child])
sectionSnapshot.append(grandChildren, to: child)
addChildren(of: child, to: &sectionSnapshot)
sectionSnapshot.expand(sectionSnapshot.items)
dataSource.apply(sectionSnapshot, to: child.value, animatingDifferences: animated)
}
}
}