Swift纯Code之旅 Day20. 「ViewController好乱(2) - MVC画面分离」

前言

昨天已经将要用来实作MVC分离的范例完成了，那今天就马上来实作MVC分离吧！

实作

首先先创一个资料夹并命名为：「MVCTest」，并把「MVCTestViewController」放进去，
其余的档案可以创个资料夹存放。

接着开始将「MVCTestViewController」内的画面分离出来

1. 创建一个View，并命名为为「MVCTestView」
   

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要如何设定呢？

让我们照顺序一个一个的来解决吧！

1.setView & setLayout时，出现错误

让我们来看看Error写什麽吧

Error诉说着：「MVCTestView」内并没有「view」这个成员，

恩.....什麽意思呢？

以下为View 和 ViewController 的关系图

可以看到ViewController上面盖着一个View，这个View就是用来显示画面的

因为原先这段Code是在ViewController内写的，那ViewController一定需要一个View来显示画面，
所以才需要写成

self.view.addSubview(textField)

那既然我们已经在View里面了，就不必再用到view这个member了，将所有的view拿掉，修改成以下即可

现在剩下两个错误了，由於这两个错误比较有关，因此明天一次解决！