Swift로 BMI 앱 만들기

Xcode Project 생성하기

• 우선 Xcode를 실행시키고 프로젝트를 만들어보자
• File -> New -> Project

• iOS -> App

• Product Name을 정하고 나면 Organization Identifier에 붙는다, 그러면 그게 앱 식별자(Bundle Identifier)가 된다.
• Language : Swift 

• Deployment Info에서 최소 iOS 사양을 맞출수 있다.
• Bundle Identifier : 앱식별자 (중요)

Label, Button 추가 하기

• 오른쪽 상단에 + 버튼 or shift + cmd + l을 누르면 Object창이 등장한다.
• 드래그해서 ViewController에 드랍해준다.
• Label과 Button, Textfiled를 추가해준다.

• 자기 입맛에 맞게 꾸며준다.

rounded button : Identity inspector

• 버튼을 선택한 후 Identity Inspector 클릭
• User Defined Runtime Attributes에서 [+] 클릭
• Key Path : layer.cornerRadius, Type : Number, Value : 7(원하는 값) 입력

Text Field의 Keyboard Type : Decimal Pad

• Decimal Pad 이외에 다른 키패드가 필요 없을 경우에 사용한다.
• https://developer.apple.com/documentation/uikit/uitextfield

Oulet과 Action

• Outlet = 변수, Action = 함수

@IBOutlet weak var txtHeight: UITextField!
@IBOutlet weak var txtWeight: UITextField!
@IBOutlet weak var lblResult: UILabel!
@IBAction func calcBmi(_ sender: UIButton) {
}

Xcode 도움말 보기

• 해당 단어에서 alt키를 누른다.
• ? 나오면 클릭 

코드 정렬

• control + i

판정될 결과에 따라 출력 레이블에 다른 배경색 지정 

    @IBAction func calcBmi(_ sender: UIButton) {
        if txtHeight.text == "" || txtWeight.text == "" {
            print("Input error")
            lblResult.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 = ""
            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 = "저체중"
            }
            // print("BMI:\(shortenedBmi), 판정:\(body)")
            lblResult.backgroundColor = color
            lblResult.clipsToBounds = true
            lblResult.layer.cornerRadius = 10
            lblResult.text = "BMI:\(shortenedBmi), 판정:\(body)"

break point

• 행 번호 왼쪽을 클릭하면 브레이크 포인트가 생기고 실행하면 해당 줄에서 실행이 멈춘다.
• 삭제를 하고 싶으면 브레이크 포인트를 잡고 오른쪽으로 드래그&드롭하면 삭제된다.

Tab Bar Controller

• Editor -> Embed In -> Tab Bar Controller
• 스토리보드의 View를 클릭하고 선택해야 활성화된다.

Tab Bar Item 이미지 변경

새로운 화면(View) 추가 : View Controller

새로 만든 View Controlelr를 Tab Bar Controller와 연결 

• Tab Bar Controller에서 새로 만든 View Controller로 ctrl키 누르면서 드래그&드롭
• 버튼을 떼면 나타나는 검은 창에 Relationship Segue -> view controllers 클릭

연결되면 segue가 생김

비디오 재생을 위한 소스코드(VideoViewController) 만들기

File -> New -> File...

Cocoa Touch Class로 만들면 부모 지정 가능

mp4 파일 프로젝트에 복사

Video Scene 스토리보드와 VideoViewController클래스 연결

Video Scene에 비디오 재생할 버튼 추가

• Main.storyboard 클릭
• button 클릭
• Attributes Inspector 클릭
• text 변경
• image 변경

Button에 Action 추가 : 버튼을 누르면 동영상 재생

비디오 재생 소스

//
//  VideoViewController.swift
//  bmi_pjy
//
//  Created by 박지용 on 2021/11/24.
//

import UIKit
import AVKit

class VideoViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Do any additional setup after loading the view.
    }
    
    @IBAction func playVideo(_ sender: UIButton) {
        let file:String? = Bundle.main.path(forResource:"bmi", ofType: "mp4")
        let url = NSURL(fileURLWithPath: file!)
        let playerController = AVPlayerViewController()
        let player = AVPlayer(url: url as URL)
        playerController.player = player
        self.present(playerController, animated: true)
        player.play()
    }
    
}

실행 결과

Web Scene에 버튼과 WebKit View 추가

버튼에 Action 추가 : goGoogle

• Main.storyboard 선택하고 Ctrl+Command+Alt+Enter
• 주의 : WebViewController.swift가 열렸는지 확인하고 코딩

WKWebView Oulet지정 : webView

• 내용이 URL에 따라 바뀌므로 변수(outlet)로 지정해야 한다.

웹사이트 출력 소스 입력

import UIKit
import WebKit

class WebViewController: UIViewController {
    
    @IBOutlet weak var webView: WKWebView!
    @IBAction func goGoogle(_ sender: UIButton) {
        guard let url = URL(string: "https://google.com") else { return }
        let request = URLRequest(url: url)
        webView.load(request)
    }
    
    override func viewDidLoad() { // 처음에 한번만 작동함
        super.viewDidLoad()
        guard let url = URL(string: "https://wlqkr.tistory.com/") else { return }
        let request = URLRequest(url: url)
        webView.load(request)
        // Do any additional setup after loading the view.
    }
    
}

URLRequest 구조체

• https://developer.apple.com/documentation/foundation/urlrequest

URL 구조체

• https://developer.apple.com/documentation/foundation/url

guard문으로 fix

        guard let url = URL(string: "https://google.com") else { return }

guard문(조건식이 거짓이면 실행)

• guard문은 표현식이 거짓(false)으로 판단될 경우에 수행될 else 절을 반드시 포함해야 한다.
• 특정 조건에 맞지 않을 경우에 현재의 함수나 반복분에서 빠져나갈 수 있도록 하는 '조기 출구(early exit)' 전력을 제공한다.

WebViewController.swift파일

import UIKit
import WebKit

class WebViewController: UIViewController {
    
    @IBOutlet weak var webView: WKWebView!
    @IBAction func goGoogle(_ sender: UIButton) {
        guard let url = URL(string: "https://google.com") else { return }
        let request = URLRequest(url: url)
        webView.load(request)
    }
    
    override func viewDidLoad() { // 처음에 한번만 작동함
        super.viewDidLoad()
        guard let url = URL(string: "https://wlqkr.tistory.com/") else { return }
        let request = URLRequest(url: url)
        webView.load(request)
        // Do any additional setup after loading the view.
    }
    
}

실행 결과

출처 : iOS 프로그래밍 기초 한성현 교수님 강의 내용 변형 및 요약

https://www.youtube.com/channel/UCM8wseo6DkA-D7yGlCrcrwA