27.UITableView初探

UITableView

UITableView是iOS中使用非常常用的控件,它是一个列表控件, 下面我们学习如何使用它

1. UITableView的创建

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        let tableView = UITableView(frame: self.view.bounds, style: UITableViewStyle.Plain)
        tableView.dataSource = self
        tableView.delegate = self
        // 创建一个可重用的cell
        tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "mycell")
        self.view.addSubview(tableView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


    // MARK: - UITableViewDataSource

    // MARK: 返回分组数
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 10
    }

    // MARK: 返回行数
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 3
    }


    // MARK: 返回显示的内容
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        var cell = tableView.dequeueReusableCellWithIdentifier("mycell")
        if cell == nil {
            cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "mycell")
        }

        // 右侧的图标
        cell?.accessoryType = .DisclosureIndicator

        cell?.textLabel?.text = "section:\(indexPath.section), row:\(indexPath.row)"
        cell?.detailTextLabel?.text = "我是详情"
        cell?.imageView?.image = UIImage(named: "star")
        return cell!
    }

}

运行程序:

我们发现UITableView就是一个可以滚动的列表, 它的显示内容,行数和分组数都是在dataSource中设置的.

上面的代码中,我们的UITableView的style是Plain, 我们设置成Grouped试试

let tableView = UITableView(frame: self.view.bounds, style: UITableViewStyle.Grouped)

2. UITableView设置footer和header的title

上面的实例中, 我们发现会有一个灰色的区域,我们给它们设置一些文字,实现UITableViewDataSource的两个方法即可:

// Header的标题
    func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return "headerTitle"
    }


    // Footer的标题
    func tableView(tableView: UITableView, titleForFooterInSection section: Int) -> String? {
        return "footerTitle"
    }

运行程序:

现在我们将UITableView改为不分组的模式:

let tableView = UITableView(frame: self.view.bounds, style: UITableViewStyle.Plain)

运行程序:

我们发现灰色部分在滚动的时候先不动,直到下一个灰块将它顶上去.还是蛮有意思的效果.

3. UITableView的点击

现在,我们实现一个需求, 当点击一个item时候,我们在控制台中打印出被点击的item的section和row

// MARK: - UITableViewDelegate

    // MARK: 选中item
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        // 取消选中
        tableView.deselectRowAtIndexPath(indexPath, animated: true)

        print("选中位置: section->\(indexPath.section), row->\(indexPath.row)")
    }

运行程序, 我们点击某个item的时候,控制台会打印出item所处的section和row,如:

选中位置: section->0, row->0
选中位置: section->0, row->1
选中位置: section->0, row->2

这个小结,我们只学习如何简单的使用UITableView来实现一个效果, 后面我们会慢慢深入.

4. 全部代码

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        let tableView = UITableView(frame: self.view.bounds, style: UITableViewStyle.Plain)
        tableView.dataSource = self
        tableView.delegate = self
        // 创建一个可重用的cell
        tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "mycell")
        self.view.addSubview(tableView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


    // MARK: - UITableViewDataSource

    // MARK: 返回分组数
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 10
    }

    // MARK: 返回行数
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 3
    }


    // MARK: 返回显示的内容
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        var cell = tableView.dequeueReusableCellWithIdentifier("mycell")
        if cell == nil {
            cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "mycell")
        }

        // 右侧的图标
        cell?.accessoryType = .DisclosureIndicator

        cell?.textLabel?.text = "section:\(indexPath.section), row:\(indexPath.row)"
        cell?.detailTextLabel?.text = "我是详情"
        cell?.imageView?.image = UIImage(named: "star")
        return cell!
    }

    // Header的标题
    func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return "headerTitle"
    }


    // Footer的标题
    func tableView(tableView: UITableView, titleForFooterInSection section: Int) -> String? {
        return "footerTitle"
    }


    // MARK: - UITableViewDelegate

    // MARK: 选中item
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        // 取消选中
        tableView.deselectRowAtIndexPath(indexPath, animated: true)

        print("选中位置: section->\(indexPath.section), row->\(indexPath.row)")
    }
}