前言
Eureka
是一个纯Swift
库,它能帮你快速优雅地创建一个TableView
。这个库本身也提供了大量内置的不同功能的Cell
,使用上也很简单。如果内置的Cell
样式或功能不能满足需要,你也可以自定义Cell
。
使用Eureka设置TableView
的代码大概是下面这样:
form +++ Section()
<<< LabelRow() {
$0.title = "LabelRow"
$0.value = "Default Value"
}.cellSetup({ (cell, row) in
cell.accessoryType = .disclosureIndicator
}).onCellSelection({ (cell, row) in
print("cell selection")
})
本文主要介绍Eureka
的基本使用和自定义Cell
的步骤。你可以在这里查看本文的Demo。
基本使用
Eureka
的基本使用主要是三步
- 1. 新建
ViewController
并将ViewController
设置为FormViewController
的子类 - 2. 添加
Section
- 3. 添加
Row
新建ViewController
显示tableView
首先得有一个控制器,这里我们新建一个控制器并将它设置成FormViewController
的子类,如下所示:
class ViewController: FormViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
}
FormViewController
本身是UIViewController
的子类,而且Eureka
框架已经在其中添加和设置好了tableView
,所以我们开发时不用操心布局,仅仅关注交互逻辑就可以了。
添加Section
FormViewController
里tableView
的style
属性值为.grouped
,这里我们添加多少个Section
就会自动生成多少个组,添加语法如下:
form +++ Section()
有的人看到这里或许有点奇怪,+++
是个什么语法,好像没见过啊。其实这是Eureka
使用了Swift自定义运算符的特性,定义+++
这个中缀运算符,它在源文件里是这么定义的:
infix operator +++ : FormPrecedence
上面这个添加Section
的语法定义是这样的:
@discardableResult
public func +++ (left: Form, right: Section) -> Form {
left.append(right)
return left
}
这里Form
遵从了RangeReplaceableCollection
这个协议,重写了append
这个方法,具体实现有兴趣的可以去看源码。
添加Row
Row
的创建和设置是所有步骤的核心,所有的交互逻辑都是在这里完成的。Eureka
内置了数十种常用的Row
,这里我们添加最常用的三种Row
:
form +++ Section()
<<< LabelRow() {
$0.title = "LabelRow"
$0.value = "Default Value"
}.cellSetup({ (cell, row) in
cell.accessoryType = .disclosureIndicator
}).onCellSelection({ (cell, row) in
print("cell selection")
})
<<< TextRow(tag: "TextRow")
.cellSetup({ (cell, row) in
row.tag = "TextRow"
row.title = "TextRow"
row.placeholder = "Input your message"
})
.cellUpdate({ (cell, row) in
print("cell update")
})
<<< SwitchRow() {
$0.tag = "SwitchValue"
$0.title = "SwitchRow"
$0.value = true
}.onChange({ (row) in
print("value changed: \(row.value ?? false)")
})
<<<
同样是Eureka
自定义的中缀运算符,作用是将Row
添加到对应的Section
中。在上面的代码中,我是在Row
的生成方法的闭包中为title
和value
赋值,这个操作同样也可以放在cellSetup
方法中(这个操作只会在Row
创建时调用),效果是一样的。需要动态刷新的值需要在cellUpdate
方法中设置。Eureka
同时也提供了onCellSelection
和onChange
这样的响应方法,在里面定义其实响应逻辑即可。
至此,Eureka
的基本使用就全部完成了。如果Eureka
框架自带的Row
已经能完全满足你的需求,就不需要往下看了。但如果你不满足于内置Row
,那么我们继续看看如何自定义Cell
和Row
自定义Cell
这里我们来定义一个模拟软件更新的Cell
,效果图如下:
定义结构体
首先,我们需要一个结构体Software
方便为Cell
赋值:
enum UpdateState: Int {
case toUpdate = 0
case updating
case alreadyNewest
}
struct Software: Equatable {
var name: String
var updateState: UpdateState
}
func == (lhs: Software, rhs: Software) -> Bool {
return lhs.name == rhs.name
}
这里有一点需要注意的是,定义的类或者结构体必须遵从Equatable
协议,否则在自定义Cell
里使用时会报错。
定义Cell
定义好了结构体,接下来就是实现Cell
部分。
自定义Eureka
的Cell
和自定义普通UITableView
的Cell
一样,首先要选择使用纯代码创建还是xib
创建。这里我们使用xib
的方式。新建自定义Cell
,如下图:
自定义布局,Cell
连线,UpdateCell
的代码如下:
final class UpdateCell: Cell, CellType {
@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var updateButton: UIButton!
@IBOutlet weak var aniContainerView: UIView!
@IBOutlet weak var noNeedUpdateLabel: UILabel!
private var shapeLayer = CAShapeLayer()
override func setup() {
selectionStyle = .none
height = { return 44 }
//这里省略布局代码
}
override func update() {
guard let software = row.value else {
return
}
titleLabel.text = software.name
updateUI(software.updateState)
}
}
在创建UpdateCell
类的时候,有几点需要注意:
- 指明为
Cell
赋值时使用的类 - 遵从
CellType
协议 - 指定
Cell
的高度
在上面的代码的,Setup
方法只会在Cell
创建时调用一次,可以在这里写布局代码,而Update
方法会在每次刷新的时候调用,可以在这里给Cell
的subViews
赋值。
定义Row
接下来还需要自定义Row
,从属于上面我们刚刚定义的Cell
,并在里面加载xib
:
final class UpdateRow: Row, RowType {
required init(tag: String?) {
super.init(tag: tag)
cellProvider = CellProvider(nibName: "UpdateCell")
}
}
添加自定义Cell
到Section
中
自定义Cell
创建完成后,就可以像使用框架中自带的Row
一样来使用我们的自定义Row
:
<<< UpdateRow() {
$0.value = Software(name: "My Software", updateState: .toUpdate)
}
总结
其实Eureka
的使用比较简单,熟练操作后会是快速构建UITableView
的利器。本文的Demo可以在这里查看。