IOS 앱 개발하기 - 5일차 : UI 구성하기

✓ 오늘의 목표

• datepicker 로 날짜 선택
• 현재 날짜와 비교하여 D-day 계산 및 출력

 

 

1.  화면에 날짜를 표시한 텍스트 라벨을 생성, 배경 지정

 

라벨만 만들면 아쉬워서 배경도 지정하고, 배경 설정도 추가해주었습니다.

라벨을 눌러서 datepicker 가 새 창에 뜨도록 할건데,

라벨 클릭 이벤트는 앞의 이미지 클릭 이벤트와 동일하게  제스쳐 인식기로 구현했습니다.

class ViewController: UIViewController {
    @IBOutlet weak var daylabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        let backgroundImage = UIImageView(frame: UIScreen.main.bounds)  // frame을 화면 크기 해상도 지정
        backgroundImage.image = UIImage(named: "img01.jpeg")  // 배경 이미지 지정
        backgroundImage.alpha = 0.3   // 투명도 0.3 설정
        backgroundImage.contentMode =  UIView.ContentMode.scaleAspectFill   // AspectFill 타입으로 이미지 채우기
        self.view.insertSubview(backgroundImage, at: 0)  	// 지정된 인덱스에 subview 지정

        
        // Label 클릭(탭) 이벤트 구현
        let tap = UITapGestureRecognizer(target: self, action: #selector(ViewController.tapFunction))
        daylabel.isUserInteractionEnabled = true
        daylabel.addGestureRecognizer(tap)

    }
    @objc
    func tapFunction(sender:UITapGestureRecognizer) {
        print("tap event")
    }
 }

 

 

2. date format 을 지정해서 현재 날짜 가져오기

 

저희는 날짜만 계산할 것이기 때문에, yyyy-mm-dd 의 형태로 가져옵니다.

• y : 연도 (year)
• M : 월 (month)
• d : 일 (day)
• h : 시간 (hour)
• m : 분 (minute)
• s : 초 (second)

요 형태이며, 보통 전체 시각까지는 ' yyyy-mm-dd HH:mm:ss ' 로 표현합니다.

let dateFormatter = DateFormatter()			   // Dateformatter : String <-> Date
dateFormatter.dateFormat = "yyyy-MM-dd"        // date format 지정  
let startDate = dateFormatter.date(from: "2016-11-04")

 

저는 디데이를 구현할 것이기 때문에 시간을 날려버리고 날짜까지만 받아오도록 정했습니다.

그러면 "2016-11-04" 라는 String 타입의 데이터가 날짜 형태로 변환됩니다.

 

 

 

레퍼런스를 확인하면 DateFormatter는 텍스트 형식과 날짜 형식 간의 데이터 형태를 변환시켜주는 클래스 입니다.

 

리시버에 의해 받은 문자열의 날짜 형식 지정이라고 합니다.

그러니까 받은 문자열을 "yyyy-MM-dd" 로 형식 지정해주는 속성입니다.

 

date와 string 함수로 서로 변환할 수 있습니다. 

 

 

3. 지정 날짜와 현재 날짜 사이 계산하기

 

ㅇㅇㅇ

    let calendar = Calendar.current					// 현재 달력 가져오기
    let currentDate = Date()						// 현재 날짜와 시간 가져오기
    let dateFormatter = DateFormatter()
    var daysCount:Int = 0
    
    func calculateDays(){
        dateFormatter.dateFormat = "yyyy-MM-dd"        
        let startDate = dateFormatter.date(from: "2016-11-04")
        daysCount = days(from: startDate!)      		// 날짜 계산 함수, 오늘과 비교
        daylabel.text = "D + " + String(daysCount)		// 라벨에 계산한 날짜 표기
    }
    func days(from date: Date) -> Int {
        return calendar.dateComponents([.day], from: date, to: currentDate).day! + 1
    }

 

지정한 날짜와 현재 사이의 디데이를 계산하여 라벨에 표기하는 코드입니다.

 

 

Calendar 는 날짜 계산 및 비교 기능을 제공하는 달력 단위(예: 연대, 연도 및 평일)와 절대 시점 간의 관계를 정의합니다. (구글번역)

 

 

Calendar의 identifier 생성자를 사용하면 Swift 가 제공하는 다양한 달력 형태를 이용할 수 있습니다.

불교달력, 중국달력 등등 엄청 종류가 많습니다.

하지만 제가 지금 사용하고 있는 달력을 가져오기 위해 Calendar.current 를 사용합니다.

전세계적으로 사용하는 양력 달력 (그레고리력)이 세팅됩니다.

 

 

Date() 는 현재 날짜아 시간을 가져와 반환합니다.

 

Calendar 타입에서 component 메소드를 사용하면 날짜를 구성하는 다양한 요소(년, 월, 일, 시간 등) 중 필요한 요소를 정수형으로 반화해줍니다.

 

calendar.dateComponents([.day], from: date, to: currentDate).day! + 1  의 코드에서 date (from) 로부터 currentDate(to) 두 날짜 간의 차이를 계산해서 day 형태로 반환해주는 기능을 합니다.

 

반환할 수 있는 형태인 Calendar의 컴포넌트 종류는 다양하고 레퍼런스에서 확인할 수 있습니다. 

https://developer.apple.com/documentation/foundation/calendar/component

 

 

디데이 같은 경우는 보통 시작날과 끝날을 모두 세기 때문에 두 날짜의 차이에 +1 을 해서 수를 맞춰줍니다.

 

 

 

 

그러면 요렇게 라벨을 클릭했을 때 제가 지정한 날짜로부터의 디데이를 볼 수 있습니다.

 

 

 

<ViewController.swift>

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var daylabel: UILabel!
    
    let calendar = Calendar.current
    let currentDate = Date()
    let dateFormatter = DateFormatter()
    var daysCount:Int = 0
  
    override func viewDidLoad() {
        super.viewDidLoad()
        let backgroundImage = UIImageView(frame: UIScreen.main.bounds)
        backgroundImage.image = UIImage(named: "img01.jpeg")
        backgroundImage.alpha = 0.3
        backgroundImage.contentMode =  UIView.ContentMode.scaleAspectFill
        self.view.insertSubview(backgroundImage, at: 0)

        
        // Label 클릭(탭) 이벤트 구현
        let tap = UITapGestureRecognizer(target: self, action: #selector(ViewController.tapFunction))
        daylabel.isUserInteractionEnabled = true
        daylabel.addGestureRecognizer(tap)

    }
    @objc
    func tapFunction(sender:UITapGestureRecognizer) {
        calculateDays()
    }
    func calculateDays(){
        dateFormatter.dateFormat = "yyyy-MM-dd"        // date format 지정
        let startDate = dateFormatter.date(from: "2016-11-04")
        daysCount = days(from: startDate!)      // 날짜 계산 함수, 오늘과 비교
        daylabel.text = "D + " + String(daysCount)
    }
    func days(from date: Date) -> Int {
        return calendar.dateComponents([.day], from: date, to: currentDate).day! + 1
        
    }
}

 

 

 

참고 : https://velog.io/@loganberry/Swift-%EB%82%A0%EC%A7%9C%EC%99%80-%EC%8B%9C%EA%B0%84-%EB%8B%A4%EB%A3%A8%EA%B8%B0-1-feat.-Date-Calendar

 

 

본 게시글은 IOS 입문자의 독학 과정입니다.
고수 분들의 많은 조언 및 지적 감사합니다.