Работа с Diffable data source и table views с использованием UIKit

В этом руководстве мы создадим экран, позволяющий осуществлять одиночный и множественный выбор, используя Diffable data source и table view.

Настройка проекта

Мы будем использовать обычный проект Xcode на основе storyboard, поскольку мы работаем с UIKit.

Нам также понадобится таблица, для этого мы могли бы использовать традиционную установку, но поскольку мы используем современные методы работы с UIKit, в этот раз мы поступим немного иначе.

Довольно печально, что нам все еще приходится предоставлять собственные типобезопасные переиспользуемые расширения для классов UITableView и UICollectionView. В любом случае, вот небольшой фрагмент, который мы будем использовать.

import UIKit  extension UITableViewCell {          static var reuseIdentifier: String {         String(describing: self)     }      var reuseIdentifier: String {         type(of: self).reuseIdentifier     } }  extension UITableView {              func register<T: UITableViewCell>(_ type: T.Type) {         register(T.self, forCellReuseIdentifier: T.reuseIdentifier)     }      func reuse<T: UITableViewCell>(_ type: T.Type, _ indexPath: IndexPath) -> T {         dequeueReusableCell(withIdentifier: T.reuseIdentifier, for: indexPath) as! T     } }

Я также создал подкласс для UITableView, чтобы можно было настроить всё внутри функции initialize, которая нам понадобится в этом руководстве.

import UIKit  open class TableView: UITableView {      public init(style: UITableView.Style = .plain) {         super.init(frame: .zero, style: style)                  initialize()     }      @available(*, unavailable)     required public init?(coder: NSCoder) {         fatalError("init(coder:) has not been implemented")     }          open func initialize() {         translatesAutoresizingMaskIntoConstraints = false         allowsMultipleSelection = true     }          func layoutConstraints(in view: UIView) -> [NSLayoutConstraint] {         [             topAnchor.constraint(equalTo: view.topAnchor),             bottomAnchor.constraint(equalTo: view.bottomAnchor),             leadingAnchor.constraint(equalTo: view.leadingAnchor),             trailingAnchor.constraint(equalTo: view.trailingAnchor),         ]     } }

Мы собираемся создать экран настроек с областями одиночного и множественного выбора, поэтому хорошо иметь некоторые расширения, которые помогут нам управлять выбранными ячейками таблицы.

import UIKit  public extension UITableView {          func select(_ indexPaths: [IndexPath],                 animated: Bool = true,                 scrollPosition: UITableView.ScrollPosition = .none) {         for indexPath in indexPaths {             selectRow(at: indexPath, animated: animated, scrollPosition: scrollPosition)         }     }           func deselect(_ indexPaths: [IndexPath], animated: Bool = true) {         for indexPath in indexPaths {             deselectRow(at: indexPath, animated: animated)         }     }          func deselectAll(animated: Bool = true) {         deselect(indexPathsForSelectedRows ?? [], animated: animated)     }      func deselectAllInSection(except indexPath: IndexPath) {         let indexPathsToDeselect = (indexPathsForSelectedRows ?? []).filter {             $0.section == indexPath.section && $0.row != indexPath.row         }         deselect(indexPathsToDeselect)     } }

Теперь мы можем сосредоточиться на создании пользовательской ячейки. Мы будем использовать новый API конфигурации ячеек, но сначала нам нужна модель для нашего класса.

import Foundation  protocol CustomCellModel {     var text: String { get }     var secondaryText: String? { get } }  extension CustomCellModel {     var secondaryText: String? { nil } }

Теперь мы можем использовать эту модель ячейки и настроить CustomCell, используя её свойства. Эта ячейка будет иметь два состояния. Если ячейка выбрана, мы будем отображать заполненный значок галочки, в противном случае просто пустой круг. Мы также обновим лейблы, используя значения абстрактной модели.

import UIKit  class CustomCell: UITableViewCell {      var model: CustomCellModel?      override func updateConfiguration(using state: UICellConfigurationState) {         super.updateConfiguration(using: state)                  var contentConfig = defaultContentConfiguration().updated(for: state)         contentConfig.text = model?.text         contentConfig.secondaryText = model?.secondaryText                  contentConfig.imageProperties.tintColor = .systemBlue         contentConfig.image = UIImage(systemName: "circle")          if state.isHighlighted || state.isSelected {             contentConfig.image = UIImage(systemName: "checkmark.circle.fill")         }         contentConfiguration = contentConfig     } }

Внутри класса ViewController мы можем легко настроить созданную таблицу. Поскольку мы используем storyboard, мы можем переопределить метод init(coder:), но если вы создаете контроллер программно, то можно просто создать свой собственный метод init.

Кстати, я также обернул этот контроллер внутри navigation controller, так что я отображаю пользовательский заголовок, используя large style по умолчанию, и вот недостающие части кода, которые мы должны написать:

import UIKit  class ViewController: UIViewController {          var tableView: TableView          required init?(coder: NSCoder) {         self.tableView = TableView(style: .insetGrouped)          super.init(coder: coder)     }          override func loadView() {         super.loadView()                  view.addSubview(tableView)          NSLayoutConstraint.activate(tableView.layoutConstraints(in: view))     }      override func viewDidLoad() {         super.viewDidLoad()                  title = "Table view"         navigationController?.navigationBar.prefersLargeTitles = true          tableView.register(CustomCell.self)         tableView.delegate = self      }          override func viewDidAppear(_ animated: Bool) {         super.viewDidAppear(animated)                  reload()     }          func reload() {         /// coming soon...     }  }  extension ViewController: UITableViewDelegate {      func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {         /// coming soon...     }      func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {         /// coming soon...     } }

Сейчас мы не реализовывали методы датасорса таблицы, так как мы собираемся использовать для этой цели diffable data source. Позвольте мне показать вам, как это работает.

Diffable data source

Я уже приводил один пример, содержащий diffable data source, но это был учебник по созданию современных коллекций. Diffable data source — это буквально датасорс, привязанный к view. В нашем случае общий класс UITableViewDiffableDataSource будет выступать в качестве источника данных четырех нашей таблицы. Эти источники данных хороши тем, что вы можете легко манипулировать секциями и ячейками внутри таблиц без необходимости работы с indexPath.

Итак, основная идея заключается в том, что мы хотим отобразить две секции, одна из которых содержит возможность одиночного выбора, а вторая — мультивыбора с некоторыми буквами из алфавита. Вот модели данных для элементов секций.

enum NumberOption: String, CaseIterable {     case one     case two     case three }  extension NumberOption: CustomCellModel {       var text: String { rawValue } }  enum LetterOption: String, CaseIterable {     case a     case b     case c     case d }  extension LetterOption: CustomCellModel {       var text: String { rawValue } }

Теперь мы сможем отобразить эти элементы внутри таблицы, если мы реализуем обычные методы источника данных. Но поскольку мы собираемся работать с diffabe data source, нам нужны некоторые дополнительные модели.

Чтобы устранить необходимость indexPaths, мы можем использовать перечисление Hashable для определения наших секций. У нас будет две секции, одна для цифр, другая для букв. Мы собираемся обернуть соответствующий тип внутри перечисления с типобезопасными значениями.

enum Section: Hashable {     case numbers     case letters }  enum SectionItem: Hashable {     case number(NumberOption)     case letter(LetterOption) }  struct SectionData {     var key: Section     var values: [SectionItem] }

Мы также введем SectionData, с ним будет проще вставлять необходимые секции и ячейки секций, используя источник данных.

final class DataSource: UITableViewDiffableDataSource<Section, SectionItem> {          init(_ tableView: UITableView) {         super.init(tableView: tableView) { tableView, indexPath, itemIdentifier in             let cell = tableView.reuse(CustomCell.self, indexPath)             cell.selectionStyle = .none             switch itemIdentifier {             case .number(let model):                 cell.model = model             case .letter(let model):                 cell.model = model             }             return cell         }     }          override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {         let id = sectionIdentifier(for: section)         switch id {         case .numbers:             return "Pick a number"         case .letters:             return "Pick some letters"         default:             return nil         }     }      func reload(_ data: [SectionData], animated: Bool = true) {         var snapshot = snapshot()         snapshot.deleteAllItems()         for item in data {             snapshot.appendSections([item.key])             snapshot.appendItems(item.values, toSection: item.key)         }         apply(snapshot, animatingDifferences: animated)     } }

Мы можем предоставить пользовательский метод init для источника данных, где мы можем использовать cell provider для настройки наших ячеек с заданным идентификатором.

Как вы можете видеть, идентификатор — это перечисление SectionItem, которое мы создали несколько минут назад. Мы можем использовать переключатель (switch), чтобы получить обратно базовую модель, а поскольку эти модели соответствуют протоколу CustomCellModel, мы можем установить свойство cell.model. Также можно реализовать обычный метод titleForHeaderInSection, при этом мы можем переключать идентификатор секции и возвращать соответствующий лейбл для каждой секции.

Последний метод является вспомогательным, я использую его для релоада источника данных с заданными элементами секции.

import UIKit  class ViewController: UIViewController {          var tableView: TableView     var dataSource: DataSource          required init?(coder: NSCoder) {         self.tableView = TableView(style: .insetGrouped)         self.dataSource = DataSource(tableView)          super.init(coder: coder)     }          override func loadView() {         super.loadView()                  view.addSubview(tableView)          NSLayoutConstraint.activate(tableView.layoutConstraints(in: view))     }      override func viewDidLoad() {         super.viewDidLoad()                  title = "Table view"         navigationController?.navigationBar.prefersLargeTitles = true          tableView.register(CustomCell.self)         tableView.delegate = self      }          override func viewDidAppear(_ animated: Bool) {         super.viewDidAppear(animated)                  reload()     }          func reload() {         dataSource.reload([             .init(key: .numbers, values: NumberOption.allCases.map { .number($0) }),             .init(key: .letters, values: LetterOption.allCases.map { .letter($0) }),         ])     }  }  extension ViewController: UITableViewDelegate {      func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {         // coming soon...     }      func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {         // coming soon...     } }

Итак, внутри контроллера можно отобразить вид таблицы и показать обе секции. Даже ячейки по умолчанию выбираются, но я хотел бы показать вам, как создать общий подход для хранения и возврата выбранных значений. Конечно, мы могли бы использовать свойство indexPathsForSelectedRows, но у меня есть небольшой вспомогательный инструмент, который позволит использовать одиночный и множественный выбор для каждой секции.

struct SelectionOptions<T: Hashable> {      var values: [T]     var selectedValues: [T]     var multipleSelection: Bool      init(_ values: [T], selected: [T] = [], multiple: Bool = false) {         self.values = values         self.selectedValues = selected         self.multipleSelection = multiple     }      mutating func toggle(_ value: T) {         guard multipleSelection else {             selectedValues = [value]             return         }         if selectedValues.contains(value) {             selectedValues = selectedValues.filter { $0 != value }         }         else {             selectedValues.append(value)         }     } }

Используя общее расширение класса UITableViewDiffableDataSource, мы можем превратить значения выбранных элементов в indexPaths, что поможет нам сделать ячейки выбранными при загрузке view.

import UIKit  extension UITableViewDiffableDataSource {      func selectedIndexPaths<T: Hashable>(_ selection: SelectionOptions<T>,                                          _ transform: (T) -> ItemIdentifierType) ->  [IndexPath] {         selection.values             .filter { selection.selectedValues.contains($0) }             .map { transform($0) }             .compactMap { indexPath(for: $0) }     } }

Осталось сделать только одно — обработать одиночный и множественный выбор с помощью методов делегата didSelectRowAt и didDeselectRowAt.

import UIKit  class ViewController: UIViewController {          var tableView: TableView     var dataSource: DataSource          var singleOptions = SelectionOptions<NumberOption>(NumberOption.allCases, selected: [.two])     var multipleOptions = SelectionOptions<LetterOption>(LetterOption.allCases, selected: [.a, .c], multiple: true)      required init?(coder: NSCoder) {         self.tableView = TableView(style: .insetGrouped)         self.dataSource = DataSource(tableView)          super.init(coder: coder)     }          override func loadView() {         super.loadView()                  view.addSubview(tableView)          NSLayoutConstraint.activate(tableView.layoutConstraints(in: view))     }      override func viewDidLoad() {         super.viewDidLoad()                  title = "Table view"         navigationController?.navigationBar.prefersLargeTitles = true          tableView.register(CustomCell.self)         tableView.delegate = self      }          override func viewDidAppear(_ animated: Bool) {         super.viewDidAppear(animated)                  reload()     }          func reload() {         dataSource.reload([             .init(key: .numbers, values: singleOptions.values.map { .number($0) }),             .init(key: .letters, values: multipleOptions.values.map { .letter($0) }),         ])          tableView.select(dataSource.selectedIndexPaths(singleOptions) { .number($0) })         tableView.select(dataSource.selectedIndexPaths(multipleOptions) { .letter($0) })     }  }  extension ViewController: UITableViewDelegate {      func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {         guard let sectionId = dataSource.sectionIdentifier(for: indexPath.section) else {             return         }          switch sectionId {         case .numbers:             guard case let .number(model) = dataSource.itemIdentifier(for: indexPath) else {                 return             }             tableView.deselectAllInSection(except: indexPath)             singleOptions.toggle(model)             print(singleOptions.selectedValues)                      case .letters:             guard case let .letter(model) = dataSource.itemIdentifier(for: indexPath) else {                 return             }             multipleOptions.toggle(model)             print(multipleOptions.selectedValues)         }     }      func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {         guard let sectionId = dataSource.sectionIdentifier(for: indexPath.section) else {             return         }         switch sectionId {         case .numbers:             tableView.select([indexPath])         case .letters:             guard case let .letter(model) = dataSource.itemIdentifier(for: indexPath) else {                 return             }             multipleOptions.toggle(model)             print(multipleOptions.selectedValues)         }     } }

Именно поэтому мы создали методы-помощники выбора в начале статьи. С помощью этой техники относительно легко реализовать секцию с одиночным или мультиселектом, но, конечно, эти вещи становятся еще более простыми, если вы умеете работать со SwiftUI.

В любом случае, я надеюсь, что это руководство поможет некоторым из вас, мне по-прежнему очень нравится UIKit, и я рад, что Apple добавляет в него новые возможности. Diffable data source — отличный способ настройки таблиц и коллекций. С помощью этих маленьких помощников вы можете легко создавать свои собственные настройки или другие экраны.

Больше историй, подходов к реализации и инструментов для iOS-разработчика можно найти в авторском канале об iOS-разработке.