[SwiftUI]UserDefaults 및 DatePicker를 사용하여 남은 일 수를 계산하는 방법

소개

이번에 만든 것

이번에는 DatePicker를 사용하여 원하는 날짜를 선택하면 오늘부터 목적일까지의 일수를 계산하여 표시해주는 것을 만들었습니다.
파일은 하단에 Git 링크를 붙여 둡니다 때문에 좋으면 활용하십시오!

환경

·/macOS Big Sur 11.3
· SwiftUI : 2.0
· Xcode : 12.0

만드는 방법

UswrDefault에 대해서는 아래의 기사를 봐 주시면 이해하기 쉽다고 생각하므로 게재해 둡니다.

만드는 법

먼저 UserDefaults를 준비합니다.

import SwiftUI
class DateLog: ObservableObject {

    @Published var endDate: Date {
        didSet {
            UserDefaults.standard.set(endDate, forKey: "endDate")
        }
    }

    init() {
        endDate = UserDefaults.standard.object(forKey: "endDate") as? Date ?? Date()
    }
}

이어서 ContentView

구현

import SwiftUI

struct ContentView: View {
    @EnvironmentObject var dateLog: DateLog
    //残り日数の処理
    var dateFormatter: DateFormatter {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "yyyy.MM.dd"
        return dateFormatter
    }
    var body: some View {
        ZStack{
            let firstDateReset = resetTime(date: dateLog.endDate)
            let secondDateReset: Date = resetTime(date: Date())
            Text("試験日まで残り\(Int(firstDateReset.timeIntervalSince(secondDateReset)/86400))日")

        DatePicker("試験日⇨",
                   selection: $dateLog.endDate,
                   in: Date()...,
                   displayedComponents: [.date])
            .foregroundColor(.clear)
            .opacity(0.1)
            .background(Color.clear)
            .opacity(0.1)
            .font(.title3)
        }.frame(width: 250, height: 60, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(DateLog())
    }
}


//残り日数計算function
func resetTime(date: Date) -> Date {
    let calendar: Calendar = Calendar(identifier: .gregorian)
    var components = calendar.dateComponents([.year, .month, .day, .hour, .minute, .second], from: date)

    components.hour = 0
    components.minute = 0
    components.second = 0

    return calendar.date(from: components)!
}

이상으로 완성입니다.

Tips

이외와 어디에도 없었던 일로 궁리한 점은 DatePicker 표시를 지워, 남은 일수만을 표시시킨 점입니다.
보통 DatePicker를 사용하면 UI가 다음과 같이 확정되어 버립니다. (이미지 다이어그램)


이것이라면 자유도가 없고 맛이 없기 때문에 이번에는 남은 일수만을 표시시키려고 DatePicker를 지웠습니다!
지우는 방법은 DatePicker에
.foregroundColor(.clear)
.opacity(0.1)
.background(Color.clear)
.opacity(0.1)
를 추가하기만 하면 됩니다. SwiftUI에서는 거의 이 "Clear"와 "Opacity"의 콤보로 지울 수 있습니다.
꼭 독창적 인 UI를 설계 할 때 사용해보십시오!

요약

이번에 만든 파일