iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
1
Software Development

Swift零基礎實作旅遊景點app系列 第 5

Swift從零開始-Day5:UITableView基礎學習

分類:UIKit學習

1. 簡介:

  • 在單一column下以列(row)的方式來呈現資料 。
  • 為ScrollView的子類別,但是只能縱向滑動。
  • 上面的每一個儲存格稱為cell,用來呈現資料,為UITableViewCell類別。
  • 可以分成好幾個Section,如下圖分成籃球、棒球兩個Section,籃球Section有2個row,棒球有4個。

表格 UITableView · Swift 起步走

  • 利用index number來選到要的Section及row。
  • TableView的樣式分成plain及grouped兩種。
  • TableView需要物件來作為Data Source及委任,來設定TableView的樣式及要呈現的資料。
  • 每個cell的結構如下圖,了解此結構有助於客製化TableView的建構。cell裡面有一個大框架為content view,content view內部再包涵一個UIImageView與一個UILabel

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/TableView_iPhone/TableViewCells/TableViewCells.html#//apple_ref/doc/uid/TP40007451-CH7

2. UITableView建立方法

利用UITableView來建立

  1. 選擇UITableView並將其拉進StoryBoard並與程式碼進行連結,再將右邊的Prototype cells設為1(不設也沒關係,為了方便我們看到Cell的變化)。

  2. 接著選到畫面左邊的cell,並將其右邊的identifier改成cell,此部驟相當於TableView中的register方法。

  3. 在連結TableView的ViewController打上程式碼來遵守UITableViewDelegate與UITableViewDataSource協定,因此要實現此兩協定的方法。

  • UITableViewDataSource管理的方法包含有多少表格區塊(Section)、需要多少列(Row)、列要顯示什麼、Section的標題要顯示什麼...等
  • UITableViewDelegate管理的則是處理外觀,包含Row Height、標題區塊的高...等
    Ex:
//每個Section裡面會有幾列
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        程式碼區
    }

//設定cell要顯示的內容
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
			一般來說會實現tableView中的dequeueReusableCell方法藉以重複使用cell
    }
  1. 設定delegate:必須告訴UITableView委派物件為何,為遵守上述協定的ViewController。
    因此在該ViewController中的viewDidLoad方法中加入tableview名稱.delegate = selftableview名稱.dataSource = self

3. 客製化Cell

上述我們選擇Prototype cell為1是為了方便我們進行客製化cell的視覺化呈現,如果選擇2以上,這樣我們就需要設定給每個的cell ID。

3-1. 客製化Cell方法:

  1. 在prototype cell中的content View拉進需要的元件。下圖拉進名稱為My Cell Image View及 My cell Label的元件。

  1. 創建一個新的UITableViewCell類別,上圖為創建一MycustomTableViewCell類別。
  2. 把拉進的元件與剛剛產生的MycustomTableViewCell連結。
  3. 在設定Cell的地方轉型成MycustomTableViewCell,並且調用在此Cell的方法。Ex:
 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as? MycustomTableViewCell{
            cell.myCellLabel.text = sceneFigureArray[indexPath.row]
            cell.myCellLabel.backgroundColor = UIColor(red: 0.66, green: 1.79, blue: 2.44, alpha: 0.7)
            cell.myCellImageView.image = UIImage(named: sceneFigureArray[indexPath.row])
            return cell
        }else {
            let cell = UITableViewCell()
            cell.textLabel?.text = sceneFigureArray[indexPath.row]
            cell.imageView?.image = UIImage(named: sceneFigureArray[indexPath.row])
            return cell
        }     
    }

4. TableView其他常使用的方法:

  • heightForHeaderInSection:設定Section Header的高度。
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
         <#code#>
    }
  • titleForFooterInSection:設定Footer的標題
func tableView(_ tableView: UITableView, titleForFooterInSection section: Int) -> String? {
        <#code#>
    }
  • heightForFooterInSection:設定Section Footer的高度。
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
         <#code#>
    }

上一篇
Swift從零開始-Day4:Class兩三事
下一篇
Swift從零開始-Day6:UICollectionView基礎學習
系列文
Swift零基礎實作旅遊景點app30

尚未有邦友留言

立即登入留言