昨天已經將要用來實作MVC分離的範例完成了,那今天就馬上來實作MVC分離吧!
首先先創一個資料夾並命名為:「MVCTest」,並把「MVCTestViewController」放進去,
其餘的檔案可以創個資料夾存放。
接著開始將「MVCTestViewController」內的畫面分離出來
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內
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時,出現錯誤
2.ViewController內的Function找不到Label & textField了
3.Button的Function要如何設定呢?
讓我們照順序一個一個的來解決吧!
讓我們來看看Error寫什麼吧
Error訴說著:「MVCTestView」內並沒有「view」這個成員,
恩.....什麼意思呢?
以下為View 和 ViewController 的關係圖
可以看到ViewController上面蓋著一個View,這個View就是用來顯示畫面的
因為原先這段Code是在ViewController內寫的,那ViewController一定需要一個View來顯示畫面,
所以才需要寫成
self.view.addSubview(textField)
那既然我們已經在View裡面了,就不必再用到view這個member了,將所有的view拿掉,修改成以下即可
現在剩下兩個錯誤了,由於這兩個錯誤比較有關,因此明天一次解決!