Day#04 TableView

前言

承接昨天的内容,今天来加上viewDidLoad中的逻辑内容{ @•̀ꈊ•́@ }

学习资源

这篇参考的资源与前篇相同,还新增了 :arrow_down:

表格 UITableView

TableView

UITableView有两个必须实作的方法,第一个是每一组有几个cell、第二个是每个 cell 要显示的内容。

算是一个快捷键/小技巧,不需要按照func tableView...这样一个字一个字慢慢打,直接打numberOfRowsInSection,甚至打num,XCode就会跳出提示,然後可直接选择要实作的方法,可参考下图32行

首先是第一个方法,这边的data是指viewController的private TodoListItem阵列。我们直接回传共有几个item,代表有多少个相对应的cell。

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return data.count
}

然後接下来是每个cell的内容,我们使用"cell"作为identifier,把data一个个的塞到cell文字内容中显示。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
    cell.textLabel?.text = data[indexPath.row].item
    return cell
}

最後,因为前一天有提到,当我们点选某个item/cell的时候,要可以看他的细节与内容,因此加入一个选择row时的方法。
这边先加上取消选择的状态,其他查看细节的内容先不实作。

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    tableView.deselectRow(at: indexPath, animated: true)
}

UITableViewDelegate, UITableViewDataSource

UITableView必须设置委任模式的对象来完善这个表格的内容,而我们将tableView直接写在viewController当中,因此指定他为委派对象。
UITableView委任的方法大多会有indexPath参数,这个参数有两个属性分别为section及row,是用来表示目前要设置的cell是属於哪一组( section)的哪一列(row),型别都为Int且都是0-index。

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource

viewDidLoad

把上述的tableview以及其中的cell identifier bind进来。

override func viewDidLoad() {
    super.viewDidLoad()

    table.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
    table.delegate = self
    table.dataSource = self
}

结语

到这边可以先build(cmd+B),试试看,应该要建置成功!

搭配viewController的是storyboard,storyboard将元件实际显示出来,透过连结的方式去mapping viewController/storyboard的关系。下一篇会继续实作!

若上述内容有误或可以改进的部分,欢迎留言以及提出任何指教~
谢谢 ୧༼◕ ᴥ ◕༽୨


<<:  Day18 如果你愿意一层一层一层的剥开我的心

>>:  PHP 一些特性

C# 侦错

侦错 监看,暂停时才能使用 逐步侦错 可搭配监视一起使用,追值(下方) 寻找 跨档案寻找code ...

Day 8 - 社交工程 101

出於书本 Chapter 5. Social Engineering 常见的社交工程攻击 向使用者宣...

C语言杂谈01---如何理解条件编译

架构图 前言 由於地区翻译关系,有些书籍将macro翻译成"巨集",有些翻译成&...

[重构倒数第30天] - 使用 Vue3 Composition API 重构 JS 选单

前言 该系列是为了让看过Vue官方文件或学过Vue但是却不知道怎麽下手去重构现在有的网站而去规画的系...

学习成为人体 PE Parser

看日常分享: AwesomeCS FB 看技术文章: AwesomeCS Wiki 笔者最近在阅读...