如何在Eureka中自定义Cell 如何在Eureka中自定义Cell

【如何在Eureka中自定义Cell】在 iOS 开发过程中，我们经常会遇到一些表单界面。如果表单界面包含大量的数据，自己去实现的话通常要花费比较多的时间。而 GitHub - xmartlabs/Eureka: Elegant iOS form builder in Swift 这个第三方库就是为处理表单问题而生，它可以帮助我们非常容易的实现复杂的表单，节省大量的时间。具体介绍可以查看这个库的 readme，也可以直接查看我翻译的中文文档Eureka/README_CN.md at master · xmartlabs/Eureka · GitHub。
自定义 Cell 的需求无处不在。Eureka 自带了很多类型的 Cell（具体查看文档），并且 Eureka 社区Eureka Community · GitHub还有其他开发者写的一些Cell。但是就算有再多已有的自定义 Cell，也无法满足我们的需求，所以我们也要学会自定定义自己的 Cell。本文的目的就是详细介绍在使用 Eureka 过程中，如何自定义 Cell。
在本例子中，我们将创建一个 UserInfoRow ，显示用户的头像、用户名和邮件。
User 我们首先创建一个简单的 User 模型，如下：

struct User { var name: String var email: String var avatarUrl: URL? }extension User: Equatable { static func ==(lhs: User, rhs: User) -> Bool { return lhs.email == rhs.email } }

UserInfoTableViewCell 然后我们在项目中创建一个 cell，命名为 UserInfoTableViewCell，并勾选同时创建 xib 文件：

文章图片
然后在 xib 中添加所需控件，具体界面信息如下：

文章图片
在 UserInfoTableViewCell.swift 中，我们要让 UserInfoTableViewCell 继承自 Eureka 的泛型 Cell，并且泛型的具体类型为我们刚刚创建的 User类型。另外，所有的自定义 Cell，必须遵循 CellType协议。代码如下：

final class UserInfoTableViewCell: Cell, CellType {@IBOutlet weak var avatarImageView: UIImageView! @IBOutlet weak var nameLabel: UILabel! @IBOutlet weak var emailLabel: UILabel!override func setup() { super.setup()selectionStyle = .none backgroundColor = UIColor(red:0.984, green:0.988, blue:0.976, alpha:1.00)avatarImageView.contentMode = .scaleToFill avatarImageView.clipsToBounds = true avatarImageView.layer.cornerRadius = 5nameLabel.font = .systemFont(ofSize: 18) nameLabel?.textColor = .grayemailLabel.font = .systemFont(ofSize: 13) emailLabel?.textColor = .gray// 设置 cell 的高度 height = { 94 } }override func update() { super.update()guard let user = row.value else { return }if let url = user.avatarUrl, let data = try? Data(contentsOf: url) { avatarImageView.image = UIImage(data: data) } else { avatarImageView.image = UIImage(named: "avatar_placeholder") }nameLabel.text = user.name emailLabel.text = user.email } }

在代码中，我们还实现一些必须的方法：

setup(): 在 cell 初始化完成后调用，一般在这个方法做UI的设置，只执行一次。
update(): 在 cell 每次刷新的时候调用，也就是在我们自己实现表单时，在 tableview 的数据源方法 cellForRowAtIndexPath时调用。

UserInfoRow 在 Eureka 中，一个Cell对应一个Row。所以我们还需要创建一个Row，我们把它叫做 UserInfoRow。UserInfoRow要继承自 Eureka 的泛型 Row，并且泛型的具体类型为 UserInfoTableViewCell。另外，所有的自定义 Row，必须遵循 RowType协议。代码如下：

final class UserInfoRow: Row, RowType { required init(tag: String?) { super.init(tag: tag) cellProvider = CellProvider(nibName: "UserInfoTableViewCell") } }

我们还实现了 RowType协议指定的一个初始化方法。在初始化方法中，给 cellProvider 赋值，告诉 Eukera 我们想通过名为 “UserInfoTableViewCell” 的 xib 文件来创建 Cell。如果我们使用纯代码的形式创建Cell，就不需要给 cellProvider 赋值。
添加表单在需要显示自定义 cell 的 viewcontroller 中，制作表单：

class MainViewController: FormViewController {override func viewDidLoad() { super.viewDidLoad() title = "Custom Cells"let url = URL(string: "http://pic4.nipic.com/20091108/2904378_211137045663_2.jpg")! let user = User( name: "Lebron", email: "lebron@test.com", avatarUrl: url)form +++ Section() <<< UserInfoRow { row in row.value = https://www.it610.com/article/user } +++ Section("其他信息") <<< PhoneRow { $0.title = "手机号：" } }}

最终效果图如下：