基于Storyboard 使用 UITableView 教程

Storyboard 创建 Table View Controller

搜索并拖拽一个 Table View Controller到 Storyboard上

image.png

创建一个类继承 UITableViewController，填写数据做简单的测试

class HomeMessageViewController: UITableViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    var list = ["item1","item2","item3","item4","item5","item6"]
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // Identifier 是用来作为可重用的标志
        let cellIdentifier = "cell"
        // 查找是否有可重复的Cell
        var cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier)
        // 如果没有可重用的Cell就创建一个新的
        if cell == nil {
            //系统默认一个有四种样式 .default .subtitle .value1 .value2
            cell = UITableViewCell(style: .default, reuseIdentifier: cellIdentifier)
        }
        cell?.accessoryType = .none
        let row = indexPath.row
        cell?.textLabel?.text = list[row]
        return cell!
    }
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return list.count
    }
}

Storyboard 上关联我们刚刚创建的类

image.png

使用自带样式

我们现在是使用自带样式来实现，所以我们就不需要做任何 Storyboard 的操作了。

TableView 自带有四种样式

var cell = UITableViewCell(style: .default, reuseIdentifier: "userInfo")

1. default 默认样式，只有图标和主标题。
2. subtitle 有图标、主标题和副标题（副标题在主标题的下面）
3. value1 有主标题和副标题，主标题左对齐，如果有副标题就右对齐，可以有图标。
4. value2 有主标题和副标题，主标题和副标题居中对齐，无图标。

image.png

组成样式

cell?.accessoryType = .none

1. none 没有拓展图标
2. checkmark 选中标志，表示该行被选中，图标为 √
3. detailButton 细节按钮，图标为“!”，
4. detailDisclosureButton 细节按钮，图标为“!”，同时也有拓展指示器

5. disclosureIndicator 拓展指示器，触摸切换下一个视图，图标为 >

   
   image.png

分组

class HomeMessageViewController: UITableViewController {
    var listArray = [[String]]()
    override func viewDidLoad() {
        super.viewDidLoad()
        listArray.append(["item1","item2","item3"])
        listArray.append(["item4","item5"])
        listArray.append(["item6","item7"])
    }
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cellIdentifier = "cell"
        var cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier)
        if cell == nil {
            cell = UITableViewCell(style: .default, reuseIdentifier: cellIdentifier)
        }
        cell?.textLabel?.text = listArray[indexPath.section][indexPath.row]
        return cell!
    }
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // 返回每个分组里面的Cell数量
        return listArray[section].count
    }
    override func numberOfSections(in tableView: UITableView) -> Int {
        // 返回分组的数量
        return listArray.count
    }
    override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        // 返回分组头部的标题
        return "section \(section)"
    }
}

运行

image.png

添加索引

索引也是基于分组来实现，只需要在上述代码添加一个sectionIndexTitles方法，返回索引的标题即可。

    override func sectionIndexTitles(for tableView: UITableView) -> [String]? {
        let titles = ["A","B","C"]
        return titles
    }

image.png

下拉刷新

class HomeMessageViewController: UITableViewController,UISearchBarDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()
        let rc = UIRefreshControl()
        rc.attributedTitle = NSAttributedString(string: "下拉刷新")
        rc.addTarget(self, action: #selector(refreshTableView), for: .valueChanged)
        self.refreshControl = rc
    }
    @objc func refreshTableView(){
        let df = DateFormatter(withFormat: "yyyy-MM-dd HH:mm:ss", locale: "zh")
        logs.append(df.string(from: Date()))
        self.tableView.reloadData()
        self.refreshControl?.endRefreshing()
    }
    var logs = [String]()
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // Identifier 是用来作为可重用的标志
        let cellIdentifier = "cell"
        // 查找是否有可重复的Cell
        var cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier)
        // 如果没有可重用的Cell就创建一个新的
        if cell == nil {
            cell = UITableViewCell(style: .default, reuseIdentifier: cellIdentifier)
        }
        cell?.textLabel?.text = logs[indexPath.row]
        return cell!
    }
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return logs.count
    }
}

添加搜索栏

只需要拖拽一个UISearchBar到页面即可

image.png

class HomeMessageViewController: UITableViewController,UISearchBarDelegate {
    @IBOutlet weak var searchBar: UISearchBar!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.searchBar.delegate = self
        // 键盘会当tableView上下滚动的时候自动收起
        self.tableView.keyboardDismissMode = .onDrag
    }
    // 点击键盘上的搜索按钮
    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
        // 模拟搜索
        display.removeAll()
        display.append("apple")
        display.append("pear")
        self.tableView.reloadData()
    }
    // 点击搜索栏取消按钮
    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        display = source
        self.tableView.reloadData()
        
    }
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        if searchText.count == 0 {
            display = source
            self.tableView.reloadData()
        }
    }
    
    
    var source = ["pear","peach","apple","grape","banana","cherry"]
    var display = ["pear","peach","apple","grape","banana","cherry"]
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // Identifier 是用来作为可重用的标志
        let cellIdentifier = "cell"
        // 查找是否有可重复的Cell
        var cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier)
        // 如果没有可重用的Cell就创建一个新的
        if cell == nil {
            //系统默认一个有四种样式 .default .subtitle .value1 .value2
            cell = UITableViewCell(style: .default, reuseIdentifier: cellIdentifier)
        }
        cell?.accessoryType = .none
        let row = indexPath.row
        cell?.textLabel?.text = display[row]
        return cell!
    }
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return display.count
    }
}