[iOS 프로그래밍 기초] 11주차

(1) BMI App을 챗 지피티에게 물어보고 다운로드를 많이 받은 유사 앱에 대해서 분석하고 기획서를 작성해달라고 하기.

 

스토리보드를 통해서 ctrl 드래그 해서 소스에 붙인 모습이다.

이렇게 텍스트와 레이블, 버튼을 추가하게되면

View controller를 누른뒤 커넥션 인스펙터에 들어가게되면 해당 사진처럼 나오게 된다. 텍스트 필드와 레이블은 아울렛으로 추가했고 버튼 ui는 액션으로 추가했기 때문에 3개의 아울렛과 1개의 액션이 연결된것을 알 수 있다.

 

키에 170의 값을 넣고 몸무게에 60값을 넣어서 Bmi 계산의 버튼을 누르게 되면 해당 왼쪽에 출력문에 입력받은 값과 그에 관련된 값들이 출력된것을 알 수 있다. 아직은 결과 부분에 코드를 작성하지 않고 출력문만 작성했기 때문에 결과 칸에는 값이 안나온다.

 

 

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var txtHeight: UITextField!
    
    @IBOutlet weak var txtWeight: UITextField!
    
    @IBOutlet weak var lbResult: UILabel!
    
    @IBAction func calcBmi(_ sender: UIButton) {
        if(txtHeight.text == "" || txtWeight.text == ""){
            lbResult.textColor = .green
            lbResult.text = "키와 체중을 입력하세요!"
            return
        }else{
            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 = "저체중" }
            lbResult.text = "BMI:\(shortenedBmi), 판정:\(body)"
        }
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    
}

bmi 코드를 작성한 소스이다.

값을 입력해서 계산 버튼을 누르게 되면 그 아래 레이블에 값을 계산한 결과가 나오게 된다.

 

import UIKit

class ViewController: UIViewController {
    // 키 입력 텍스트 필드
    @IBOutlet weak var txtHeight: UITextField!
    
    // 체중 입력 텍스트 필드
    @IBOutlet weak var txtWeight: UITextField!
    
    // 결과 레이블
    @IBOutlet weak var lbResult: UILabel!
    
    // BMI 계산 버튼 액션 메서드
    @IBAction func calcBmi(_ sender: UIButton) {
        // 키와 체중이 입력되지 않았을 경우 메시지 출력
        if(txtHeight.text == "" || txtWeight.text == ""){
            lbResult.textColor = .green
            lbResult.text = "키와 체중을 입력하세요!"
            return
        } else {
            // 키와 체중을 Double 타입으로 변환
            let height = Double(txtHeight.text!)!
            let weight = Double(txtWeight.text!)!
            print(height, weight)
            
            // BMI 계산
            let bmi = weight / (height * height * 0.0001)
            
            // BMI 값 소수점 첫째 자리까지 포맷
            let shortenedBmi = String(format: "%.1f", bmi)
            
            // 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)
                body = "정상"
            } else {
                color = UIColor(displayP3Red: 0.0, green: 1.0, blue: 0.0, alpha: 1.0)
                body = "저체중"
            }
            
            // 결과 레이블의 모서리를 둥글게 설정
            lbResult.clipsToBounds = true // layer.cornerRadius를 사용하기 위해 true로 설정
            lbResult.layer.cornerRadius = 10 // 모서리 반경을 10으로 설정
            
            // 결과 레이블의 배경색과 텍스트 설정
            lbResult.backgroundColor = color
            lbResult.text = "BMI:\(shortenedBmi), 판정:\(body)"
        }
    }
    
    // 초기 설정 메서드
    override func viewDidLoad() {
        super.viewDidLoad()
        // 추가 설정이 필요한 경우 여기에 작성
    }
}

해당 소스는 bmi의 값이 다를 수록 결과값에 출력되는 레이블에 배경색이 바뀌는 소스가 추가되고, 레이블의 끝쪽 부분을 둥글게 만드는 소스까지 작성했다.

 

메인 스토리보드에 view를 클릭하고 [editor -> embed In -> tab bar Controller]를 클릭하게되면 해당 사진 처럼 왼쪽에 빈 화면 하나가 나오게 된것을 알 수 있다.

 

다음, + 버튼을 눌러서 View Controller를 추가해서 탭 바 컨트롤러에 ctrl 누른 뒤 추가한 뷰 컨트롤러에 드래그하면된다.

 

추가하게 되면 해당 메인스토리 보드에 이렇게 한 개의 탭 바 컨트롤러와 2개의 뷰 컨트롤러가 나오게 된다.

 

(동영상 추가)

아무 영상이나 다운 받고 엑스코드에 가져오게 되는 경우가 있는데,

이때 주의해야 할 점은 다음과 같다.

Add to targets : 옆에 붙어있는 가져온 동영상을 선택하지 않으면 영상은 나오지만 앱을 실행했을때에 영상이 안나올 수 있다.

무조건 적으로 동영상을 선택하고 피니시를 눌러야한다.