Skip to content

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

选中Scene,然后点右下角的按钮「Embed in」

embed in

在弹出窗口中选择「Navigation Controller」,会添加一个Navigation Controller Theme,如下图所示

added

此时我们运行一下,可以看到列表上方多了一个“实心”的区域

run1

新的Table View Controller

按右上角的Library按钮「+」,拖一个Table View Controller出来。然后将原来的TableViewCell(这里是SampleListCell)链接到新页面上。

选择 Selection Segue - Show,建立一个连接

go

连接后如下。箭头指的就是我们刚建立的segue连接。

connected

此时可以运行一下app,点击选项可以跳转去另一个页面了。当然现在是没有数据的。 我们接下来先解决详情页显示数据问题,然后在解决的传送数据问题。点击哪个,就把哪个数据传给下一个页面。

SampleDetailVC.swift

新建SampleDetailVC.swift文件,准备用它来控制刚才的页面。 导入UIKit,新建类SampleDetailVC继承自UITableViewController

新建SampleDetailVC
import UIKit

class 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
    }
}
展示的代码OK了。把storyboard里的页面和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例子

作者: rustfisher.com | rf.cs@foxmail.com
示例: AndroidTutorial Gitee, Tutorial Github
本文链接: https://www.an.rustfisher.com/ios/uikit/tableview/table-view-storyboard-sample2/
一家之言,仅当抛砖引玉。如有错漏,还请指出。如果喜欢本站的内容,还请支持作者。也可点击1次下方的链接(链接内容与本站无关),谢谢支持服务器