[iOS] 아이폰 BMI 앱 제작하기

서론

자! 이번 시간에는 저번 포스팅에 이어서 BMI 앱을 제작하는 과정에 대해서 포스팅을 해보려고 합니다.

저번 포스팅 내용이 궁금하신 분들은 여기를 참고해주세요!

 

그럼 바로 시작하겠습니다!

Object 배치

우선 Storyboard로 프로젝트 파일을 하나 만들어주시고 Main.storyboard로 들어가보면 아무것도 없는 빈 화면이 나올 텐데 아래 사진처럼 Label과 Button, TextField, ImageView를 배치해주세요!

 

버튼 디자인 수정(라운드 값 넣기)

근데 버튼이 너무 각져서 시각적으로 좀 별로니까 라운드를 좀 넣어보겠습니다.

 

라운드를 넣는 방법은 소스로 하는 방법과 identity inspector를 이용하는 방법 이렇게 2가지가 있는데 지금은 identity inspector으로 해보겠습니다.

 

버튼을 선택한 후 Identity Inspector를 클릭한 후 User Defined Runtime Attributes에서 +를 클릭해줍니다.

그리고 아래처럼 Key Path : layer.cornerRadius, Type : Number, Value : 7을 입력해줍니다.

(숫자가 높을수록 라운드가 더 강해집니다)

 

참고로 시뮬레이터를 돌려야 라운드 값이 들어간 것을 확인할 수 있습니다.

(canvas에서는 라운드가 들어간 게 안 보여요!)

Identity Inspector

만약 소스에서 변경하고 싶다면 button도 아웃렛을 만들어서

button.clipsToBounds = true
button.layer.cornerRadius = 0.5 * button.bounds.size.height

이렇게 입력해주세요!

Text Field - Keyboard Type : Decimal Pad

자 그리고 Height와 Weight를 입력할 때 그냥 키보드에서 숫자를 골라서 입력을 해도 크게 문제될 건 없지만 숫자만 들어가는 곳이니까 기왕이면 키보드에 숫자만 뜨는게 좋잖아요? 그러니까 설정을 살짝 넣어줍시다.

 

Text Field의 Keyboard Type을 Decimal Pad로 바꿔주겠습니다.

Text Field - Keyboard Type : Decimal Pad

소스 작성

이제 UI 부분은 마무리가 됐으니 소스를 작성해보겠습니다.

 

UI에 있는 TextField, Label, Button을 소스에 연결해주어야 합니다.

@IBOutlet weak var txtHeight: UITextField!

@IBOutlet weak var txtWeight: UITextField!

@IBOutlet weak var lblResult: UILabel!

@IBAction func calcBmi(_ sender: UIButton) {

}

이렇게 되도록 연결해주세요!

 

@IBAction func calcBmi(_ sender: UIButton) {
    let height = Double(txtHeight.text!)!
    let weight = Double(txtWeight.text!)!
    print(height,weight)
    let bmi = weight/(height*height*0.0001)
    let shortenedBmi = String(format: "%.1f", bmi)
    var body = ""
    if bmi >= 40 {
        body = "3단계 비만"
    } else if bmi >= 30 && bmi < 40 {
        body = "2단계 비만"
    } else if bmi >= 25 && bmi < 30 {
        body = "1단계 비만"
    } else if bmi >= 18.5 && bmi < 25 {
        body = "정상"
    } else {
        body = "저체중"
    }
    print("BMI:\(shortenedBmi), 판정:\(body)")
}

그리고 @IBAction func calcBmi(_ sender: UIButton) { }

이 소스의 중괄호 안에 위에처럼 소스를 채워주면 BMI 앱이 작동이 됩니다. 하지만 이 소스에는 문제점이 하나 있습니다.

 

바로 Height와 Weight 칸에 아무것도 입력을 안 하고 버튼을 누르면 앱으 크래쉬가 나면서 강제 종료 된다는 것입니다.

 

그 문제를 해결하기 위해서 소스를 조금 수정해보겠습니다.

저는 이렇게 수정해보았습니다.

 

자 이제 실행을 해보겠습니다.

 

실행 결과

실행 결과

값을 안 넣고 버튼을 누른 화면

결과  창 색 바꾸기

자 이대로 끝내도 되긴 하지만 저는 BMI 결과에 따라 결과 창의 색이 변하도록 소스를 조금 수정해봤습니다.

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var txtHeight: UITextField!
    @IBOutlet weak var txtWeight: UITextField!
    @IBOutlet weak var lblResult: UILabel!
    @IBAction func calcBmi(_ sender: UIButton) {
        if txtHeight.text == "" || txtWeight.text == "" {
            lblResult.textColor = .red
            lblResult.text = "키와 체중을 입력하세요!"
            return
        } else {
            let weight = Double(txtWeight.text!)!
            let height = Double(txtHeight.text!)!
            let bmi = weight / (height*height*0.0001) // kg/m*m
            let shortenedBmi = String(format: "%.1f", bmi)
            var body = ""
            var color = UIColor.white
            if bmi >= 40 {
                color = UIColor(displayP3Red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)
                body = "3단계 비만"
            } else if bmi >= 30 && bmi < 40 {
                color = UIColor(displayP3Red: 0.7, green: 0.0, blue: 0.0, alpha: 1.0)
                body = "2단계 비만"
            } else if bmi >= 25 && bmi < 30 {
                color = UIColor(displayP3Red: 0.4, green: 0.0, blue: 0.0, alpha: 1.0)
                body = "1단계 비만"
            } else if bmi >= 18.5 && bmi < 25 {
                color = UIColor(displayP3Red: 0.0, green: 0.0, blue: 1.0, alpha: 1.0)
                // color = UIColor.blue
                body = "정상"
            } else {
                color = UIColor(displayP3Red: 0.0, green: 1.0, blue: 0.0, alpha: 1.0)
                body = "저체중"
            }
            print("BMI:\(shortenedBmi), 판정:\(body)")
            lblResult.backgroundColor = color
            lblResult.clipsToBounds = true
            lblResult.layer.cornerRadius = 10
            lblResult.text = " BMI:\(shortenedBmi), 판정:\(body) "
        }
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

소스가 바뀐 게 보이죠? P3 색영역을 바탕으로 RGB값을 넣은 것입니다.

 

마무리

이렇게 BMI 앱을 한 번 제작해보았는데요! 혹시 만드는 과정 중에 이해가 안 되거나 헷갈리는 부분이 있다면 질문 남겨주세요!!

 

감사합니다.

---

틀린 부분이 있거나 더 좋은 내용 훈수 환영합니다!

공감과 댓글 부탁드립니다.