Delete 3. TableView的应用.md
This commit is contained in:
Yurk
GitHub
@@ -1,199 +0,0 @@
|
||||
# TableView的应用
|
||||
|
||||
## 什么是 TableView?
|
||||
|
||||
`TableView` 直译为表格视图，如今，我们手机上的各种 app 都存在着表格视图：当我们打开知乎时，首先看到的就是一个 `TableView`，首页上的每一个回答都是 `TableView` 中的一个 `cell`，只不它是一种自定义的表格视图；当我们在淘宝搜索栏中搜索某一关键词后，屏幕上出现的也是`TableView`，每一个商品都是`TableView`上的一个`cell`；当我们打开微信想找某个对话框时，对话框也是 `TableView` 上的 `cell`。通过本章以及下一章的学习，你将学习如何做出联系人列表，以及如何构建基本的表格视图界面。当然，仅有`TableView` 是不够的，在下一章结束后，你将掌握更多的技能。
|
||||
|
||||
## Storyboard中添加Table View
|
||||
|
||||
在storyboard控件库中搜索`Table View`，并拖拽至面板中，放大到与屏幕同尺寸。
|
||||
|
||||
|
||||
|
||||
页面的右侧罗列了Table View的一些基本属性，第一个部分为单元格模式，分为两种：`Dynamic Prototypes`与`Static Cells`
|
||||
|
||||
`动态单元格`的原型在我们日常应用中十分常见，例如：iPhone上的`信息`应用就是一种动态表格，其特性为支持动态添加和删除。
|
||||
|
||||
`静态单元格`的数据内容相对固定，很少会用到动态添加和删除，但支持对表格的分组，通常可以用作个人界面的信息显示。Storyboard中提供了静态单元格的简易搭建（提示：在实际的开发中很少这样使用）本处仅作为演示使用。（下图为静态单元格）
|
||||
|
||||
<img src="/Users/mac/Desktop/iOSdev/Task01：基础插件与功能/img/8.png" alt="8" style="zoom:50%;" />
|
||||
|
||||
|
||||
|
||||
## 数据源代理
|
||||
|
||||
`UITableView` 继承自 `UIScrollView`，在进行 `ViewController` 编辑时，有如下两种方法对其进行代理：
|
||||
|
||||
- 第一种
|
||||
|
||||
1. 鼠标`右键`点击 `Table View`面板的空白处，拖拽至 `View Controller` 处与之连接，点击`dataSource`与`delegate`
|
||||
|
||||
|
||||
|
||||
<img src="/Users/mac/Desktop/iOSdev/Task01：基础插件与功能/img/datasource.png" alt="datasource" style="zoom:50%;" />
|
||||
|
||||
2. 在`ViewController.swift`中添加如下代码：
|
||||
|
||||
```swift
|
||||
import UIKit
|
||||
class ViewController: UIViewController, UITableViewDataSource {
|
||||
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
|
||||
<#code#>
|
||||
}
|
||||
|
||||
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
|
||||
<#code#>
|
||||
}
|
||||
|
||||
override func viewDidLoad() {
|
||||
super.viewDidLoad()
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
这就完成了TableView的初始化，接下来我们仅需要在函数中添加相应代码即可运行。
|
||||
|
||||
- 第二种
|
||||
|
||||
1. 拖拽 `UITableView` 至代码中
|
||||
|
||||
2. 在 `ViewController` 中添加如下代码（或利用智能补全）：
|
||||
|
||||
```swift
|
||||
import UIKit
|
||||
class ViewController: UIViewController, UITableViewDataSource{
|
||||
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
|
||||
<#code#>
|
||||
}
|
||||
|
||||
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
|
||||
<#code#>
|
||||
}
|
||||
|
||||
@IBOutlet weak var tableView: UITableView!
|
||||
|
||||
override func viewDidLoad() {
|
||||
super.viewDidLoad()
|
||||
self.tableView.dataSource = (self as UITableViewDataSource)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
<img src="/Users/mac/Desktop/iOSdev/Task01：基础插件与功能/img/11.png" alt="11" style="zoom: 50%;" />
|
||||
|
||||
## TableView 的基本属性
|
||||
|
||||
完成代理后，代码部分需要设置 `UITableView` 的各项参数，与 `ScrollView `不同的是，`TableView` 存在两个必须继承的方法：
|
||||
|
||||
1. ```swift
|
||||
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
|
||||
return 1
|
||||
}
|
||||
```
|
||||
|
||||
2. ```swift
|
||||
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
|
||||
code
|
||||
}
|
||||
```
|
||||
|
||||
上述内容中，前者为每一个 section 有多少个 rows，后者为对每个 rows 进行属性设置，
|
||||
|
||||
下一章中我会对 rows 中的属性进行详细说明，本章仅探讨 `TableView` 的一些性质。除了这两个必须继承的方法外，`TableView` 还有一个十分重要的内容：设置 section 数量。若想显示不同分组，需要我们手动添加一个方法，否则只显示第一组内的单元格（注：分组显示需要在 storyboard 中设置Grouped）：
|
||||
|
||||
```swift
|
||||
func numberOfSections(in tableView: UITableView) -> Int {
|
||||
return 1
|
||||
}
|
||||
```
|
||||
|
||||
若不设置此方法，return 默认值为 1，`TableView` 中除了上述的三个方法外，还有如下的几个属性：
|
||||
|
||||
```swift
|
||||
rowHeight//统一设置所有行高度
|
||||
separatorColor//分割线颜色
|
||||
separatorStyle//分割线样式
|
||||
tableHeaderView//可在分组单元格上方放置
|
||||
title tableFooterView//可以用来显示加载更多页面
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 国家分组 demo
|
||||
|
||||
接下来以一个国家分组 demo 练习表格视图的分组：
|
||||
|
||||
```swift
|
||||
func numberOfSections(in tableView: UITableView) -> Int {
|
||||
//一共分几组，若没有此则默认为 1 section，不会显示出了第一个以外的 section
|
||||
return 3
|
||||
}
|
||||
|
||||
func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
|
||||
//组标题，即页眉
|
||||
if section == 0{
|
||||
return "亚洲"
|
||||
}else if section == 1{
|
||||
return "非洲"
|
||||
}else {
|
||||
return "欧洲"
|
||||
}
|
||||
}
|
||||
|
||||
/* func tableView(_ tableView: UITableView, titleForFooterInSection section: Int) -> String? {
|
||||
//组注释，即页尾
|
||||
if section == 0{
|
||||
return "Asia"
|
||||
}else if section == 1{
|
||||
return "Africa"
|
||||
}else {
|
||||
return "Euro"
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
|
||||
if section == 0{
|
||||
//亚洲
|
||||
return 3
|
||||
}else if section == 1{
|
||||
//非洲
|
||||
return 2
|
||||
}else {
|
||||
//欧洲
|
||||
return 1
|
||||
}
|
||||
}
|
||||
|
||||
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
|
||||
let cell = UITableViewCell.init(style: UITableViewCell.CellStyle.default, reuseIdentifier: nil)
|
||||
if indexPath.section == 0 { //亚洲
|
||||
if indexPath.row == 0 {
|
||||
cell.textLabel?.text = "中国"
|
||||
}else if indexPath.row == 1{
|
||||
cell.textLabel?.text = "日本"
|
||||
}else if indexPath.row == 2{
|
||||
cell.textLabel?.text = "韩国"
|
||||
}
|
||||
|
||||
}else if indexPath.section == 1 {
|
||||
//非洲
|
||||
if indexPath.row == 0{
|
||||
cell.textLabel?.text = "南非"
|
||||
}else {
|
||||
cell.textLabel?.text = "坦桑尼亚"
|
||||
}
|
||||
|
||||
}else {
|
||||
cell.textLabel?.text = "英国"
|
||||
}
|
||||
return cell
|
||||
}
|
||||
```
|
||||
|
||||
值得注意的是，如果我们在工程文件中大量套用if else函数会导致性能大大下降，该部分仅为演示时使用，在下一章中我们会集中探讨如何通过数组来定义 `cell`。
|
||||
|
||||
<img src="/Users/mac/Desktop/iOSdev/Task01：基础插件与功能/img/12.png" alt="12" style="zoom:50%;" />
|
||||
Reference in New Issue
Block a user