Swift實現自訂TableViewCell

標籤：ios   swift   uitableviewcell   uitableview   自訂   

雖然SDK裡面內建的TableViewCell功能已經算強大了，但是很多時候，我們還是需要自訂的Cell來滿足我們自己的需求。最近研究了下如何用Swift實現自訂的TableViewCell，記錄一下吧。

1. 

點擊左下角的加號，添加新的類

XCode6.3 做了一些小改動，整合了一下，點擊File，然後進行下一步：

2. 

這裡可以給你自己的TableViewCell修改名字，記得把"Also create XIB file"前面的複選框選中

3. 

設計你自己想要的XIB樣式。AutoLayout很強大，多用一用就慢慢熟練了，可以省去很多代碼量。

StationTableViewCell.swift檔案基本不需要做大的變動

下面進行關鍵的步驟，在TableView中添加進剛才我們自訂的TableViewCell

4. 

StoryBoard中我們設定好承載TableView的ViewController（ProjectDetail...Controller.swift）的各項屬性

注意這裡把tableview的style設定為Grouped，這樣會在頂部出現一段空白，不過別擔心，在接下來的代碼裡面我們會解決這個問題。

5. 

ViewDidLoad：

override func viewDidLoad() {        super.viewDidLoad()        // Do any additional setup after loading the view.        let appdelegate = UIApplication.sharedApplication().delegate as! AppDelegate        appdelegate.projectDetail = self        self.tableView.delegate = self        self.tableView.dataSource = self        // remove the blank of the header of the table view, mind the height must be more than 0        self.tableView.tableHeaderView = UIView(frame: CGRectMake(0, 0, self.tableView.frame.size.width, 0.01))        // register the custom tableview cell        var nib = UINib(nibName: "StationTableViewCell", bundle: nil)        self.tableView.registerNib(nib, forCellReuseIdentifier: "cell")    }

為了在Cell裡面點擊button可以實現頁面的跳轉，我在介面剛初始化的時候，在AppDelegate裡面執行個體化了一個當前ViewController的執行個體。如果對這個過程不了的，可以參見我的下一篇Blog，我會詳細介紹一下如何?。

接下來設定tableview的delegate和datasource代理

然後就是剛才提到的，去除頂部的空白的代碼了：

        self.tableView.tableHeaderView = UIView(frame: CGRectMake(0, 0, self.tableView.frame.size.width, 0.01))

注意這裡frame的height不能是 0，如果是0是沒有效果的，必須是比0大一點，但是我們把這個值設定的特別小，用肉眼看不出來，所以就變相達到了去除頂部空白的作用。所以我們設定成了 0.01

接下來就是最關鍵的步驟了，初始化自訂的cell

        var nib = UINib(nibName: "StationTableViewCell", bundle: nil)        self.tableView.registerNib(nib, forCellReuseIdentifier: "cell")

6. 

實現兩個代理方法

    // #MARK: tableview delegate    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {        return 80    }        func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {        // To do     }        // #MARK: tableview datasource    func numberOfSectionsInTableView(tableView: UITableView) -> Int {        return 1    }        func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {        return 5    }        func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {        // all the custom cell into the tableview         var cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! StationTableViewCell        return cell    }

這幾個代理方法就不多說了，很常用的。

到這裡所有的步驟都完成了，運行一下程式，看看自訂的是什麼樣子的吧。

Swift實現自訂TableViewCell