iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 9
1

前言

iOS App開發有幾個排版方式一定要學分別是Scroll View、Table View、Collection View。只要了解這三種呈現方式,基本上所有市面上看得到的版面,你都可以複製了。

今天就用Table View來為我們的剪刀、石頭、布建立一個戰績表吧!

Table View的使用方式我就不贅述了,下面是我找到不錯的講解,大家可以參考一下。

http://www.ralfebert.de/tutorials/ios-swift-uitableviewcontroller/

1.為我們的比賽頁面擴增

  • 新增一個label用來顯示game round,用藍線拖曳至(rps)ViewController中,並命名為gameRoundLabel
  • 新增一個button用來切換至record table

2.在(rps)View Controller中新增gameround計數

在Class:ViewController中新增一個變數gameRoundNum

var gameRoundNum = 0

在@IBAction func start(_ sender: UIButton)中累加gameRoundNum,並讓gmaeRoundLable顯示出來

gameRoundNum += 1
        gameRoundLabel.text = "Game \(gameRoundNum)"
        
switch checkWinner {
// ...略
}

PS:注意一下,這段程式碼要加在switch判定"之前",否則switch執行結束就會跳離func start,如果寫在switch之後,就永遠不會執行

3.在(rps)View Controller中新增一個陣列紀錄比賽結果

在Class:ViewController中新增一個變數陣列recordListInRps

recordListInRps: [String] = []

接著在@IBAction func start(_ sender: UIButton)中判別勝負的地方把勝負結果加入陣列recordListInRps

switch checkWinner {
        case let (x, y) where x == y:
            recordListInRps.append("Game \(gameRoundNum) 平手")
            return winnerLabel.text = "平手"
        case (0, 1):
            recordListInRps.append("Game \(gameRoundNum) winner is \(name1!)")
            return winnerLabel.text = "\(name1!)獲勝"
        case (0, 2):
            recordListInRps.append("Game \(gameRoundNum) winner is \(name2!)")
            return winnerLabel.text = "\(name2!)獲勝"
        case (1, 0):
            recordListInRps.append("Game \(gameRoundNum) winner is \(name2!)")
            return winnerLabel.text = "\(name2!)獲勝"
        case (1, 2):
            recordListInRps.append("Game \(gameRoundNum) winner is \(name1!)")
            return winnerLabel.text = "\(name1!)獲勝"
        case (2, 0):
            recordListInRps.append("Game \(gameRoundNum) winner is \(name1!)")
            return winnerLabel.text = "\(name1!)獲勝"
        case (2, 1):
            recordListInRps.append("Game \(gameRoundNum) winner is \(name2!)")
            return winnerLabel.text = "\(name2!)獲勝"
        case (_, _): return
        }

4.拖曳一個Table View Controller進Main.storyboard,並用第一步驟創立的button連結過來

連結過來的segue我們命名為segue_rps_to_table

5.新建立一個RecordTable繼承UITableViewController

記得將Table View Controller的class選擇這個檔案

6.在RecordTable中新增code

新增一個陣列準備接收(rps)View Controller帶過來的資料

var recordListInTableView: [String] = []

因為我們只要條列比賽勝負,所以段落就只要一個

override func numberOfSections(in tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 1
    }

顯示資料數就是比賽次數=陣列資料數

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return recordListInTableView.count
    }

儲存格顯示內容

 override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let tablecell = tableView.dequeueReusableCell(withIdentifier: "tableCell", for: indexPath)

        tablecell.textLabel?.text = recordListInTableView[indexPath.row]

        return tablecell
    }

7.從rps把勝負資料拋轉到Table View Controller

如同上一篇文章一樣要把玩家名稱拋轉到rps頁面,我們要在rps內覆寫prepare的函數

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "segue_rps_to_table" {    //確認我們的動作頁面是切到tableView Controller
            let table_VC = segue.destination as! RecordTable
            if recordListInRps != [] {
                table_VC.recordListInTableView = recordListInRps
            } else {
                table_VC.recordListInTableView = ["比賽尚未開始"]
            }
        }
    }

8.成果如下


上一篇
Day8 - 誰勝誰負
下一篇
Day-10 莊家閒家 (Collection View 應用)
系列文
無中生有-從SWIFT語法學習到iOS APP的開發30

尚未有邦友留言

立即登入留言