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")
- default 默认样式，只有图标和主标题。
- subtitle 有图标、主标题和副标题（副标题在主标题的下面）
- value1 有主标题和副标题，主标题左对齐，如果有副标题就右对齐，可以有图标。
- value2 有主标题和副标题，主标题和副标题居中对齐，无图标。
image.png
组成样式
cell?.accessoryType = .none
- none 没有拓展图标
- checkmark 选中标志，表示该行被选中，图标为 √
- detailButton 细节按钮，图标为“!”，
- detailDisclosureButton 细节按钮，图标为“!”，同时也有拓展指示器
-
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
}
}
