看板 KnucklesNote
作者 標題 [Xcode][Swift3] TableView 使用 Section
時間 2017-04-17 Mon. 01:07:14
TableView 如果要使用多組資料時
可以將資料分為不同的 section
每個 section 還可以在上下顯示 header 與 footer
例如先在 TableViewController 的成員變數加上三筆資料
let data1Array = ["data1-1"]
let data2Array = ["data2-1", "data2-2"]
let data3Array = ["data3-1", "data3-2", "data3-3"]
let data2Array = ["data2-1", "data2-2"]
let data3Array = ["data3-1", "data3-2", "data3-3"]
修改這兩個成員函數
// MARK: - Table view data source
override func numberOfSections(in tableView: UITableView) -> Int {
return 3
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
switch(section) {
case 0: return data1Array.count
case 1: return data2Array.count
case 2: return data3Array.count
default: return 0
}
第一個函數設定 TableView 有3個 sectionoverride func numberOfSections(in tableView: UITableView) -> Int {
return 3
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
switch(section) {
case 0: return data1Array.count
case 1: return data2Array.count
case 2: return data3Array.count
default: return 0
}
第二個函數設定每個 section 各有幾個 row
修改顯示資料的成員函數 tableView(_:cellForRowAt:)
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell", for: indexPath)
if indexPath.section == 0 {
cell.textLabel?.text = "row: \(indexPath.row), value: \(data1Array[indexPath.row])"
} else if indexPath.section == 1 {
cell.textLabel?.text = "row: \(indexPath.row), value: \(data2Array[indexPath.row])"
} else if indexPath.section == 2 {
cell.textLabel?.text = "row: \(indexPath.row), value: \(data3Array[indexPath.row])"
}
return cell
}
執行到每個 section 時，row 的值又會從 0 開始let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell", for: indexPath)
if indexPath.section == 0 {
cell.textLabel?.text = "row: \(indexPath.row), value: \(data1Array[indexPath.row])"
} else if indexPath.section == 1 {
cell.textLabel?.text = "row: \(indexPath.row), value: \(data2Array[indexPath.row])"
} else if indexPath.section == 2 {
cell.textLabel?.text = "row: \(indexPath.row), value: \(data3Array[indexPath.row])"
}
return cell
}
所以可以直接將 indexPath.row 的值設為每個資料陣列的索引值
執行結果:
![[圖]](http://i.imgur.com/EtvsVI9.png)
要在每個 section 加上 header 的話
加上成員函數 tableView(_:titleForHeaderInSection:)
override func tableView(_ talbeView: UITableView, titleForHeaderInSectin section: Int) -> String? {
switch(section) {
case 0: return "data 1"
case 1: return "data 2"
case 2: return "data 3"
default: return nil
}
}
設定每個 section 的 header 要顯示什麼文字switch(section) {
case 0: return "data 1"
case 1: return "data 2"
case 2: return "data 3"
default: return nil
}
}
return nil 的話就不會顯示 header
執行結果
![[圖]](http://i.imgur.com/xuUDKIT.png)
要調整每個 header 的高度的話，加上
override func tableView(_ talbeView: UITableView, heightForHeaderInSectin section: Int) -> CGFloat {
return 20
}
將每個 section 的 header 高度都設為 20return 20
}
執行結果
![[圖]](http://i.imgur.com/gFUo2mJ.png)
要自訂 header 樣式的話
到 storyboard
在 TableView 的屬性檢視器設定 Prototype Cells 的數量為 2
在第一個 cell，設定 Identifier:「HeaderCell」, Background:「Dark Gray Color」
設定高度為 20， Label 的文字顏色設定為「White」，像這樣
![[圖]](http://i.imgur.com/5eVHgBb.png)
刪除之前加上的成員函數 tableView(_:titleForHeaderInSection:)
改為
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let cell = tableView.dequeueReusableCell(withIdentifier: "HeaderCell", for: indexPath)
switch(section) {
case 0: cell?.textLabel?.text = "data 1"
case 1: cell?.textLabel?.text = "data 2"
case 2: cell?.textLabel?.text = "data 3"
default: break
}
return cell
}
let cell = tableView.dequeueReusableCell(withIdentifier: "HeaderCell", for: indexPath)
switch(section) {
case 0: cell?.textLabel?.text = "data 1"
case 1: cell?.textLabel?.text = "data 2"
case 2: cell?.textLabel?.text = "data 3"
default: break
}
return cell
}
執行結果
![[圖]](http://i.imgur.com/Vyma9aR.png)
--
※ 作者: Knuckles 時間: 2017-04-17 01:07:14
※ 看板: KnucklesNote 文章推薦值: 1 目前人氣: 0 累積人氣: 764
回列表(←)
分享