avatar

UIKit-Eureka 自定义Row

本文链接

准备

我们需要定义一个UserInfoRow

类型需要遵守Equatable协议

struct User: Equatable {
var name: String
var email: String
var dateOfBirth: Date
var pictureUrl: URL?
}

func ==(lhs: User, rhs: User) -> Bool {
return lhs.name == rhs.name
}

定义Cell

因为Eureka里Row里其实是一个继承自UITableViewCell的Cell,先要定义Cell

所有Cell需要用final标记并且遵从CellType协议

final class UserInfoCell: Cell<User>, CellType {
var userImageView = UIImageView()
var nameLabel = UILabel()
var emailLabel = UILabel()
var dateLabel = UILabel()

required init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
}

override func draw(_ rect: CGRect) {

userImageView.frame = CGRect(x: rect.midX, y: 0, width: rect.width / 2, height: rect.height)
addSubview(userImageView)

nameLabel.frame = CGRect(x: 0, y: 0, width: rect.width / 2, height: rect.height / 3)
addSubview(nameLabel)

emailLabel.frame = CGRect(x: 0, y: rect.height / 3, width: rect.width / 2, height: rect.height / 3)
addSubview(emailLabel)

dateLabel.frame = CGRect(x: 0, y: rect.height / 3 * 2, width: rect.width / 2, height: rect.height / 3)
addSubview(dateLabel)

}

required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}

定义Row

像Cell一样,Row也需要用final标记并且遵从RowType协议

final class UserInfoRow: Row<UserInfoCell>, RowType {
required init(tag: String?) {
super.init(tag: tag)
//cellProvider = CellProvider<UserInfoCell>(nibName: "UserInfoCell")
// 如果Cell不是使用StoryBoard布局,不需要提供CellProvider
}
}

修改Cell的方法

大体模型已经搭建好了,但是数据如何呈现在视图上并没有定义,我们需要重写Cell的setup(实例化单元格后调用)和update(每次刷新单元格时调用)方法

override func setup() {
super.setup()
// 取消选定状态
selectionStyle = .none

// 修改ImageView的参数
userImageView.contentMode = .scaleAspectFill
userImageView.clipsToBounds = true

// 定义字体

nameLabel.font = .systemFont(ofSize: 18)
emailLabel.font = .systemFont(ofSize: 13.3)
dateLabel.font = .systemFont(ofSize: 13.3)

// set the textColor for our labels
for label in [emailLabel, dateLabel, nameLabel] {
label.textColor = .gray
}

// 定义我们需要的Cell高度,height是Cell的属性
height = { return 94 }

// 背景颜色
backgroundColor = UIColor(red:0.984, green:0.988, blue:0.976, alpha:1.00)
}

override func update() {
super.update()

// UITableView有一个默认的textLabel, 使其不显示
// 在Cell<T>的update方法中 textLabel显示row.title, detailLabel显示row.value
// 而我们并不需要这两个label, 所以将其设置为nil
textLabel?.text = nil
detailTextLabel?.text = nil

// 获取值
guard let user = row.value else { return }

// 设置UIImage
if let url = user.pictureUrl, let data = try? Data(contentsOf: url) {
userImageView.image = UIImage(data: data)
} else {
userImageView.image = UIImage(named: "placeholder") // 这里placeholder自己添加至Assets中
}

// 设置文本
emailLabel.text = user.email
nameLabel.text = user.name
let dateFormatter = DateFormatter()
dateFormatter.timeStyle = .medium
dateFormatter.dateStyle = .medium
dateLabel.text = dateFormatter.string(from: user.dateOfBirth)

}

显示效果

image-20200706221816115

文章作者: X Mεl0n
文章链接: http://www.zrzz.site/2020/07/06/UIKit-Eureka-%E8%87%AA%E5%AE%9A%E4%B9%89Row/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 X Mεl0n | 随手记

评论