dianqk / flix

iOS reusable form library in Swift.

Flix is a flexible iOS framework for creating dynamic forms with UITableView or UICollectionView.

Features

• 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 UITableView and UICollectionView

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.

Preview

Requirements

• Xcode 10.2+
• Swift 5+
• RxSwift 5.0+
• RxDataSources 4.0+

Installation

CocoaPods

pod 'Flix', '~> 4.0'

Principle

Each provider will generate a number of nodes (cells), then combines those providers according to the sequence.

Tutorial - A Simple Settings Page

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 let avatarImageView = UIImageView( image: #imageLiteral(resourceName: "Flix Icon") ) profileProvider.contentView.addSubview(avatarImageView) let nameLabel = UILabel() nameLabel.text = "Flix" profileProvider.contentView.addSubview(nameLabel) let subTitleLabel = UILabel() subTitleLabel.text = "Apple ID, iCloud, iTunes & App Store" profileProvider.contentView.addSubview(subTitleLabel) self.tableView.flix.build([profileProvider])

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.

Contributing

1. Please fork this project
2. Implement new methods or changes。
3. Write appropriate docs and comments in the README.md
4. Submit a pull request.

Contact

Raise an Issue or hit me up on Twitter @Songxut.

License

Flix is released under an MIT license. See LICENSE for more information.

flix's Issues

I cannot understand why define the type of provider.sectionHeight is ((UITableView) -> CGFloat)?

I always use the following code
provider.sectionHeight = { _ in return 180 }
Why not define provider.sectionHeight is CGFloat? so I could write like this:
provider.sectionHeight = 180

How can I extend SingleUITableViewCellProvider and UICollectionViewDataSource?

I want to add a collectionView in SingleUITableViewCellProvider.

Why my `tap action` is not working?

I write the code in viewDidLoad function at my viewController:

let provider = WNFlixAddButtonProvider()
 provider.tap.subscribe(onNext: { _ in
        print("Ooops")
}).disposed(by: self.disposeBag)
tableView.flix.build([provider])

And WNFlixAddButtonProvider is just based on UniqueCustomTableViewProvider:

class WNFlixAddButtonProvider: UniqueCustomTableViewProvider {
        
    let addButton = UIButton().then {
        $0.backgroundColor = .red
        $0.setTitle("+ Work Experience", for: .normal)
        $0.setTitleColor(UIColor.blue, for: .normal)
        $0.titleLabel?.font = Specs.font.regular
    }
    
    override init() {
        super.init()
        
        contentView.addSubview(addButton)
        
        addButton.snp.makeConstraints { (make) in
            make.edges.equalToSuperview()
        }
    }
}

When I run the project, the UI look's perfect, but when I tap the addButton, it's not working.

I find some code at: Flix/Example/Example/LoginViewController.swift, the tap action works:

loginProvider.tap
            .withLatestFrom(isVerified).filter { $0 }
            .subscribe(onNext: { [weak self] _ in
                let alert = UIAlertController(title: "Success", message: nil, preferredStyle: .alert)
                alert.addAction(UIAlertAction(title: "OK", style: .default, handler: { (_) in
                    self?.navigationController?.popViewController(animated: true)
                }))
                self?.present(alert, animated: true, completion: nil)
            })
            .disposed(by: disposeBag)

Some code I miss?

Doesn't conform to protocol NSObjectProtocol

Thank you for your open source library, I have benefited a lot.

I've been using Objective-C for years, but I recently started using Swift in my work, so I do not know deep about it.

When I integrated a library (FSPagerView) I found that I needed to implement the ' NSObjectProtocol ' protocol, which I believe is the problem with this library interacting with Objective-C, and I want to ask if there is any suggestion? Thanks.

Segmentation fault: 11 While emitting IR SIL function ...

Maybe you will find Segmentation fault: 11 While emitting IR SIL function ... error info when use AnimatableCollectionViewProvider. This look like Swift bug.

This issue will closed when this error go away.

This code will cause Segmentation fault: 11:

class TestRadioProvider<Option: Equatable & StringIdentifiableType>: AnimatableCollectionViewProvider {
    func configureCell(_ collectionView: UICollectionView, cell: RadioCollectionViewCell, indexPath: IndexPath, value: Value) {
    }
    func createValues() -> Observable<[Value]> {
        return Observable.empty()
    }
    typealias Cell = RadioCollectionViewCell
    typealias Value = Option
}

There are some workaround methods:

add createAnimatableNodes:

class TestRadioProvider<Option: Equatable & StringIdentifiableType>: AnimatableCollectionViewProvider {
    func configureCell(_ collectionView: UICollectionView, cell: RadioCollectionViewCell, indexPath: IndexPath, value: Value) {
    }
    func createValues() -> Observable<[Value]> {
        return Observable.empty()
    }
    typealias Cell = RadioCollectionViewCell
    typealias Value = Option
    func createAnimatableNodes() -> Observable<[IdentifiableNode]> {
        let providerIdentity = self._flix_identity
        return createValues()
            .map { $0.map { IdentifiableNode(providerIdentity: providerIdentity, valueNode: $0) } }
    }
}

or add a model to warp this Option:

struct SegmentationFault11Warp<Value: Equatable & StringIdentifiableType>: Equatable & StringIdentifiableType {
    var identity: String {
        return value.identity
    }
    let value: Value
}

class TestRadioProvider<Option: Equatable & StringIdentifiableType>: AnimatableCollectionViewProvider {
    func configureCell(_ collectionView: UICollectionView, cell: RadioCollectionViewCell, indexPath: IndexPath, value: Value) {
    }
    func createValues() -> Observable<[Value]> {
        return Observable.empty()
    }
    typealias Cell = RadioCollectionViewCell
    typealias Value = SegmentationFault11Warp<Option>
}

How does Flix handle scroll ?

TL;DR
How does Flix handle scroll activity ? or does it provide sth like didScroll, didEndScroll, etc. ?

More:
When I was trying to figure the above out, more things came to me:
I found that if I set collectionView to current viewcontroller where all cells are built for, then all cells are messed up, so guessing the delegate for either tableview/collectionview is set somewhere, but cant seem to find it.
The actual delegate be set to is: RxCocoa.RxCollectionViewDelegateProxy , any idea to port that to current view controller where we need to build nodes/cells ?

Build Failed Task failed with exit code 65:

*** Building scheme "Flix" in Flix.xcworkspace
Build Failed
Task failed with exit code 65:
/usr/bin/xcrun xcodebuild -workspace ... -scheme Flix -configuration Release -derivedDataPath ../org.carthage.CarthageKit/DerivedData/9.1_9B55/Flix/1.0.0 -sdk iphoneos ONLY_ACTIVE_ARCH=NO BITCODE_GENERATION_MODE=bitcode CODE_SIGNING_REQUIRED=NO CODE_SIGN_IDENTITY= CARTHAGE=YES archive -archivePath ./ SKIP_INSTALL=YES GCC_INSTRUMENT_PROGRAM_FLOW_ARCS=NO CLANG_ENABLE_CODE_COVERAGE=NO (launched in /Users/..)

i use xcode 9.1 with carthage update --platform iOS --no-use-binaries
what i'm missing?

RxSwift 5

It would be nice to support RxSwift 5.

After network request, tableView build the providers will offset some distance.

After network request in viewDidLoad function, I want to build the providers according to the network data.

// <NSThread: 0x170076e40>{number = 1, name = main}
let provider = WNFlixTitleTextFieldProvider(title: "Title", placeholder: "Placeholder")
self.tableView.flix.build([provider])

But if I just write this code in viewDidLoad function rather than after network request, it's good:

Align all nodes/CollectionViewCells from bottom ?

HEy Dian,
Is there is built-in support that can align collectionview cells(providers) from bottom ?
(By default, when you add a new provider/cell, it will be added from top of the screen and following last provider/cell. My quest here is if there is a built-in support or easy way to achieve align from bottom: first cell go to bottom of the screen and second following that on top of it ? )

Is there a way to use `UniqueCommentTextProvider` in `SettingsViewController`

First, Great work!!
New to this, and have a quick question regarding the example provided:

In Do Not Disturb VC, there is this UniqueCommentTextProvider, how can that be used in SettingsViewController ? (it does not allow now as the former is a collection view cell, while the latter is mainly on a tableview) - so the question could also be: how to write a similar UniqueCommentTextProvider for collectionviewcell ?
Thanks ahead!!

SingleCollectionViewProvider<Cell: UICollectionViewCell> Does not conform protocol UniqueAnimatableCollectionViewProvider - Swift compiler error segmentation fault 11

SingleCollectionViewProvider<Cell: UICollectionViewCell> Does not conform protocol "UniqueAnimatableCollectionViewProvider" in UniqueCustomCollectionViewProvider.swift - it used compile with no problem, any idea on why this is happening lately on 2.0.0 release ? @DianQK

Q&A

1. Can I make a UIViewController as Provider?
2. Should I know RxSwift, RxCocoa and RxDataSources?

Add `GroupProvider`

• Add TableViewGroupProvider
• Add AnimatableTableViewGroupProvider
• Add CollectionViewGroupProvider
• Add AnimatableCollectionViewGroupProvider

请问和 IGListkit 区别是什么

依赖5个其它库

说实话,依赖一个库的框架都不敢用,哈哈,亲是北京的~~

Typo in Flix/Flix/Builder/AnimatableCollectionViewBuilder.swift

Not a issue, but since I really like and use Flix heavily, want to point out a typo in the file and contribute a tiny :), cheers 👍

line 19

    let delegeteProxy = CollectionViewDelegateProxy()

guess you meant delegateProxy

Add in Demo/Guide in main README showcasing how to dynamically add in new CellProvider

Often times in real app, there are async requests return after viewDidLoad, and we want to update UI upon that return. In this particular context of Flix, main README does not document how to dynamically add in new cellProvider, but it seems there are ways to achieve that with Flix. So it would be nice to add a new section for that.

@DianQK Wdyt ?

XCode 10.2 Build Error

After updating to xcode 10.2 I'm receiving the following error and it prevents me from building

pod search flix

not support cocoapods?

Xcode 10 Swift 4.2 build failed

This is my Podfile:

But when I build the project, error happens: