iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
自我挑戰組

30天Swift純Code之旅 - 鬧鐘篇系列 第 14

Swift純Code之旅 Day14. 「TableView(5) - 點擊TableViewCell」

前言

我們現在畫面都已經跟Iphone內建的鬧鐘一樣了,但虛有其表是不行的,
馬上來實作TableViewCell的點擊功能吧!
今天會先實作較單純的「標籤」欄位。
https://ithelp.ithome.com.tw/upload/images/20210924/20108999sN6kMomWHk.png

實作

想要讓TableViewCell點擊後有功能,就必須實作TableView Delegate & DataSource內的
didSelectRowAt(),讓我們先新增以下的Code:

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        
        switch indexPath.row {
        // 點擊第一欄時,要做什麼
        case 0:
            break
        // 點擊第二欄時,要做什麼
        case 1:
            break
        // 點擊第三欄時,要做什麼
        case 2:
            break
        // 點擊第四欄時,要做什麼
        case 3:
            break
        default:
            break
        }
    }

由於我們是要做第二個欄位的內容,因此需要在Case 1做更動,
那我們看一下IPhone點下第二個欄位時會做什麼事:

可以看到點下去後,會有一個新畫面由右而左出現,
因此我們需要加新增一個ViewController,將其命名為:「AlarmLabelViewController」

class AlarmLabelViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        initView()
    }
    
    func initView() {
        self.view.backgroundColor = .white
    }
}

之後在TableView的「didSelectRowAt()」新增以下程式碼:

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        
        switch indexPath.row {
        // 點擊第一欄時,要做什麼
        case 0:
            break
        // 點擊第二欄時,要做什麼
        case 1:
            let vc = AlarmLabelViewController()
            // 使用navigationController的pushViewController(),達到畫面由右至左的效果。
            self.navigationController?.pushViewController(vc, animated: true)
        // 點擊第三欄時,要做什麼
        case 2:
            break
        // 點擊第四欄時,要做什麼
        case 3:
            break
        default:
            break
        }
    }

現在應該會像以下這樣:

接著只要實作AlarmLabelViewController()的畫面:

class AlarmLabelViewController: UIViewController {

    let alarmLabelTextField: UITextField = {
        let textField = UITextField()
        textField.text = "鬧鐘"
        textField.textColor = .white
        textField.backgroundColor = #colorLiteral(red: 0.1537905931, green: 0.1488661468, blue: 0.1617964804, alpha: 1)
        textField.clearButtonMode = .whileEditing
        textField.borderStyle = .roundedRect
        textField.font = UIFont.systemFont(ofSize: 20)
        return textField
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        initView()
        setViews()
        setLayouts()
    }
    
    func initView() {
        // 設定這個ViewController的背景色
        self.view.backgroundColor = #colorLiteral(red: 0.1097886786, green: 0.1098149046, blue: 0.1183715835, alpha: 1)
        // 設定NavigationBar的文字
        self.title = "標籤"
        // 設定navigation BackButton Color
        self.navigationController?.navigationBar.tintColor = .orange
    }
    
    func setViews() {
        self.view.addSubview(alarmLabelTextField)
    }
    
    func setLayouts() {
        alarmLabelTextField.snp.makeConstraints { make in
            make.top.equalTo(self.view).offset(300)
            make.centerX.equalTo(self.view)
            make.width.equalTo(self.view)
            make.height.equalTo(50)
        }
    }
}

明天就來説說新手都頭痛的Delegate傳值囉


上一篇
Swift純Code之旅 Day13. 「TableView(4) - 使用兩個TableViewCell」
下一篇
Swift純Code之旅 Day15. 「頁面傳值?代理? Delegate?Protocol?(1)」
系列文
30天Swift純Code之旅 - 鬧鐘篇30

尚未有邦友留言

立即登入留言