[iOS/Swift] 라면 타이머 앱 만들기

Swift - Ramen Timer

• 스파르타코딩클럽 - iOS 앱개발 기초반을 수강하면서 배우는 Swift

2주차 (2) 라면 타이머 앱 만들기

스토리보드 세팅하기

1. Main.storyboard

2. LaunchScreen.storyboard

3. @IBOutlet, @IBAction 연결하기

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var timerLabel: UILabel!
    @IBOutlet weak var timerButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()

                // Do any additional setup after loading the view.
    }


    @IBAction func timerButtonClicked(_ sender: Any) {

    }
}

코드 작성하기

1. 버튼에 코너 라운드 넣기

override func viewDidLoad() {
    super.viewDidLoad()
    timerButton.layer.cornerRadius = 10
}

2. 버튼 누르면 타이머 시작하기

var secondsLeft: Int = 10 //원래는 180초지만, 10초로 테스트 하기

@IBAction func timerButtonClicked(_ sender: Any) {
    //1초마다 타이머 반복 실행
    Timer.scheduledTimer(withTimeInterval: 1, repeats: true, block: { (t) in
        //남은 시간(초)에서 1초 빼기
        self.secondsLeft -= 1

        //남은 분
        var minutes = self.secondsLeft / 60
        //그러고도 남은 초
        var seconds = self.secondsLeft % 60

        //남은 시간(초)가 0보다 크면
        if self.secondsLeft > 0 {
            self.timerLabel.text = "\(minutes):\(seconds)"
        } else {
            self.timerLabel.text = "시간 끝!"
        }
    })
}

3. 분이랑 초가 2자리씩 나오게 하기

self.timerLabel.text = String(format: "%02d:%02d", minutes, seconds)

4. 타이머니까 중간에 버튼을 누르면 타이머가 종료되게 해보기
   1. 먼저 함수로 라벨을 표시하는 함수를 분리합시다

func updateSecondsLabel() {
  //남은 분
  var minutes = self.secondsLeft / 60
  //그러고도 남은 초
  var seconds = self.secondsLeft % 60

  //남은 시간(초)가 0보다 크면
  if self.secondsLeft > 0 {
      self.timerLabel.text = String(format: "%02d:%02d", minutes, seconds)
  } else {
      self.timerLabel.text = "시간 끝!"
  }
}

2. 리셋하는 함수를 만들어보자

func resetTimer() {
        //타이머 종료하기
    self.timer?.invalidate()
        //타이머 없애기
    self.timer = nil
        //타이머가 종료되었으므로 버튼을 '시작하기'로 바꾸기
    self.timerButton.setTitle("타이머 시작하기", for: .normal)
}

3. 타이머 함수 다시 쓰기

@IBAction func timerButtonClicked(_ sender: Any) {
  //타이머가 안 비어있으면 타이머 종료!
  if timer != nil {
    //타이머를 리셋해주기
    self.resetTimer()
    self.timerButton.setTitle("타이머 시작하기", for: .normal)
    //종료니까 그 뒤로 동작하면 안되므로 return 해줌
    return
  }

  //타이머가 비어있을때는 타이머 시작!
  self.timerButton.setTitle("타이머 종료하기", for: .normal)
  //시간을 세팅
  self.secondsLeft = 10 //180초지만 10초로 테스트

  self.timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true, block: { (t) in
    self.secondsLeft -= 1
    self.updateSecondsLabel()

    //시간이 끝나면
    if self.secondsLeft == 0 {
        //타이머 리셋
        self.resetTimer()
    }
  })
}

5. [옵션] 시간 돌아가는 애니메이션 넣기

func updateSecondsLabel() {
  var minutes = self.secondsLeft / 60
  var seconds = self.secondsLeft % 60

  if self.secondsLeft < 60 {
    self.timerLabel.textColor = UIColor(red: 0.94, green: 0.07, blue: 0.07, alpha: 1.00)
  } else {
    self.timerLabel.textColor = UIColor.black
  }


  UIView.transition(with: self.timerLabel, duration: 0.3, options: .transitionFlipFromBottom) {
    if self.secondsLeft > 0 {
      self.timerLabel.text = String(format: "%02d:%02d", minutes, seconds)
    } else {
      self.timerLabel.text = "시간 끝!"
    }
  } completion: { (animated) in

  }
}

Segment로 시간 선택 옵션 넣어보기

1. Segment Control을 이용한다.

• 세그멘트 컨트롤은 오른쪽 화면에서 개수(Segments)와 각 메뉴별(Segment) 텍스트를 정할 수 있다!
• 

2. Segment 를 @IBAction 으로 가져올때는 Value Changed 를 선택하고, 선택된 값은 selectedSegmentIndex로 가져온다.

@IBOutlet weak var segmentControl: UISegmentedControl!

@IBAction func segmentValueChanged(_ sender: Any) {
    print(segmentControl.selectedSegmentIndex)//선택에 따라 0, 1, 2
}

3. 코드 작성 (ViewController)

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var timerLabel: UILabel!
    @IBOutlet weak var timerButton: UIButton!
    @IBOutlet weak var segment: UISegmentedControl!

    var secondsLeft: Int = 180
    var timer: Timer?

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        timerButton.layer.cornerRadius = 10

        self.updateTimeLeft()
    }

    func resetTimer() {
        timer?.invalidate()
        timer = nil
        timerButton.setTitle("타이머 시작하기", for: .normal)
    }

    func updateTimerLabel() {
        var minutes = self.secondsLeft / 60
        var seconds = self.secondsLeft % 60

        if self.secondsLeft < 10 {
            self.timerLabel.textColor = UIColor.red
        } else {
            self.timerLabel.textColor = UIColor.black
        }


        UIView.transition(with: self.timerLabel, duration: 0.3, options: .transitionFlipFromBottom) {
            if self.secondsLeft > 0 {
                self.timerLabel.text = String(format: "%02d:%02d", minutes, seconds)
            } else {
                self.timerLabel.text = "시간 끝!"
            }
        } completion: { (animated) in

        }
    }

    func updateTimeLeft() {
        self.secondsLeft = 180 + segment.selectedSegmentIndex * 60
        self.updateTimerLabel()
    }

    @IBAction func segmentValueChanged(_ sender: Any) {
        self.resetTimer()
        self.updateTimeLeft()
    }

    @IBAction func timerButtonClicked(_ sender: Any) {
        if timer != nil {
            resetTimer()
            return
        }

        self.timerButton.setTitle("타이머 종료하기", for: .normal)
        self.updateTimeLeft()


        timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { (t) in
            self.secondsLeft -= 1
            self.updateTimerLabel()

            if self.secondsLeft == 0 {
                self.resetTimer()
            }
        }
    }
}