iOS开发系列之UITableView空白页面的友好提示

iOS开发过程中,我们最常用的UI控件应该是UITableView了, 它的用途当然就是用来显示一个列表的数据。那么问题来了,当这个列表的数据为空是怎么办?当然最简单的方式就是不用管它,直接就是一个空白页,作为程序员, 一般觉得这不是问题。可是你过的了你家产品经理那关吗?其实作为一个有用户思维的程序员,也应该多关注用户体验。今天我就把我自己实现的空白页面的友好提示功能和大家分享下。

实际效果图如下
空白页

一、实现原理

  • 创建一个自定义UITableViewCell来显示空白页,我这里叫EmptyInfoTableViewCell
  • 在你的ViewController里面的ViewDidLoad方法中注册你的EmptyInfoTableViewCell
1
tableView.register(UINib(nibName: "EmptyInfoTableViewCell", bundle: nil), forCellReuseIdentifier: "EmptyInfoTableViewCell")
  • 实现UITableViewDataSource
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
guard let products = self.products, products.count > 0 else {
        return 1
    }
    return products.count
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let products = self.products, products.count > 0 else {
        tableView.separatorStyle = .none
        return emptyInfoCellForRowAtIndexPath(indexPath: indexPath)
    }
    let cell = tableView.dequeueReusableCell(withIdentifier: "ProductCell", for: indexPath)

    tableView.separatorStyle = .singleLine

    let product = products[indexPath.row]
        
    cell.textLabel?.text = product
        
    return cell
}

override func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
    guard let products = self.products, products.count > 0 else {
        return false
    }
    return true
}

override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) {
    guard let products = self.products, products.count > 0 else {
        return
    }
    if editingStyle == .delete {
        self.products?.remove(at: indexPath.row)
        tableView.reloadData()
    }
 }
  • UITableViewDelegate
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
guard let products = self.products, products.count > 0 else {
return tableView.bounds.size.height
}
return super.tableView(tableView, heightForRowAt: indexPath)
}

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
guard let products = self.products, products.count > 0 else {
return
}

let productAtIndexPath = products[indexPath.row]

// do what you want
}
  • 实现你的空白页里面的Action的代理方法
1
2
3
4
5
extension AppleProductsTableViewController: EmptyInfoTableViewCellDelegate {
    func emptyInfoTableViewCellDidTapInfoButton(cell: EmptyInfoTableViewCell) {
        print("Tapped Create Apple Product Now Button")
    }
}

二、具体代码链接

https://github.com/derekcoder/EmptyDataSetInfo