如何在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<User>, 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 = 5
        
        nameLabel.font = .systemFont(ofSize: 18)
        nameLabel?.textColor = .gray
        
        emailLabel.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<UserInfoTableViewCell>, RowType {
    required init(tag: String?) {
        super.init(tag: tag)
        cellProvider = CellProvider<UserInfoTableViewCell>(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 = user
            }
            +++ Section("其他信息")
            <<< PhoneRow {
                $0.title = "手机号："
        }
    }

}

最终效果图如下：

其实这个库用起来非常简单，多花点时间看一下文档就好了！

本文 demo 代码 >>

完

如果有错误的地方，欢迎指正！谢谢！

欢迎加入我管理的Swift开发群：536353151。