iOS TableView Storyboard示例 显示详情¶
更新日期 2022-2-17
- 2022-2-17 创建文档
开发环境与工具
- Xcode13
- iOS 14.4
- Swift
书接上文，我们已经用Table View展示了一个列表。 现在我们把其中的子项信息显示出来。也是用TableView展示详细信息。
接下来我们在前面的基础上，增加一个显示详情的页面。点击列表里的选项（cell），打开一个新的详情页。
修改数据类SampleEntity¶
增加一个Date类型的变量，用来代表更新时间
import Foundation
struct SampleEntity {
var title: String
var desc: String
var isComplete: Bool = false
var updatedDate: Date // 此次添加的变量
}
extension SampleEntity {
static var testData = [
SampleEntity(title: "iOS入门开发2", desc: "https://an.rustfisher.com", updatedDate: Date().addingTimeInterval(800.0)),
// 其他的示例数据...
]
}
Date().addingTimeInterval用来生成时间
修改TableViewSample1.storyboard¶
原来的TableViewSample1.storyboard里只有一个SampleListVC
Navigation Controller¶
选中Scene，然后点右下角的按钮「Embed in」
在弹出窗口中选择「Navigation Controller」，会添加一个Navigation Controller Theme，如下图所示
此时我们运行一下，可以看到列表上方多了一个“实心”的区域
新的Table View Controller¶
按右上角的Library按钮「+」，拖一个Table View Controller出来。然后将原来的TableViewCell（这里是SampleListCell）链接到新页面上。
选择 Selection Segue - Show，建立一个连接
连接后如下。箭头指的就是我们刚建立的segue连接。
此时可以运行一下app，点击选项可以跳转去另一个页面了。当然现在是没有数据的。 我们接下来先解决详情页显示数据问题，然后在解决的传送数据问题。点击哪个，就把哪个数据传给下一个页面。
SampleDetailVC.swift¶
新建SampleDetailVC.swift文件，准备用它来控制刚才的页面。
导入UIKit，新建类SampleDetailVC继承自UITableViewController
在SampleDetailVC里加一个DetailRow枚举（enum），cell显示信息的时候用到它。
class SampleDetailVC: UITableViewController {
enum DetailRow: Int, CaseIterable { // 显示时候用的
case title // 标题
case desc // 文字描述
case time // 时间
}
}
给DetailRow添加一些方法。
func getTxt(for d: SampleEntity?) -> String? {
switch self {
case .title:
return d?.title
case .desc:
return d?.desc
case .time:
return d?.updatedDate.description // 先拿字符串描述
}
}
var headImg: UIImage? { // 这里是var
switch self {
case .title:
return nil // 标题不用小图标
case .desc:
return UIImage(systemName: "square.and.pencil")
case .time:
return UIImage(systemName: "clock")
}
}
SampleDetailVC持有一个SampleEntity对象，用cfg方法从外面传进来
class SampleDetailVC: UITableViewController {
enum DetailRow: Int, CaseIterable { /**/ }
var detailEntity: SampleEntity?
func cfg(with inputEntity: SampleEntity) {
self.detailEntity = inputEntity
}
}
SampleDetailVC类的主体基本完工，我们来弄扩展部分。
和上一篇（显示列表）类似，要在TableView中显示项目，需要复写方法tableView
class SampleDetailVC: UITableViewController { /* ... */ }
extension SampleDetailVC {
static let detailCellId = "DetailCellId" // 等下填到storyboard里Cell对应的地方
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return SampleEntity.testData.count // 示例数据的数量
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: Self.detailCellId, for: indexPath)
let row = DetailRow(rawValue: indexPath.row)
cell.textLabel?.text = row?.getTxt(for: detailEntity) // 这里detail Entity定义在上面的类里
cell.imageView?.image = row?.headImg
return cell
}
}
SampleDetailVC关联起来。
注意「Table View Cell」的「Style」要选basic。我们没有自定义Cell，用的是自带的。记得id要填对。
传数据¶
接下来回到SampleListVC
设定id，用来标记跳转
复写prepare方法，如果是要去详情页的跳转，把cell对应的数据取出来交给目标页面SampleDetailVC
import UIKit
class SampleListVC: UITableViewController {
static let showDetailSegueId = "ShowDetailSegueId" // 标记跳转 segue
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if segue.identifier == Self.showDetailSegueId,
let destination = segue.destination as? SampleDetailVC,
let cell = sender as? UITableViewCell,
let indexPath = tableView.indexPath(for: cell) {
let entity = SampleEntity.testData[indexPath.row] // 取出数据
destination.cfg(with: entity)
}
}
}
设定跳转的id
运行起来就能看到效果了
小结¶
我们使用了basic的Cell，没有自己设计实现。这个示例展示了enum的一种用法。 使用Table View Cell和跳转连接（segue）的时候，要注意设置identifier。
参考¶
使用storyboard与TableView的一个ToDo例子
本站说明
一起在知识的海洋里呛水吧。广告内容与本站无关。如果喜欢本站内容，欢迎投喂作者，谢谢支持服务器。如有疑问和建议，欢迎在下方评论~