iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
自我挑戰組

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

Swift純Code之旅 Day20. 「ViewController好亂(2) - MVC畫面分離」

  • 分享至 

  • xImage
  •  

前言

昨天已經將要用來實作MVC分離的範例完成了,那今天就馬上來實作MVC分離吧!

實作

首先先創一個資料夾並命名為:「MVCTest」,並把「MVCTestViewController」放進去,
其餘的檔案可以創個資料夾存放。
https://ithelp.ithome.com.tw/upload/images/20210930/201089992aKFpar1i5.png

接著開始將「MVCTestViewController」內的畫面分離出來

  1. 創建一個View,並命名為為「MVCTestView」
    https://ithelp.ithome.com.tw/upload/images/20210930/20108999DsARGJPW4G.png

2.創好之後,View裡面會是空的,接著加入以下init程式碼:

class MVCTestView: UIView {
    
    // initial
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

3.接著回到ViewController內,將TextField, Label, Button搬移到View內
https://ithelp.ithome.com.tw/upload/images/20210930/20108999lNURGxfmCr.png

4.接著把SetView() 跟 SetLayout() 也一併搬過來

這時候View的內容會如下


import UIKit

class MVCTestView: UIView {
    
    // MARK: - Properties
    let textField: UITextField = {
        let textField = UITextField()
        textField.placeholder = "請輸入文字"
        textField.layer.borderWidth = 1
        textField.layer.cornerRadius = 10
        textField.borderStyle = .roundedRect
        return textField
    }()
    
    let button: UIButton = {
        let button = UIButton()
        button.largeContentTitle = "123"
        button.setTitle("按我", for: .normal)
        button.setTitleColor(.brown, for: .normal)
        button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
        return button
    }()
    
    let label: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 40)
        label.textAlignment = .center
        label.textColor = .systemBlue
        label.layer.borderWidth = 1
        label.layer.borderColor = UIColor.systemBlue.cgColor
        label.layer.cornerRadius = 30
        return label
    }()
    
    // initial
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func setViews() {
        self.view.addSubview(textField)
        self.view.addSubview(button)
        self.view.addSubview(label)
    }
    
    func setLayouts() {
        textField.snp.makeConstraints { make in
            make.top.equalTo(self.view.safeAreaLayoutGuide).offset(50)
            make.centerX.equalTo(self.view)
            make.width.equalTo(300)
            make.height.equalTo(40)
        }
        
        button.snp.makeConstraints { make in
            make.top.equalTo(textField.snp.bottom).offset(30)
            make.centerX.equalTo(self.view)
            make.height.equalTo(40)
            make.width.equalTo(100)
        }
        
        label.snp.makeConstraints { make in
            make.height.equalTo(100)
            make.width.equalTo(300)
            make.top.equalTo(button.snp.bottom).offset(100)
            make.centerX.equalTo(self.view)
        }
    }
}

這樣就完成搬家囉,但是會發現有幾個錯誤的部分:

1.setView & setLayout時,出現錯誤https://ithelp.ithome.com.tw/upload/images/20210930/2010899997Pja4PGIq.png

2.ViewController內的Function找不到Label & textField了https://ithelp.ithome.com.tw/upload/images/20210930/20108999RoJ9uxDcsI.png

3.Button的Function要如何設定呢? https://ithelp.ithome.com.tw/upload/images/20210930/201089996PR2eE2YWN.png

讓我們照順序一個一個的來解決吧!


1.setView & setLayout時,出現錯誤

讓我們來看看Error寫什麼吧
https://ithelp.ithome.com.tw/upload/images/20210930/20108999nJCRdm4WSc.png

Error訴說著:「MVCTestView」內並沒有「view」這個成員,

恩.....什麼意思呢?

以下為View 和 ViewController 的關係圖

可以看到ViewController上面蓋著一個View,這個View就是用來顯示畫面的

https://ithelp.ithome.com.tw/upload/images/20210930/201089999LOL1iwHcX.jpg

因為原先這段Code是在ViewController內寫的,那ViewController一定需要一個View來顯示畫面,
所以才需要寫成

self.view.addSubview(textField)

那既然我們已經在View裡面了,就不必再用到view這個member了,將所有的view拿掉,修改成以下即可
https://ithelp.ithome.com.tw/upload/images/20210930/20108999Wxg628vz5p.png

現在剩下兩個錯誤了,由於這兩個錯誤比較有關,因此明天一次解決!/images/emoticon/emoticon01.gif


上一篇
Swift純Code之旅 Day19. 「ViewController好亂(1) - MVC介紹)」
下一篇
Swift純Code之旅 Day21. 「ViewController好亂(3) - MVC下的Button動作」
系列文
30天Swift純Code之旅 - 鬧鐘篇30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言