A generic small reusable components for data source implementation for UITableView/UICollectionView in Swift.
A generic small reusable components for data source implementation for
UITableView/
UICollectionViewwritten in Swift.
BasicDataSourceeasily bind model to cells with automatic dequeuing.
SegmentedDataSourceeasily build segmented controls or for empty state of your
UICollectionView/
UITableViewdata source.
CompositeDataSourcebuilds complex cells/models structure with easy to use components (
BasicDataSource
SegmentedDataSourceor other
CompositeDataSource).
UICollectionViewsupplementary,
UITableViewheader, and footer views support.
UIKitclasses.
To integrate
GenericDataSourceinto your Xcode project using CocoaPods, specify it in your
Podfile:
pod 'GenericDataSources'
IMPORTANT: The pod name is GenericDataSources with "s" at the end.
To integrate GenericDataSource into your Xcode project using Carthage, specify it in your Cartfile:
github "GenericDataSource/GenericDataSource"
Add
GenericDataSource.xcodeprojto your project file by drag and drop.
You can then consult to Adding an Existing Framework to a Project.
Create a basic data source and bind it to to a table view.
let dataSource = BasicBlockDataSource() { (item: Example, cell: BasicTableViewCell, indexPath) -> Void in cell.titleLabel?.text = item.title }// Need to keep a strong reference to our data source. self.dataSource = dataSource
// register the cell tableView.ds_register(cellClass: BasicTableViewCell.self) // bind the data source to the table view tableView.ds_useDataSource(dataSource)
dataSource.items = <> // Can be set and altered at anytime
That's it! Your first data source is implemented. No dequeuing! no casting! simple and smart.
Let's now take it to the next level. Suppose after we implemented it, the requirements changed and we need to implement it using
UICollectionView.
let dataSource = BasicBlockDataSource() { (item: Example, cell: BasicCollectionViewCell, indexPath) -> Void in cell.titleLabel?.text = item.title }// Need to keep a strong reference to our data source. self.dataSource = dataSource
// register the cell collectionView.ds_register(cellClass: BasicCollectionViewCell.self) // bind the data source to the collection view collectionView.ds_useDataSource(dataSource)
dataSource.items = <> // Can be set and altered at anytime
All you need to do is change the cell class and of course the table view to collection view.
Actually this opens the door for so much possibilities. You can inherit from
BasicDataSourceand implement your custom generic data source that is based on a protocol implemented by the cell and you don't need to repeat the configuration part. You would create data source like that.
let dataSource1 = CustomDataSource() // for table view let dataSource2 = CustomDataSource() // for collection view
Suppose we want to implement the following screen, the App Store featured tab.
If you want to have a look at the complete source code, it is under Example project ->
AppStoreViewController.swift.
BasicDataSource).
CompositeDataSource(sectionType: .single)for the table view rows. Since these rows are of different cell types.
SegmentedDataSourcefor switching between loading and data views.
SegmentedDataSourcedata source to the table view and that's it.
One thing we didn't talk about is the
UICollectionViewof the featured section cells. It's very simple, just
BasicDataSource.
See how we can implement the screen in the following code:
Swift class AppStoreFeaturedSectionTableViewCell: UITableViewCell { ... } class AppStoreQuickLinkLabelTableViewCell: UITableViewCell { ... } class AppStoreQuickLinkTableViewCell: UITableViewCell { ... } class AppStoreFooterTableViewCell: UITableViewCell { ... } class AppStoreLoadingTableViewCell: UITableViewCell { ... }
BasicDataSources.
Swift class AppStoreLoadingDataSource: BasicDataSource { // loading should take full screen size. override func ds_collectionView(_ collectionView: GeneralCollectionView, sizeForItemAt indexPath: IndexPath) -> CGSize { return collectionView.size } } class AppStoreFooterDataSource: BasicDataSource { ... } class AppStoreQuickLinkDataSource: BasicDataSource { ... } class AppStoreFeaturedAppsDataSource: BasicDataSource { ... } class AppStoreFeaturedAppsSectionDataSource: BasicDataSource { ... } class AppStoreQuickLinkLabelDataSource: BasicDataSource { ... }
Create
CompositeDataSourcethat holds the featured page. ```Swift class AppStoreFeaturedPageDataSource: CompositeDataSource { init() { super.init(sectionType: .single)] }
var page: FeaturedPage? { didSet { // remove all existing data sources removeAllDataSources()
guard let page = page else { return }// add featured apps let featuredApps = AppStoreFeaturedAppsSectionDataSource() featuredApps.setSelectionHandler(UnselectableSelectionHandler()) featuredApps.items = page.sections add(featuredApps) // add quick link label let quickLinkLabel = AppStoreQuickLinkLabelDataSource() quickLinkLabel.setSelectionHandler(UnselectableSelectionHandler()) quickLinkLabel.items = [page.quickLinkLabel] add(quickLinkLabel) // add quick links let quickLinks = AppStoreQuickLinkDataSource() quickLinks.items = page.quickLinks add(quickLinks) // add footer let footer = AppStoreFooterDataSource() footer.setSelectionHandler(UnselectableSelectionHandler()) footer.items = [Void()] // we add 1 element to show the footer, 2 elements will show it twice. 0 will not show it. add(footer)
}
} } ```
Create the outer most data source. ```Swift class AppStoreDataSource: SegmentedDataSource {
let loading = AppStoreLoadingDataSource() let page = AppStoreFeaturedPageDataSource()
// reload data on index change override var selectedDataSourceIndex: Int { didSet { dsreusableViewDelegate?.dsreloadData() } }
override init() { super.init() loading.items = [Void()] // we add 1 element to show the loading, 2 elements will show it twice. 0 will not show it.
add(loading) add(page)
} } ```
Register cells.
Swift tableView.ds_register(cellNib: AppStoreFeaturedSectionTableViewCell.self) tableView.ds_register(cellNib: AppStoreQuickLinkLabelTableViewCell.self) tableView.ds_register(cellNib: AppStoreQuickLinkTableViewCell.self) tableView.ds_register(cellNib: AppStoreFooterTableViewCell.self) tableView.ds_register(cellNib: AppStoreLoadingTableViewCell.self)
Set data sources to the collection view.
Swift tableView.ds_useDataSource(dataSource)
Finally set the data when it is available. ```Swift // show loading indicator dataSource.selectedDataSourceIndex = 0
// get the data from the service service.getFeaturedPage { [weak self] page in
// update the data source model self?.dataSource.page.page = page// show the page self?.dataSource.selectedDataSourceIndex = 1
} ```
There are many benefits of doing that:
UITableViewand
UICollectionViewwithout touching data sources or models. Only change the cells to inherit from
UITableViewCellor
UICollectionViewCelland everything else works.
addof data sources calls.
if/
elsein our code.
Check the Examples application for complete implementations.
The main idea comes from WWDC 2014 Advanced User Interfaces with Collection Views written in swift with generics.
Mohamed Afifi, [email protected]
GenericDataSource is available under the MIT license. See the LICENSE file for more info.