iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
自我挑戰組

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

Swift純Code之旅 Day19. 「ViewController好亂(1) - MVC介紹)」

  • 分享至 

  • xImage
  •  

前言

做到現在會發現每個ViewController內的程式碼都一大堆,有畫面元件,有邏輯,有Model,
在閱讀上面真的很不友善。
因此今天就要來將他們分類分類,首先會將畫面元件給分離出去。

苦口婆心

MVC網路上有很多教學了,我也來用我的方式來用我的理解跟各位分享一下MVC的概念,
MVC呢,就是將一個畫面分成「 Model(管理Model)」、「 View(管理畫面) 」、「 Controller(管理邏輯)」,

這樣的好處是:

  • 當Model出問題了,就去Model裡面解決問題
  • 當畫面出問題了,就去View裡面解決問題
  • 當邏輯出問題了,就去Controller裡面解決問題

若沒分類的話,就會在同一個ViewController找問題,那就如同海底撈針一樣,費時又費神又費玉清,
講這麼多,那該如何分類呢?

我們就先不用原先的專案來實作分類了,怕太複雜。
因此先創建一個小專案「MVCTest」來實作分類(創專案可以參考前面文章)

實作

首先建立一個「MVCTestViewController」

import UIKit
import SnapKit

class MVCTestViewController: UIViewController {

    // 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
    }()
    
    // MARK: - Life Cycle
    override func viewDidLoad() {
        self.view.backgroundColor = .white
        super.viewDidLoad()
        setViews()
        setLayouts()
    }
    
    
    // MARK: - Function
    @objc func buttonAction() {
        self.label.text = self.textField.text
    }
    
    
    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)
        }
    }
}

實作出來的效果如下:

  • 會有一個TextField,一個Button,一個Label
  • 當按下Button時,Label會顯示TextField的文字

光這樣一個小小的功能,ViewController內的程式碼就快100行了
那你說如果是大專案,要修Bug不是海底撈針嗎?

那明天呢,我們就會開始進行MVC整理術,看看整理完後的Code會變得如何吧


上一篇
Swift純Code之旅 Day18. 「選取TableViewCell」
下一篇
Swift純Code之旅 Day20. 「ViewController好亂(2) - MVC畫面分離」
系列文
30天Swift純Code之旅 - 鬧鐘篇30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言