昨天我們實際操作了 tableView 的實作,今天要加入換頁

意思就是假設我點了名為 “99” 的 cell,點擊後會跳轉到另外一頁,同樣顯示 “99”

所以除了跳頁外,還要加入值的傳遞

首先打開昨天的專案,我們要繼續下去

回到 storyboard 中,昨天我們加入了 dataSource,今天要加入 delegate:

image

回到程式碼中 ViewController.swift

在 class 的宣告再加上 UITableViewDataSource

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

再來就要設計換頁的流程了

回到 storyboard

拉一個新的 ViewController 到空白處

image

接著點擊左邊的 TableViewCell, 按住 ctrl + 拖曳,拉到剛剛建立的 ViewController 上

image

選擇 show detail

image

就會長這樣:

iamge

再來新增一個 ViewController

image

接著讓新的 storyboard viewcontroller 連接到剛剛新增的 DetailViewController 程式碼

記得先點選 ViewController

image

在 storyboard 的 DetailViewController 中拉一個 label

並且將該 label 連接到 DetailViewController 的程式碼中

image

因此 DetailViewController 就會變這樣:

class DetailViewController: UIViewController {
    @IBOutlet var label: UILabel!

接著再來把 DetailViewController 加入兩行 code:

class DetailViewController: UIViewController {
    @IBOutlet var label: UILabel!
    
    var index: Int = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        
        label.text = "\(index)"
    }

新增一個 index 變數,再來就是在 viewDidLoad 時,將該 label 的文字改成 index

這個 index 的值會在 TableView 中傳遞給 DetailViewController

接下來就要改變 index 的值了,回到 ViewController.swift 中

加入以下程式碼:

func tableView(tableView: UITableView!, didSelectRowAtIndexPath indexPath: NSIndexPath!) {
      
	let cell = tableView.cellForRowAtIndexPath(indexPath)
	self.performSegueWithIdentifier("showDetail", sender: cell)
    
}
    
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    if segue.identifier == "showDetail" {
		let indexPath = self.tableSample.indexPathForSelectedRow()?.row
	((segue.destinationViewController) as DetailViewController).index=indexPath!
	}
}

大家可能會覺得好奇裡頭有個 identifier 叫做 ‘showDetail’,這個東西是自己自定的,一定要定,不然在傳遞時會不知道要抓哪個 segue

image

再來確認一下是否 dataSource 與 delegate 是否都有 reference 到

image

執行,就可以發現可以點進去了!

不過因為我們還沒有和 NavigationView 做結合,因此要自己做按鈕點回去 XD

在這邊就先不做了,因為明天就可以兩個結合起來了!