今天就要來介紹常用列表式介面 – 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預設屬性的設定，即可將剛剛建立的按鍵添加至導航列，主要設定屬性有以下三個：
- navigationItem.title（中間標題）
- navigationItem.leftBarButtonItem（左方按鍵）
- 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應該就能理解。那麼有哪些地方是要調整的呢：
- 設定myTableViewController型別（程式碼上半部）：設定的是myTableViewController這的變數，在範例中可以看見設定的類別是OnePage，請將它修改成欲新增列表元件的TableViewController的型別。
- nameLabel的宣告（程式碼中間部份）：nameLabel是一個UILabel物件，這個物件我們是要用來當作列表元件的顯示標籤，就如同最上方成果圖中的左方標籤（one、two、three、four、five），主要要調整的是label.text這個屬性，也就是顯示文字，當然讀者想調整顏色或是字體大小都是可以的。
- 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
}
