Swift纯Code之旅 Day21. 「ViewController好乱(3) - MVC下的Button动作」

前言

将一些画面相关元件跟Function从「MVCTestViewController」搬去「MVCTestView」後，
发生了三个Error。
昨天已经解决掉一个了，今天接着解决剩下两个吧！

修理

1.「MVCTestViewController」内的Function找不到Label & textField了

解决方法：

「MVCTestViewController」会找不到 Label & textField呢，是因为我们将它搬到「MVCTestView」里面了
因此现在要在「MVCTestViewController」内，把「MVCTestView」给召唤出来

let mvcTestView = MVCTestView()

之後再覆写 Function: 「loadView()」，并在里面指定该ViewController的View

override func loadView() {
        // 将 MVCTestViewController 的 view 指定为 MVCTestView
        self.view = mvcTestView
    }

这样子「MVCTestViewController」的View，就会是「MVCTestView」了
将着将有问题的Code

@objc func buttonAction() {
        self.label.text = self.textField.text
    }

更改为

@objc func buttonAction() {
        // mvcTestView内的Label.text = mvcTestView内的textField
        mvcTestView.label.text = mvcTestView.textField.text
    }

这样整个「MVCTestViewController」就没有错误罗！

2.Button的Function要如何设定呢？

1. 首先在View建立一个闭包

   var buttonAction: (() -> Void)?
   

2. 接着建立一个Function，里面放这个闭包

   @objc func buttonDidTap() {
           buttonAction?()
       }
   

3. 接着帮该Button新增Function进去
   (Button必须用lazy var实作出来，button按钮的功能才会生效)
   

这时候View的Code会如下

class MVCTestView: UIView {
    
    var buttonAction: (() -> Void)?
    
    // MARK: - Properties
    let textField: UITextField = {
        let textField = UITextField()
        textField.placeholder = "请输入文字"
        textField.layer.borderWidth = 1
        textField.layer.cornerRadius = 10
        textField.borderStyle = .roundedRect
        return textField
    }()
    
    lazy var button: UIButton = {
        let button = UIButton()
        button.largeContentTitle = "123"
        button.setTitle("按我", for: .normal)
        button.setTitleColor(.brown, for: .normal)
        button.addTarget(self, action: #selector(buttonDidTap), 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)
        self.backgroundColor = .white
        setViews()
        setLayouts()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    @objc func buttonDidTap() {
        buttonAction?()
    }
    
    func setViews() {
        self.addSubview(textField)
        self.addSubview(button)
        self.addSubview(label)
    }
    
    func setLayouts() {
        textField.snp.makeConstraints { make in
            make.top.equalTo(self.safeAreaLayoutGuide).offset(50)
            make.centerX.equalTo(self)
            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)
            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)
        }
    }
}

这时候执行看看吧！
疑？按了完全没用欸

没错！那是因为还没设定「MVCTestView」里面的「ButtonDidTap」
设定方法很简单，先到「MVCTestViewController」内，新增以下Code

 override func viewDidLoad() {
        super.viewDidLoad()
        // 设定mvcTestView内的buttonAction
        self.mvcTestView.buttonAction = buttonAction
    }

再执行看看吧！

这样View就跟ViewController分开罗！
也可以看到ViewController内Code的行数剩下30几行，先不论Bug好找，自己看了也舒服