Flix 为 iOS 动态表单提供了足够优雅的解决方案。你可以用它构建任何(类)表单页面。
每个 Provider 会生成若干个 Node,Flix 按照组合的 Provider 顺序依次生成全部的 Cell。
- pod 'Flix', '~> 0.7.0'
我们可以非常轻松地使用 Flix 构建一个登录页面:
只需要四个步骤:
创建一个登录框:
- let usernameTextField = UITextField()
- usernameTextField.placeholder = "用户名"
- usernameTextField.keyboardType = .asciiCapable
-
- let usernameProvider = UniqueCustomTableViewProvider()
- usernameProvider.contentView.addSubview(usernameTextField)
- // 添加你的布局方案
- // usernameTextField.translatesAutoresizingMaskIntoConstraints = false
- // usernameTextField.leadingAnchor.constraint(equalTo: usernameProvider.contentView.leadingAnchor, constant: 15).isActive = true
- // usernameTextField.topAnchor.constraint(equalTo: usernameProvider.contentView.topAnchor).isActive = true
- // usernameTextField.trailingAnchor.constraint(equalTo: usernameProvider.contentView.trailingAnchor, constant: -15).isActive = true
- // usernameTextField.bottomAnchor.constraint(equalTo: usernameProvider.contentView.bottomAnchor).isActive = true
创建一个密码输入框:
- let passwordTextField = UITextField()
- passwordTextField.placeholder = "密码"
- passwordTextField.isSecureTextEntry = true
- let passwordProvider = UniqueCustomTableViewProvider()
- passwordProvider.contentView.addSubview(passwordTextField)
- // 添加你的布局方案
- // passwordTextField.translatesAutoresizingMaskIntoConstraints = false
- // passwordTextField.leadingAnchor.constraint(equalTo: passwordProvider.contentView.leadingAnchor, constant: 15).isActive = true
- // passwordTextField.topAnchor.constraint(equalTo: passwordProvider.contentView.topAnchor).isActive = true
- // passwordTextField.trailingAnchor.constraint(equalTo: passwordProvider.contentView.trailingAnchor, constant: -15).isActive = true
- // passwordTextField.bottomAnchor.constraint(equalTo: passwordProvider.contentView.bottomAnchor).isActive = true
创建一个登录按钮:
- let loginTextLabel = UILabel()
- loginTextLabel.text = "登录"
- loginTextLabel.textAlignment = .center
- let loginProvider = UniqueCustomTableViewProvider()
- loginProvider.contentView.addSubview(loginTextLabel)
- // 添加你的布局方案
- // loginTextLabel.translatesAutoresizingMaskIntoConstraints = false
- // loginTextLabel.leadingAnchor.constraint(equalTo: loginProvider.contentView.leadingAnchor).isActive = true
- // loginTextLabel.topAnchor.constraint(equalTo: loginProvider.contentView.topAnchor).isActive = true
- // loginTextLabel.trailingAnchor.constraint(equalTo: loginProvider.contentView.trailingAnchor).isActive = true
- // loginTextLabel.bottomAnchor.constraint(equalTo: loginProvider.contentView.bottomAnchor).isActive = true
- // 添加你的点击事件
- // loginProvider.tap...
最后将以上三个 Provider 按顺序组装起来:
- self.tableView.flix.build([usernameProvider, passwordProvider, loginProvider])
一个使用
的登录页面就完成了。
- UITableView
/
- UICollectionView
- UITableView
Flix 专注于构建
/
- UICollectionView
的 Cell ,不关心视图的布局、业务的逻辑。于是你可以很轻松地使用 Flix 构建定制的页面。
- UITableView
因为
和
- CollectionViewProvider
几乎一样,我们全部以
- TableViewProvider
的构建解释每一个 Provider 的使用方法。
- UITableView
你也可以在示例中找到全部的
使用示例。
- CollectionViewProvider
注意:所有的
生成的 Value (Node) 都需要服从协议
- AnimatableProvider
和
- StringIdentifiableType
。
- Equatable
用于描述一个 Value(Node)是否为同一个 Value。
- StringIdentifiableType
用于描述同一个 Value 是否有更新。
- Equatable
使用
- UniqueCustomTableViewProvider
当构建一个诸如登录页面、个人页或设置页时,我们希望某些 Cell 不需要被重用(有时这个 Cell 在整个
中仅存在一个),那么使用
- UITableView
可以完全忽略重用的问题(通过在
- UniqueCustomTableViewProvider
中注册一个全局唯一的 Cell)。
- UITableView
中的
- UniqueCustomTableViewProvider
类似于
- contentView
中的
- UITableViewCell
,你可以直接添加对应的视图到
- contentView
中。
- contentView
用于返回 Cell 的高度,
- itemHeight
是该
- tap
/
- Provider
的点击事件。
- Cell
如果你想完全定制一个唯一 Cell ,你也可以通过服从协议
完成。
- UniqueAnimatableTableViewProvider
和
- AnimatableTableViewMultiNodeProvider
- AnimatableTableViewProvider
两个
都支持局部更新
- Provider
(即更新时不调用
- UITableView
)。
- reloadData
在
方法中实现你的 Provider 生成 Node 的方法。
- genteralValues() -> Observable<[Value]>
和
- AnimatablePartionSectionTableViewProvider
- AnimatableTableViewSectionProvider
和
- AnimatablePartionSectionTableViewProvider
提供了构建 Section 的支持。
- AnimatableTableViewSectionProvider
用于构建 Section 的 Header 和 Footer,
- AnimatablePartionSectionTableViewProvider
用于组合
- AnimatableTableViewSectionProvider
和
- AnimatablePartionSectionTableViewProvider
。
- AnimatableProvider
的使用类似于
- AnimatablePartionSectionTableViewProvider
,在使用时,你需要注意这个
- AnimatableTableViewProvider
是 Header 还是 Footer。
- Provider
比如:
- let footerProvider = UniqueCustomTableViewSectionProvider(tableElementKindSection: .header)
- let sectionProvider = AnimatableTableViewSectionProvider(
- providers: [],
- footerProvider: footerProvider
- )
就是一个错误的用法。
通过调用
或
- tableView.flix.build(_:)
构建全部的 Cell。
- tableView.flix.animatable.build(_:)
中传入的 Provider 必须都是
- tableView.flix.animatable.build(_:)
。
- AnimatableProvider
当你需要调换 provider 的是顺序时,可以直接再次调用
方法,
- build
其余详细使用方法,可以参考 Example 中的一些示例。
来源: https://www.ctolib.com/DianQK-Flix.html