👨🏾‍🤝‍👨🏻 🚮 🚴🏽 Comment nous avons conçu le TableAdapter et simplifié le travail avec UITableView 🧕🏼 🤞🏿 🤘🏾

Lorsque UITableViewje travaillais avec, je voulais éviter d'écrire du code de modèle, ce qui est encore plus compliqué si vous devez mettre à jour l'état de la table de manière animée. Apple a présenté sa solution à ce problème lors de la WWDC 2019, mais il ne fonctionne qu'avec iOS 13. Et nous, en tant que studio de développement d'applications mobiles, n'avons pas le luxe de choisir la version minimale d'iOS.

Par conséquent, nous avons réalisé notre vision d'une approche basée sur les données pour travailler avec des tables, tout en simplifiant la configuration des cellules en cours de route. Et ils ont ajouté une mise à jour du tableau animé, qui est basée sur le calcul automatique des différences entre les anciennes et les nouvelles données pour le temps linéaire O (n) . Tout cela, nous l'avons conçu dans une petite bibliothèque appelée TableAdapter.

Ce que nous avons fait et comment nous y sommes parvenus sera discuté dans l'article.

Avantages et inconvénients de TableAdapter

avantages

Mise à jour de la table d'animation
Calcul automatique de la différence pour le temps linéaire
Pas besoin d'hériter d'un tableau, d'une cellule ou d'un modèle
Pas plus dequeReusable...
Configuration de cellule de type sécurisé, en-tête / pied de page
Initialisation des cellules de quelque manière que ce soit
Configuration facile de la section
Facile à étendre

Moins

, Hashable. , - Swift, .. . - .

– :

1. , /

1.1

, , Hashable.

extension User: Hashable { ... }

1.2

Configurable, . , .

extension Cell: Configurable {

    public func setup(with item: User) {
        textLabel?.text = item.name
    }
}

, , , . , setup(with:) .

1.3 /

/ Configurable, . / 1.3 .

2.

() , /. Section<Item, SectionId>, (Item) (SectionId). (id) Hashable, .

/

/ header/footer.

/

/ headerIdentifier/footerIdentifier, . , Configurable ( 1.3).

let section = Section<User, Int>(
    id: 0,
    items: users,
    header: "Users Section",
    footer: "Users Section",
    headerIdentifier: "HeaderReuseIdentifier",
    footerIdentifier: "FooterReuseIdentifier"
)

id .

3.

TableAdapter<Item, SectionId>, (Item) (SectionId). , .

CellReuseIdentifierProvider, . , IndexPath , .

ellDidSelectHandler, , IndexPath .

lazy var adapter = TableAdapter<User, Int>(
    tableView: tableView,
    cellIdentifierProvider: { (indexPath, item) -> String? in
        // Return cell reuse identifier for item at indexPath
    },
    cellDidSelectHandler: { [weak self] (table, indexPath, item) in
        // Handle cell selection for item at indexPath
    }
)

adapter.update(with: [section], animated: true)

class ViewController: UIViewController {

    let tableView = ...

    lazy var adapter = TableAdapter<User, Int>(
        tableView: tableView,
        cellIdentifierProvider: { (indexPath, item) -> String? in
            return "CellReuseIdentifier"
        },
        cellDidSelectHandler: { [weak self] (table, indexPath, item) in
            // Handle cell selection for item at indexPath
        }
    )

    let users: [User] = [...]

    override func viewDidLoad() {
        super.viewDidLoad()

        setupTable()

        let section = Section<User, Int>(
            id: 0,
            items: users,
            header: "Users Section",
            footer: "Users Section",
            headerIdentifier: "HeaderReuseIdentifier",
            footerIdentifier: "FooterReuseIdentifier"
        )

        adapter.update(with: [section]], animated: true)
    }

    func setupTable() {
        tableView.register(
            Cell.self,
            forCellReuseIdentifier: "CellReuseIdentifier"
        )

        tableView.register(
            Header.self,
            forHeaderFooterViewReuseIdentifier identifier: "HeaderReuseIdentifier"
        )
        tableView.register(
            Footer.self,
            forHeaderFooterViewReuseIdentifier identifier: "FooterReuseIdentifier"
        )
    }
}

Hashable , (associated value).

, CellReuserIdentifierProvider. A , "Cell" :

tableView.register(
    Cell.self,
    forCellReuseIdentifier: adapter.defaultCellIdentifier
)

/

headerIdentifier/footerIdentifier . / , "Header"/"Footer".

tableView.register(
    HeaderView.self,
    forHeaderFooterViewReuseIdentifier identifier: adapter.defaultHeaderIdentifier
)
tableView.register(
    FooterView.self,
    forHeaderFooterViewReuseIdentifier identifier: adapter.defaultFooterIdentifier
)

Sender

, , , , TableAdapter'a sender. , / SenderConfigurable.


class ViewController: UIViewController {

    lazy var adapter = TableAdapter<User, Int>(
        tableView: tableView,
        sender: self
    )
}

extension Cell: SenderConfigurable {

    func setup(with item: User, sender: ViewController) {
        textLabel?.text = item.name
        delegate = sender
    }
}

: , . , setup(with:sender:) .

, CellProvider, :

lazy var adapter = TableAdapter<User, Int>(
    tableView: tableView,
    cellProvider: { (table, indexPath, user) in
        let cell = table.dequeueReusableCell(
            withIdentifier: "CellReuseIdentifier",
            for: indexPath
        ) as! Cell

        cell.setup(with: user)

        return cell
    }
)

/ TableAdapter .

(diff) , . , A technique for isolating differences between files. O(n) . Hashable.

, , performBatchUpdates(_:completion:) . . .

() (id). .

let sectionsDiff = try calculateDiff(form: oldSections, to: newSections)

, , . , , id. , , , . , , .

let intermediateSections = applyDiff(sectionsDiff, to: oldSections)

( id) . . , , .

let rowsDiff = try calculateRowsDiff(from: intermediateSections, to: newSections)

let diff = Diff(
    sections: sectionsDiff,
    rows: rowsDiff,
    intermediateData: intermediateSections,
    resultData: newSections
)

: ( ) , .

data = diff.intermediateData

tableView.insertSections(diff.sections.inserts, with: animationType)
tableView.deleteSections(diff.sections.deletes, with: animationType)
diff.sections.moves.forEach { tableView.moveSection($0.from, toSection: $0.to) }

: () , .

data = diff.resultData

tableView.deleteRows(at: diff.rows.deletes, with: animationType)
tableView.insertRows(at: diff.rows.inserts, with: animationType)
diff.rows.moves.forEach { tableView.moveRow(at: $0.from, to: $0.to) }

1: . «» «» .

2: , .. . , , , , . .. , . adapter.update(with: sections, animated: false) .

`Configurable`

, :

let user = users[indexPath.row]

let cell = tableView.dequeueReusableCell(
    withIdentifier: cellId,
    for: indexPath
) as! Cell

cell.setup(with: user)

. (associatedtype).

Configurable, :

protocol Configurable {

    associatedtype ItemType: Any
    func setup(with item: ItemType)
}

, dequeueReusableCell(withIdentifier:for:) Configurable - ItemType. AnyConfigurable:

protocol AnyConfigurable {

    func anySetup(with item: Any)
}

, :

let cell = tableView.dequeueReusableCell(withIdentifier: cellId, for: indexPath)

if let cell = cell as? AnyConfigurable {
    cell.anySetup(with: item)
}

Configurable AnyConfigurable :

extension Configurable {

    func anySetup(with item: Any) {
        if let item = item as? ItemType {
            setup(with: item)
        }
    }
}

, - «» , . , .

, Swift type-erased wrappers. AnyHashable, AnyIndex.

: . : .

GitHub

En conséquence, nous avons obtenu une solution qui vous permet de configurer facilement les cellules, d'écrire moins de code de modèle et d'animation en plus. Dans le même temps, il restait la possibilité de réglages de table de bas niveau et d'extension fonctionnelle si nécessaire.

Implémentation de GitHub

Comment nous avons conçu le TableAdapter et simplifié le travail avec UITableView