IOS SWIFT3 ) TableView 範例

今天就要來介紹常用列表式介面 – TableView

Storyboard的設置部份如下圖，可以見到是兩個部分，分別是Navigation Controller和Table View，Navigation Controller也就是俗稱的導航列，顯示如圖上方的左右按鍵（Bake & Next）和標題（Hello），我們之後會在Table View中定義 Navigation Controller。而至於列表元件也是同樣也是在Table View中設定，只是列表元件的設定分成兩步驟，分別是元件的定義與元件新增至TableView。

那首先我們先說導航列（當然如果只是測試練習或是懶的話，可以跳過Navigation Controller，這並不影響後面建置），那我們就來邊看程式碼邊說明：

#
 // Left button
 let LeftButton = UIBarButtonItem(
 title: LeftName,
 style: UIBarButtonItemStyle.plain,
 target: self,
 action: #selector(self.LeftAction)
 )
 
 // Right button
 let RightButton = UIBarButtonItem(
 title: RightName,
 style: UIBarButtonItemStyle.plain,
 target: self,
 action: #selector(self.RightAction)
 )

上面的屬性名稱被設定的非常容易理解，可以看見首先我先宣告了兩個按鍵，分別是LeftButton和RightButton，而這兩個按鍵其中的title與action兩個屬性是最主要的，title是按鍵之後會顯示的名稱，action則是對應的觸發事件，需要被指向至一個function。

當設定玩兩個按鈕之後，只要透過navigationItem預設屬性的設定，即可將剛剛建立的按鍵添加至導航列，主要設定屬性有以下三個：

1. navigationItem.title（中間標題）
2. navigationItem.leftBarButtonItem（左方按鍵）
3. navigationItem.rightBarButtonItem（右方按鍵）

設定方式如下：

 // add leader into navigationView
 navigationItem.title = Title
 navigationItem.leftBarButtonItem = LeftButton
 navigationItem.rightBarButtonItem = RightButton 

再來就是必要的列表元件設定，如圖最上方說明這邊我們會有兩個步驟，元件的定義與元件新增至TableView，所以首先我們必須宣告出一個新的類別(class)，而這個類別（class）必須繼承
UITableViewCell這個類別，那麼宣告的範例如下

class Cell: UITableViewCell {
    
    var myTableViewController: OnePage?
    
    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupViews()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    let nameLabel: UILabel = {
        let label = UILabel()
        label.text = "initial Name"
        label.translatesAutoresizingMaskIntoConstraints = false
        label.font = UIFont.boldSystemFont(ofSize: 14)
        return label
    }()
    
    let actionButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("initial Name", for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        return button
    }()
    
    func setupViews() {
        addSubview(nameLabel)
        addSubview(actionButton)
        
        actionButton.addTarget(self, action: #selector(self.handleAction), for: .touchUpInside)
        
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-16-[v0]-8-[v1(80)]-8-|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0": nameLabel, "v1": actionButton]))
        
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0": nameLabel]))
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0": actionButton]))
        
    }
    
    func handleAction() {
        // click cell and execute action
        myTableViewController?.CellAction(cell:self)
        
    }
    
}

這邊程式碼稍微長了一點，但不必擔心，懶惰的筆者當然會挑重要的說，等到實作過一次在請讀者自己trace code應該就能理解。那麼有哪些地方是要調整的呢：

1. 設定myTableViewController型別（程式碼上半部）：設定的是myTableViewController這的變數，在範例中可以看見設定的類別是OnePage，請將它修改成欲新增列表元件的TableViewController的型別。
2. nameLabel的宣告（程式碼中間部份）：nameLabel是一個UILabel物件，這個物件我們是要用來當作列表元件的顯示標籤，就如同最上方成果圖中的左方標籤（one、two、three、four、five），主要要調整的是label.text這個屬性，也就是顯示文字，當然讀者想調整顏色或是字體大小都是可以的。
3. actionButton的宣告（程式碼中間部份）：actionButton也又是元件右方的按鍵，而設定按鈕顯示文字是透過設定label.text，而按鈕對應的點擊事件則是在下方setupViews()中的actionButton.addTarget設定，可以看到範例是將其對應到handleAction這個function。

基本上最初的調整如上，現在我們要將它加入列表中，其實最必要的調整部分是CellList和actionButton.setTitle兩個屬性，分別就是列表中每個元件的左方標題文字與右方按鈕文字。

    let CellList=["one","two","three","four","five"]
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return CellList.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let myCell = tableView.dequeueReusableCell(withIdentifier: "cellId", for: indexPath as IndexPath) as! Cell
        myCell.nameLabel.text = CellList[indexPath.row]
        myCell.actionButton.setTitle("Go", for: .normal)
        myCell.myTableViewController = self
        
        return myCell
    }

Source Code – GitHub ) : https://github.com/Chunshan-Theta/Template/blob/master/template/OnePage.swift