我们这次直接选择新建一个 Tabbed App 工程,它会自动帮我们建立一个 TabBarController
//
// FirstViewController.swift
// Review_07
//
// Created by Hedon - on 2020/5/10.
// Copyright © 2020 Hedon -. All rights reserved.
//
import UIKit
class FirstViewController: UIViewController,UITableViewDataSource {
//键值对数组,我们要把这些信息装到表格当中
let products = [
["name":"金32","detail":"金士顿32G"],
["name":"金24","detail":"金士顿24G"],
["name":"金16","detail":"金士顿16G"],
["name":"爱32","detail":"爱国者32G"],
["name":"爱24","detail":"爱国者24G"],
["name":"爱16","detail":"爱国者16G"],
["name":"爱16","detail":"爱国者16G"]
]
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
//一个分区里面有多少行,我们这里不分区,所以就是总共有多少行
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return products.count //行数
}
//每一行都是一个Cell,这个函数就定义每一个Cell具体是怎样呈现的
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
/**
dequeueReusableCell:
界面空间有限,比如我们有100个单元格,但是只能显示10个,在滚动的时候,这个属性就先保存滚动出界面的单元格,保存到可重用队列当中,在我们再次需要用到以前的单元格的时候,就再次从队列中取出来就可以了,这样就省去了删除和重建单元格带来的开销。
*/
//cell1 是我们前面给 Cell 设定的辨识 id
let cell:UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell1", for: indexPath)
/**
indexPath 有两个非常重要的属性:
row: 当前的行
session: 当前所在分区
*/
cell.textLabel?.text = products[indexPath.row]["name"]
cell.detailTextLabel?.text = products[indexPath.row]["detail"]
cell.imageView?.image = UIImage(named: "first")
return cell
}
}
到这里我们运行的话还没有效果,因为到这里我们“初步”这个界面里面的表格还没有去实现 UITableViewDataSource 这个协议。
这里我们可以委托“初步”里面的ViewController 对应的控制类 FirstViewController.swift 来实现 UITableViewDataSource 这个协议。
这个文件会放在网盘中,有需要可自取。
我们要做的就是把这个资源文件中的数据显示到“分区”这个界面中的 Table View 中。
//定义加载数据的变量
var names:[String:[String]]!
var keys:[String]!
数据类型我们可以通过查看 sortednames.plist 里面数据的类型。
override func viewDidLoad() {
super.viewDidLoad()
/**
Bundle.main.path 表示当前应用的路径下
forResource:文件名
ofType:文件类型
*/
let path = Bundle.main.path(forResource: "sortednames", ofType: "plist")
let namesDict = NSDictionary(contentsOfFile: path!)
names = namesDict as? [String:[String]]
keys = (namesDict!.allKeys as! [String]).sorted()
}
//分区个数
override func numberOfSections(in tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return keys.count
}
//每个分区里面有多少行
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
let key = keys[section] //获取当前分区的名称
let nameSection = names[key]! //获取数据中对应到当前分区的个数
return nameSection.count //这样就可以设定每个分区有多少个了
}
//设置每个分区的名称
override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
return keys[section]
}
//定义每个 Cell 怎么呈现
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
//注意要回到界面中给“分区”中的 Cell 设定辨识 id 为“cell2”
let cell = tableView.dequeueReusableCell(withIdentifier: "cell2", for: indexPath)
let key = keys[indexPath.section] //获取当前分区的名称
let nameSection = names[key]! //通过当前分区的名称获取这个分区里面的所有数据
cell.textLabel?.text = nameSection[indexPath.row] //然后根据当前分区的第几行,来取出第几个数据
return cell
}
//添加索引栏
override func sectionIndexTitles(for tableView: UITableView) -> [String]? {
return keys
}
这里 Cell 的照片要做得好一点的话应该弄成动态的,然后从数据库中获取,这里为了方便就直接定死了。
import UIKit
class ThirdTableViewController: UITableViewController {
let products = [
["name":"金32","detail":"金士顿32G"],
["name":"金24","detail":"金士顿24G"],
["name":"金16","detail":"金士顿16G"],
["name":"爱32","detail":"爱国者32G"],
["name":"爱24","detail":"爱国者24G"],
["name":"爱16","detail":"爱国者16G"],
["name":"爱16","detail":"爱国者16G"]
]
override func viewDidLoad() {
super.viewDidLoad()
//将我们自定义的Cell注册进本界面的tableView当中
let xib = UINib(nibName: "CustomTableViewCell", bundle: nil)
tableView.register(xib, forCellReuseIdentifier: "cell3")
tableView.rowHeight = 130
}
// MARK: - Table view data source
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
return products.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell3", for: indexPath) as! CustomTableViewCell
cell.nameLabel.text = products[indexPath.row]["name"]
cell.detailLabel.text = products[indexPath.row]["detail"]
return cell
}
}