Flix is a flexible iOS framework for creating dynamic forms with UITableView or UICollectionView.
- Supports no reused when you need.
- Supports reused for list when you need.
- Supports nested forms.
- Supports add, delete and insert
- Supports Storyboard design
- Example app available!
- Works with
UITableViewandUICollectionView
Flix focus on combining cells of UICollectionView or UITableView, it don't care about the view layout, business logic. So you can easily build custom form using Flix.
- Xcode 10.2+
- Swift 5+
- RxSwift 5.0+
- RxDataSources 4.0+
pod 'Flix', '~> 4.0'Each provider will generate a number of nodes (cells), then combines those providers according to the sequence.
When creating a settings page, we don't want to some cells be reused, for example Profile Cell, Airplane Mode Cell. This looks like creating a static tableView on Storyboard.
To create one profile cell, we just need to create a UniqueCustomTableViewProvider and configure the style and add some views:
let profileProvider = UniqueCustomTableViewProvider()
profileProvider.itemHeight = { _ in return 80 }
profileProvider.accessoryType = .disclosureIndicator
|
Now, we have a profile cell for the settings page, considering we might use this provider on another UITableView.
We should make a Class for profileProvider.
We can inherit from UniqueCustomTableViewProvider:
class ProfileProvider: UniqueCustomTableViewProvider {
let avatarImageView = UIImageView()
let nameLabel = UILabel()
let subTitleLabel = UILabel()
init(avatar: UIImage, name: String) {
super.init()
self.itemHeight = { _ in return 80 }
self.accessoryType = .disclosureIndicator
avatarImageView.image = avatar
self.contentView.addSubview(avatarImageView)
nameLabel.text = name
self.contentView.addSubview(nameLabel)
subTitleLabel.text = "Apple ID, iCloud, iTunes & App Store"
self.contentView.addSubview(subTitleLabel)
}
}or just implement the protocol UniqueAnimatableTableViewProvider:
class ProfileProvider: UniqueAnimatableTableViewProvider {
let avatarImageView = UIImageView()
let nameLabel = UILabel()
let subTitleLabel = UILabel()
init(avatar: UIImage, name: String) {
avatarImageView.image = avatar
nameLabel.text = name
subTitleLabel.text = "Apple ID, iCloud, iTunes & App Store"
}
func onCreate(_ tableView: UITableView, cell: UITableViewCell, indexPath: IndexPath) {
cell.accessoryType = .disclosureIndicator
cell.contentView.addSubview(avatarImageView)
cell.contentView.addSubview(nameLabel)
cell.contentView.addSubview(subTitleLabel)
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath, value: ProfileProvider) -> CGFloat? {
return 80
}
}But in reality, the profile cell is placed in a section.
We can use SectionProfiler:
let profileSectionProvider = SpacingSectionProvider(
providers: [profileProvider],
headerHeight: 35,
footerHeight: 0
)
self.tableView.flix.build([profileSectionProvider]) |
Then add more providers:
let profileProvider = ProfileProvider(
avatar: #imageLiteral(resourceName: "Flix Icon"),
name: "Flix")
let profileSectionProvider = SpacingSectionProvider(
providers: [profileProvider],
headerHeight: 35,
footerHeight: 0)
let airplaneModeProvider = SwitchTableViewCellProvider(
title: "Airplane Mode",
icon: #imageLiteral(resourceName: "Airplane"),
isOn: false)
let wifiProvider = DescriptionTableViewCellProvider(
title: "Wi-Fi",
icon: #imageLiteral(resourceName: "Wifi"),
description: "Flix_5G")
let bluetoothProvider = DescriptionTableViewCellProvider(
title: "Bluetooth",
icon: #imageLiteral(resourceName: "Bluetooth"),
description: "On")
let cellularProvider = DescriptionTableViewCellProvider(
title: "Cellular",
icon: #imageLiteral(resourceName: "Cellular"))
let hotspotProvider = DescriptionTableViewCellProvider(
title: "Personal Hotspot",
icon: #imageLiteral(resourceName: "Personal Hotspot"),
description: "Off")
let carrierProvider = DescriptionTableViewCellProvider(
title: "Carrier",
icon: #imageLiteral(resourceName: "Carrier"),
description: "AT&T")
let networkSectionProvider = SpacingSectionProvider(
providers: [
airplaneModeProvider,
wifiProvider,
bluetoothProvider,
cellularProvider,
hotspotProvider,
carrierProvider
],
headerHeight: 35,
footerHeight: 0
)
self.tableView.flix.build(
[profileSectionProvider, networkSectionProvider]
)
|
Until now, we just use one provider to generate one cell. We can also create a provider for a group of cells.
let appSectionProvider = SpacingSectionProvider(
providers: [AppsProvider(apps: [
App(icon: Wallet, title: "Wallet"),
App(icon: iTunes, title: "iTunes"),
App(icon: Music, title: "Music"),
App(icon: Safari, title: "Safari"),
App(icon: News, title: "News"),
App(icon: Camera, title: "Camera"),
App(icon: Photos), title: "Photo")
])],
headerHeight: 35,
footerHeight: 35
)
self.tableView.flix.build([
profileSectionProvider,
networkSectionProvider,
appSectionProvider]
)
|
Look like good.
Actually Flix supports more build list view function, you can easily create a page with all kinds of linkage effects (such as Calendar Events, GitHub Signup). More example are available in the Example Folder.
- Please fork this project
- Implement new methods or changes。
- Write appropriate docs and comments in the README.md
- Submit a pull request.
Raise an Issue or hit me up on Twitter @Songxut.
Flix is released under an MIT license. See LICENSE for more information.