iT邦幫忙

DAY 18
0

Swift - 從菜菜鳥到菜鳥的 30 天系列 第 18

[Swift-d18] - Basic - Customize TableViewCell

  • 分享至 

  • xImage
  •  

小弟的規劃表 - http://blog.kerkerj.in/blog/2014/11/01/planning/

好讀版 - http://blog.kerkerj.in/blog/2014/10/18/swift-d18/

今天的主題延續昨天的 Navigation + TableView

我們要來客製化 TableViewCell

通常 TableView 可以被拿來做很多事情,不僅只是像是 ListView 而已

而 TableViewCell 可以做更深度的切版,排列元素

因此自定 TableViewCell 是一件算是還蠻重要的事情

下面的 Code 是延續昨天的專案

我先把已更改過的程式碼貼上來:

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet var tableView: UITableView!

    var arr = ["A", "B", "C"]

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

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

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        var cell: CustomTableViewCell? = tableView.dequeueReusableCellWithIdentifier("cell") as CustomTableViewCell?

        if cell == nil {
            var objects = NSBundle.mainBundle().loadNibNamed("CustomTableViewCell", owner: self, options: nil)
            cell = objects[0] as? CustomTableViewCell
        }

        cell!.textLabel?.text = arr[indexPath.row]

        return cell!
    }

    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        var detailViewController = DetailViewController()
        detailViewController.title = arr[indexPath.row]
        self.navigationController?.pushViewController(detailViewController, animated: true)
    }

    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return 165.0
    }
}

今天要新增一個檔案, 我們就稱之為 CustomTableViewCell

就會出現一份 .swift 檔案以及 .xib 檔案了

接下來我們簡單編輯 .xib 檔案,將背景顏色換成其他顏色,以及將它的長度拉高

這樣其實就很簡單地完成了一個小客製化的 TableViewCell 了

那我們要怎麼讓原本的 TableView 吃到這個 TableViewCell 呢?

看以下的 function:

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
  var cell: CustomTableViewCell? = tableView.dequeueReusableCellWithIdentifier("cell") as CustomTableViewCell?

  if cell == nil {
      var objects = NSBundle.mainBundle().loadNibNamed("CustomTableViewCell", owner: self, options: nil)
      cell = objects[0] as? CustomTableViewCell
  }

  cell!.textLabel?.text = arr[indexPath.row]

  return cell!
}

我們將 cell 的類別更改成了 CustomTableViewCell

直接使用剛剛產生的 .swift 類別來產生新的 TableViewCell

並且如果 cell == nil ,則會將 Nib 載入

最後設定該 textLabel ,返回 cell

若使用最一開始的程式碼 apply changes

執行!

應該就可以看到成果了!

p.s. 這篇可能實作上會有 bug (我寫的), 就先跳過吧 XD


上一篇
[Swift-d17] - Basic - Navigation View + TableView
下一篇
[Swift-d19] - Basic - 橋接第三方 Objc Library - Reachability and Bridge.h
系列文
Swift - 從菜菜鳥到菜鳥的 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言