iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 10
0
自我挑戰組

Swift!從新手到微上手系列 第 10

Swift-UITableView

馬上就來到第10天了

  • TableView通常被使用在有序列的資料
  • 會在每一行中顯示綁定好的資料
  • 裡面的每一個儲存格稱為cell,用來呈現資料,為UITableViewCell類別。

實做一個神奇寶貝的table view

  1. 先建立一個陣列

  1. 為了完整顯示表格TableView一定要遵從兩個portocol
  • UITableViewDelegate - 負責管理外觀,實現row height、section height、header或footer的view該如何顯示
  • UITableViewDataSource - 負責管理要顯示多少section、多少row,及綁定cell需顯示的資料。
  1. 實作之後需實現兩個function
func tableView(tableView: UITableView,
  numberOfRowsInSection section: Int) -> Int {
}

func tableView(tableView: UITableView,
  cellForRowAtIndexPath indexPath: NSIndexPath)
  -> UITableViewCell {
  }
  • 什麼叫做section跟row
    section /numberOfSections

    row /numberOfRowsInSection
  1. 實作

  1. 這樣就能呈現完成完整的TableView

除了上述的基本需實現的方法,還有很多可以實作的method

// 如果實作了這個方法 會蓋過單純設置文字的 section title
func tableView(tableView: UITableView,
  viewForHeaderInSection section: Int) -> UIView? {
    return UIView()
}

// 設置 section header 的高度 
func tableView(tableView: UITableView,
  heightForHeaderInSection section: Int) -> CGFloat {
    return 80
}

// 每個 section 的 footer
func tableView(tableView: UITableView,
  titleForFooterInSection section: Int) -> String? {
    return "footer"
}

// 設置每個 section 的 footer 為一個 UIView
// 如果實作了這個方法 會蓋過單純設置文字的 section footer
func tableView(tableView: UITableView,
  viewForFooterInSection section: Int) -> UIView? {
    return UIView()
}

// 設置 section footer 的高度
func tableView(tableView: UITableView,
  heightForFooterInSection section: Int) -> CGFloat {
    return 80
}

// 設置 cell 的高度
func tableView(tableView: UITableView,
  heightForRowAtIndexPath indexPath: NSIndexPath) 
  -> CGFloat {
    return 80
}

上一篇
Swift-TextField & TextView
下一篇
Swift-UITableView Cell
系列文
Swift!從新手到微上手30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言