Náš iOS toolbox - Práca s UITableView & UICollectionView vo Swifte

import UIKit import GRProvider fileprivate struct Section: Sectionable { var title: String? var items: [String] }

V rámci našej triedy TableViewSampleController deklarujeme samotný UITableView a tableProvider, ktorý je vytvorený na základe predtým definovanej štruktúry Section:

class TableViewSampleController: UIViewController { @IBOutlet weak var tableView: UITableView! private let tableProvider = GRTableViewProvider<Section>() override func viewDidLoad() { super.viewDidLoad() title = "Table View Provider" setupTableView() showItems() } }

V metóde setupTableView() môžeme ľahko prispôsobiť inštanciu tableProvider podľa našich špecifických potrieb pomocou GRProvider.

Napríklad môžeme nastaviť estimatedHeightForRow, definovať akciu, ktorá vykoná po kliknutí na UITableViewCell, nastaviť heightForHeaderInSection a konfigurovať header pre jednotlivé sekcie atď.

private func setupTableView() { tableProvider.estimatedHeightForRow = 100 tableProvider.configureOnItemSelected = { [unowned self] _, _, _, item in let alert = UIAlertController(title: "Wow!", message: "You clicked an item: \(item)", preferredStyle: .alert) alert.addAction(.init(title: "Cancel", style: .cancel, handler: nil)) self.present(alert, animated: true) } tableProvider.configureCell = { _, tv, index, title in guard let cell = tv.dequeueReusableCell(fromClass: SimpleTableViewCell.self, for: index) else { return UITableViewCell() } cell.titleLabel.text = title return cell } tableProvider.heightForHeaderInSection = UITableView.automaticDimension tableProvider.configureSectionHeader = { _, _, _, section in let container = UIView() let label = UILabel() label.translatesAutoresizingMaskIntoConstraints = false container.addSubview(label) NSConstraints.activate([ label.topAnchor.constraint(equalTo: container.topAnchor, constant: 15), label.leftAnchor.constraint(equalTo: container.leftAnchor, constant: 15), label.bottomAnchor.constraint(equalTo: container.bottomAnchor, constant: -15), label.rightAnchor.constraint(equalTo: container.rightAnchor, constant: -15) ]) label.text = section.title return container } }

Ďalej v našom TableViewSampleController vytvoríme metódu showItems(), kde definujeme údaje, ktoré majú byť zobrazené v tabuľke. Na záver použijeme metódu bind(), ktorá vyplní TableView s našimi údajmi. 

private func showItems() { let section1 = Section(title: "Section1", items: (1...4).map { "Item \($0)" }) let section2 = Section(title: "Section2", items: (5...8).map { "Item \($0)" }) tableProvider.bind(to: tableView, sections: [section1, section2]) }

Práca s UICollectionView

Použitie GRCollectionViewProvider  pri práci s UICollectionView je podobné vyššie uvedenému príkladu. Najskôr vytvoríme štruktúru Section, kde definujeme nadpis a položky. Potom definujeme GRCollectionViewProvider s našou štruktúrou Section.

import UIKit import GRProvider fileprivate struct Section: Sectionable { struct Item { let title: String } var items: [Item] var title: String? init(items: [Item], title: String?) { self.items = items self.title = title } } final class CollectionProviderViewSampleController: UIViewController { @IBOutlet weak var collectionView: UICollectionView! fileprivate lazy var collectionProvider = GRCollectionViewProvider<Section>() override func viewDidLoad() { super.viewDidLoad() title = "Collection View Provider" setupCollectionView() showItems() } }

V metóde setupCollectionView() môžeme prispôsobiť collectionView pomocou nastavení dostupných v collectionProvider. Napríklad môžeme nastaviť sectionInsets, cellSize, cell a akcie, ktoré sa majú vykonať po kliknutí na jednotlivé bunky.

Keď je collectionView nakonfigurované, môžeme použiť metódu showItems() na naplnenie collectionView požadovanými údajmi.

// Configure the collectionView private func setupCollectionView() { collectionProvider.sectionInsets = .init(top: 0, left: 5, bottom: 0, right: 5) collectionProvider.minimumLineSpacingForSection = 5 collectionProvider.minInteritemSpacingForSection = 5 collectionProvider.configureCellSize = { _, cv, index, item in return CGSize(width: (cv.frame.width - 21) / 3, height: (cv.frame.width - 21) / 3) } collectionProvider.configureSupplementaryElementOfKind = { provider, cv, index, type in let section = provider.sections[index.section] let view = cv.dequeueReusableSupplementaryView(ofKind: type, fromClass: SimpleCollectionViewSupplementaryView.self, for: index) view.titleLabel.text = section.title return view } collectionProvider.configureCell = { _, tv, indexPath, item in let cell = tv.dequeueReusableCell(fromClass: SimpleCollectionViewCell.self, for: indexPath) cell.titleLabel.text = item.title return cell } collectionProvider.configureOnItemSelected = { [unowned self] _, _, _, item in let alert = UIAlertController(title: "Wow!", message: "You clicked an item: \(item)", preferredStyle: .alert) alert.addAction(.init(title: "Cancel", style: .cancel, handler: nil)) self.present(alert, animated: true) } } // fill collectionView with data private func showItems() { let section1 = Section(items: (1...5).map { Section.Item(title: "Item \($0)") }, title: "Section 1") let section2 = Section(items: (10...12).map { Section.Item(title: "Item \($0)") }, title: "Section 2") collectionProvider.bind(to: collectionView, sections: [section1, section2]) }

Gratulujem!

Prešiel/prešla si procesom práce s UITableView a UICollectionView použitím balíka GoodProvider.

Teraz sa možno zaujímaš, ako to presne funguje v rámci aplikácie. Našťastie, balík obsahuje ukážkový kód, ktorý môžeš preskúmať a lepšie porozumieť jeho funkciám. 

Ak bol pre teba tento balík užitočný, určite sa pozri aj na naše ďalšie balíky. Kto vie, možno nájdeš ďalší, ktorý ti pomôže posunúť tvoju appku na vyššiu úroveň!