데이트 피커 앱 만들기

데이트 피커(Date Picker)란?

데이트 피커(Date Picker)는 날짜와 시간을 선택할 수 있게 해주는 객체입니다.

아이폰의 기본 기능인 시계 앱의 알람 탭에서 자주 사용하는 기능 중 하나이기도 합니다.

앱에서 날짜와 시간을 선택해야 할 때는 드롭 다운 방식이나 리스트 방식으로 보여줄 수 있는데, 날짜는 선택 항목이 많기 때문에 데이트 피커 방식이 가장 효율적이라고 할 수 있습니다.

데이트 피커 기능을 사용하면 시계앱, 미리 알림 앱, 캘린더 앱 등 유용한 앱을 만들 수 있습니다.

---

스토리보드로 데이트 피커 앱 화면 꾸미기

먼저 Library에서 [데이트 피커(Date Picker)]를 찾아 선택한 후 스토리 보드에 배치를 해줍니다.

데이트 피커의 Style은 [Inline]으로 변경해 주었고, Mode는 기본 설정인 [Date and Time]으로 사용했습니다.

📝 만약 데이트 피커의 모드를 변경하고 싶으면 같은 방법으로 변경해 주세요

추가로 지금 영어로 나오지만 한국어 날짜 표기를 원하시는 분들은 Locale 설정에서 Korean으로 바꿔주세요.

 

현재 시간과 선택 시간을 보여주기 위한 레이블[Lable]을 추가하겠습니다.

[Library] 버튼을 클릭한 후 레이블을 스토리보드로 끌어와 배치해 주세요.

---

아웃렛 변수, 액션 함수  추가하기

이제 프로그램에서 사용할 아웃렌 변수와 액션 함수를 추가해 보겠습니다.

데이트 피커를 사용해 날짜를 선택했을 때 선택한 날짜를 표기하기 위한 데이트 피커의 아웃렛 변수와 선택한 날짜를 레이블에 출력하기 위한 레이블의 아웃렛 변수 그리고 현재 시간을 레이블에 출력하기 위한 레이블의 아웃렛 변수를 아래와 같이 추가해 주었습니다.

연결	이름	타입
Outlet	CurrentTime	UILable
Outlet	PickerTime	UILable
Action	ChangeDatePicker	UIDatePicker

 

이렇게 해서 데이트 피커와 레이블에 아웃렛 변수를 추가해 주었습니다.

이제 데이트 피커 아웃렛 변수를 이용하여 선택한 날짜 및 시간을 가져올 수 있게 되었고, 레이블 아웃렛 변수를 이용하여 레이블에 접근할 수 있게 되었습니다.

---

데이트 피커 앱의 기능 구현하기

사용자가 데이트 피커에서 원하는 날짜와 시간을 선택하면 그 내용이 PickerTime 레이블에 출력되는 기능을 구현해 보겠습니다.

아래와 같이 코드를 추가해 주세요.

@IBAction func ChangeDatePicker(_ sender: UIDatePicker) {
        // UIDatePicker 자료형 인수가 sender에 전달되고 해당 sender를 datePickerView에 저장
        let datePickerView = sender
        
        //날짜를 출력하기 위하여 DateFormatter라는 클래스 상수 formatter를 선언
        let formatter = DateFormatter()
        
        //formatter의 dateFormat 속성 설정
        formatter.dateFormat = "yyyy-MM-dd HH : mm EEE"
        
        // 데이트 피커에서 선택한 날짜를 formatter의 dateFormat에서 설정한 포맷대로 string 메서드를 사용하여 문자열로 변환
        PickerTime.text = "선택 시간 : " + formatter.string(from: datePickerView.date)
    }

 



---

DateFormat 형식

아래와 같은 심벌을 사용하여 원하는 데이터 포맷을 만들어 사용할 수 있습니다.

📝 단, 심벌을 입력할 때는 대, 소문자에 유의해주세요 😵‍💫

 

년	yy	20	두자리 연도
	yyyy	2020	네자리 연도
월	M	1	한자리 월
	MM	01	두자리 월
	MMM	Jan	영문 3글자
	MMMM	January	영문 글자
주	w	1	1 ~ 52 연간 주 표시
	ww	01	01 ~ 52 연간 주 표시
	W	1	1 ~ 6 월간 주 표시
일	d	1	1 ~ 31 일 표시
	dd	01	01 ~ 31 일 표시
	D	1	1 ~ 366 연간 일 표시
	DD	01	01 ~ 366 연간 일 표시
	DDD	001	001 ~ 366 연간 일 표시
요일	E	Mon	Sun ~ Sat 3글자
	EE
	EEE
	EEEE	Monday	Sun ~ Sat 전체 글자
	EEEEE	M	Sun ~ Sat 한글자
시	h	1	1 ~ 12 시간
	hh	01	01 ~ 12 시간
	H	13	1 ~ 24 시간
	HH	13	01 ~ 24 시간
분	mm	5	1 ~ 59 분
	MM	05	01 ~ 59 분
초	ss	5	1 ~ 59 초
	SS	05	0 ~ 59 초
존	z	GMT+09:00	타임존
	Z	+0900	GMT 시간 차
시기	a	AM	AM/PM

---

이제 iOS의 타이머를 사용해 보겠습니다.

타이머는 정해진 시간에 한 번씩 설정한 함수를 실행하는 기능입니다.

현재 시간은 고정값이 아닌 변동되는 값이기 때문에 이 타이머 기능을 활용하여 1초에 한 번씩 현재 시간을 레이블에 출력해 보겠습니다.

 

아래와 같이 코드를 입력해 주세요.

import UIKit

class ViewController: UIViewController {
    // 타이머가 구동되면 실행할 함수를 지정
    let timeSelector : Selector = #selector(ViewController.updateTime)
    
    // 타이머의 간격 값 1.0 = 1초
    let interval = 1.0
    
    // 타이머가 설정한 간격대로 실행되는지 확인하기 위한 변수
    var count = 0

    @IBOutlet var CurrentTime: UILabel!
    @IBOutlet var PickerTime: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        // Timer.scheduledTimer(timeInterval(타이머 간격): interval, target(동작될 view): self, selector(타이머가 구동될 때 실행할 함수): timeSelector, userInfo(사용자 정보): nil, repeats(반복 여부): true)
        Timer.scheduledTimer(timeInterval: interval, target: self, selector: timeSelector, userInfo: nil, repeats: true)
    }

    @IBAction func ChangeDatePicker(_ sender: UIDatePicker) {
        // UIDatePicker 자료형 인수가 sender에 전달되고 해당 sender를 datePickerView에 저장
        let datePickerView = sender
        
        // 날짜를 출력하기 위하여 DateFormatter라는 클래스 상수 formatter를 선언
        let formatter = DateFormatter()
        
        // formatter의 dateFormat 속성 설정
        formatter.dateFormat = "yyyy-MM-dd HH : mm EEE"
        
        // 데이트 피커에서 선택한 날짜를 formatter의 dateFormat에서 설정한 포맷대로 string 메서드를 사용하여 문자열로 변환
        PickerTime.text = "선택 시간 : " + formatter.string(from: datePickerView.date)
    }
    @objc func updateTime(){
        //현재 시간을 NSDate() 함수를 사용해 가져옴
        let date = NSDate()
        
        // 날짜를 출력하기 위해 DateFormatter라는 클래스의 상수 formatter를 선언
        let formatter = DateFormatter()
        
        // formatter의 dateFormat 속성 설정
        formatter.dateFormat = "yyyy-MM-dd HH:mm:ss EEE"
        
        // formatter의 dateFormat에서 설정한 포맷대로 string 메서드를 사용하여 문자열로 변환
        CurrentTime.text = "현재 시간 : " + formatter.string(from: date as Date)
    }
}

---

결과 확인

결과를 확인해 보면 정상적으로 타이머 기능이 작동하는 것을 볼 수 있고, 현재 시간, 선택 시간이 잘 나오는 것을 볼 수 있습니다.

다음 글은 피커 뷰를 활용하는 방법에 대해서 올려보도록 하겠습니다.