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 table
a49d
View(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)")
}
}