앨런 Swift 앱 만들기 UIKit | BMI 만들기 + MVC 패턴

안녕하세요

오늘은 제가 강의를 보며 배웠던걸 정리하고자 합니다

 

 

 

⭐️인프런에서 앨런님의 swift 앱 만들기⭐️

를 통해서 정리하였습니다

 

정말 정말 잘 설명해주기 때문에 제가 정리해놓은것 보다 보시는걸 추천드립니다

 

자료제공은 절대 불가합니다

 

---

 

 

ViewController와 스토리보드에 있는 객체들을 연결시켜줍니다

 

그리고 2번째 화면을 위해 뷰컨트롤러를 하나 더 생성하고

 

 

 

스토리보드의 객체들과 SecondViewController를 연결 시켜줍니다

그리고 첫 번째 BMI계산하기를 누른 후 Control을 누른채 다음 화면에 드래그하여

버튼으로 통한 직접 세그웨이를 만들어 줍니다

 

 

우선 이렇게 연결만 해준 후 MVC패턴을 구현하고자 합니다

 

MVC패턴

|

Model-View-Controller

 

Model

비지니스 로직

화면과 전혀 관련이 없는 로직과 데이터 관련

 

View

화면 / UI관련

사용자 화면 표시(뷰컨트롤러의 명령을 받아 화면에 표시)

 

Controller

뷰컨트롤러

모델의 정보를 어떻게 뷰에 표시할 지를 해석해서 전달

(중재)

 

서로 밀접한 관계가 있습니다

 

Model은 Controller와 서로 상호작용을 하며

Model이 Controller에 정보를 전달하고

반대로 Controller가 Model에게 데이터를 물어보는 관계입니다

 

그리고 Controller와 View 또한 상호관계에 있습니다

이벤트를 전달하며 업데이트된 내용을 전달(IBAction / IBOutlet)하는 관계를 가지고 있습니다

 

 

BMI MVC패턴

 

Model

struct BMI {
    let value: Double
    let advice: String
    let matchColor: UIColor
}

 

구조체로 통하여 BMI값과 관련된 데이터를 저장하고 있는걸 볼 수 있습니다

구조체는 기본적으로 지정생성자를 생성하지 않아도 기본적으로 내장하고 있기 때문에

작성하지 않아도 됩니다

 

struct BMICalculatorManager {
    
    private var bmi: BMI?
    
      //BMI 사용자 데이터
    mutating func getBMI(height: String, weight: String) -> BMI {
        
        calculateBMI(height: height, weight: weight)
        
        return bmi ?? BMI(value: 0.0, advice: "⚠️ERROR⚠️", matchColor: .white)
    }
    
    //BMI 수치 계산
    mutating private func calculateBMI(height: String, weight: String) {
        guard let h = Double(height), let w = Double(weight) else {
            bmi = BMI(value: 0.0, advice: "⚠️ERROR⚠️", matchColor: .white)
            return
        }
        
        var bmiNum = w / (h*h) * 10000
        //⭐️첫째 자리까지 반올림
        bmiNum = round(bmiNum * 10) / 10
        
        switch bmiNum {
        case ..<18.6:
            let color = UIColor(displayP3Red: 22/255,
                                green: 231/255,
                                blue: 207/255,
                                alpha: 1)
            bmi = BMI(value: bmiNum, advice: "저체중", matchColor: color)
            
        case 18.6..<23.0:
            let color = UIColor(displayP3Red: 212/255,
                                green: 251/255,
                                blue: 121/255,
                                alpha: 1)
            bmi = BMI(value: bmiNum, advice: "표준", matchColor: color)
            
            
        case 23.0..<25.0:
            let color = UIColor(displayP3Red: 218/255,
                                green: 127/255,
                                blue: 163/255,
                                alpha: 1)
            bmi = BMI(value: bmiNum, advice: "과체중", matchColor: color)
        case 25.0..<30.0:
            let color = UIColor(displayP3Red: 255/255,
                                green: 150/255,
                                blue: 141/255,
                                alpha: 1)
            bmi = BMI(value: bmiNum, advice: "중도비만", matchColor: color)
        case 30.0...:
            let color = UIColor(displayP3Red: 255/255,
                                green: 100/255,
                                blue: 78/255,
                                alpha: 1)
            bmi = BMI(value: bmiNum, advice: "고도비만", matchColor: color)
        default:
            bmi = BMI(value: 0.0, advice: "문제발생", matchColor: UIColor.white)
        }
    }
    
}

 

BMICalculatorManager는 BMI 계산 로직을 관리하고 있습니다

그리고 BMI구조체는 BMI 값 등의 데이터를 저장하고 있는걸 볼 수 있습니다 

 

 

 

Controller

 var bmiManager = BMICalculatorManager()
 
 
  override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        delegateInit()
        makeUI()
    }
    
    private func delegateInit() {
        heightTextField.delegate = self
        weightTextField.delegate = self
    }

    private func makeUI() {
        mainLabel.text = "키와 몸무게를 입력하세요"
        //모서리 둥글게
        calculateButton.layer.cornerRadius = 5
        heightTextField.placeholder = "cm단위로 입력해주세요"
        weightTextField.placeholder = "kg단위로 입력해주세요"
    }
    
    override func shouldPerformSegue(withIdentifier identifier: String, sender: Any?) -> Bool {
        
        if heightTextField.text == "" || weightTextField.text == "" {
            mainLabel.text = "키와 몸무게를 입력하셔야합니다"
            mainLabel.textColor = .red
            return false
        }
        mainLabelInit()
            
        return true
    }
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "toSecondVC" {
            let secondVC = segue.destination as! SecondViewController
            secondVC.modalPresentationStyle = .fullScreen
            
            let bmi = bmiManager.getBMI(height: heightTextField.text!, weight: weightTextField.text!)
            
            secondVC.bmi = bmi
        }
        
        //다음 화면 넘어갔을 때 텍스트 필드 초기화
        heightTextField.text = ""
        weightTextField.text = ""
    }
    
    private func mainLabelInit() {
        mainLabel.text = "키와 몸무게를 입력해주세요"
        mainLabel.textColor = .black
    }
    }
    
    extension ViewController: UITextFieldDelegate {
    //입력 or 삭제 할 때(한 글자) 호출 (애플에서 제공하는 메서드)
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        if Int(string) != nil || string == "" { //숫자로 변환 || 지울 때
            return true
        }
        return false //글자 입력 허용 ❌
    }
    
    //ENTER키 허용 유무 (애플에서 제공하는 메서드)
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        
        //키 몸무게 입력 완료
        if heightTextField.text != "", weightTextField.text != "" {
            weightTextField.resignFirstResponder()
            return true
        } else if heightTextField.text != "" {
            //키 입력 후 몸무게 입력하도록 넘겨줌
            weightTextField.becomeFirstResponder()
            return true
        }
        return false
    }
    
    //텍스트 필드 외 Touch - 키보드 비활성
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        heightTextField.resignFirstResponder()
        weightTextField.resignFirstResponder()
    }
}

 

Model 인 Bmi를 들고와서 사용자가 키와 몸무게를 정상적으로 입력했을 때 계산하여 결과를 다음 화면에 넘겨주는걸 볼 수 있습니다

 

그리고 코드를 세부적으로 본다면

 

textField를 사용하고 싶다면 반드시 delegate를 사용해야합니다

그렇게 하면 textfield를 사용하여 firstResponder을 했는지에 대한 유무를 알 수 있고

textfielddelegate에서 제공하는 여러개의 메서드를 통하여

텍스트 필드 이외를 터치했을 시 키보드가 비활성 기능을 touchesBegan메서드에서

textfield.resignResponder()

만들 수 있습니다

 

 

그리고 Enter키를 사용했을 때 다음 줄로 넘어가도록 하는 기능도 textFieldShouldReturn메서드를 사용해서

쉽게 구현할 수 있습니다

키를 입력한 다음에 다음 줄로 넘어가게 하고 싶다면 다음 텍스트 필드.becomFirstResponder()메서드를 사용하면 다음 줄로 넘어가는걸

확인할 수 있습니다

 

만약 입력을 하지 않았을 때는 넘어가지 않게 textFieldShouldReturn의 return Value를 false로 설정하게 되면 넘어가지 않는걸 확인할 수 있습니다

 

 

var bmi: BMI?
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        configureData()
        makeUI()
    }
    
    private func configureData() {
        bmiNumberLabel.text = "\(bmi!.value)"
        bmiNumberLabel.backgroundColor = bmi?.matchColor
        adviceLabel.text = bmi?.advice
    }
    
    private func makeUI() {
        bmiNumberLabel.clipsToBounds = true
        bmiNumberLabel.layer.cornerRadius = 8
        
        backButton.layer.cornerRadius = 5
    }

    @IBAction func backButtonTapped(_ sender: UIButton) {
        self.dismiss(animated: true, completion: nil)
    }

 

그 값을 다음 화면에 받아서 화면에 값을 표현하는걸 볼 수 있습니다