WidgetKit (14)

LockScreen Widget 적용하기

SingleRepo, DoubleRepo가 있는 RepoWatcher를 가져왔다.

기존 SingleRepoEntryView에서

struct SingleRepoEntryView : View {
    @Environment(\.widgetFamily) var family
    var entry: SingleRepoEntry
    
    var body: some View {
        switch family {
        case .systemMedium:
        //생략
        case .systemLarge:
        //생략
        case .accessoryInline:
            Text("")
        case .accessoryRectangular:
            Text("")
        case .accessoryCircular:
            Text("")
        case .systemSmall, .systemExtraLarge:
            EmptyView()
        @unknown default:
            EmptyView()
        }
    }
}

accessory 관련 케이스들을 이젠 적용을 해준다.

그리고 위젯설정에서도 supportedFaimiles 에 추가를 해준다.

.supportedFamilies([.systemMedium, .systemLarge, .accessoryInline, .accessoryCircular, .accessoryRectangular])

3개의 케이스는

여기서 확인을 해보자.

마지막 활동 계산 함수 수정

// RepoMediumView

func calculateDaysSinceLastActivity(from dateString: String) -> Int {
    let lastActivityDate = formatter.date(from: dateString) ?? .now
    let daysSinceLastActivity = Calendar.current.dateComponents([.day], from: lastActivityDate, to: .now).day ?? 0
    return daysSinceLastActivity
}

이 함수를 이젠 repository에서 Computed Property처럼 사용한다

// Repository

struct Repository {
    let name: String
    let owner: Owner
    let hasIssues: Bool
    let forks: Int
    let watchers: Int
    let openIssues: Int
    let pushedAt: String
    var avatarData: Data
    var contributors: [Contributor] = []
    
    var daysSinceLastActivity: Int {
        let formatter = ISO8601DateFormatter()
        let lastActivityDate = formatter.date(from: pushedAt) ?? .now
        let daysSinceLastActivity = Calendar.current.dateComponents([.day], from: lastActivityDate, to: .now).day ?? 0
        return daysSinceLastActivity
    }
}

각 Case별로 적용하기

우선 각 case 별로 위치와 디자인은 약 이런느낌이다.

케이스별 목적

1. accessoryInline: 텍스트 위주로 간단한 정보를 제공.
2. accessoryCircular: 아이콘과 숫자 중심의 간결한 정보 표시.
3. accessoryRectangular: 텍스트와 이미지를 포함해 상세한 정보를 전달.

각각의 케이스는 잠금 화면에서 사용자에게 맞춤형 정보를 제공하며, 레이아웃 및 표시 정보를 효율적으로 구성할 수 있다.

accessoryInline

이렇게 바꿔주는 이유는

case .accessoryInline:
            Text("\(entry.repo.name) -\(entry.repo.daysSinceLastActivity)")

이런식으로 Text로 값을 보여줄건데, entry 해당 내용은 함수라서 또 만들어줘야하는 번거로움이 있기에 Computed Property를 Repository에 적용하면 entry에서 처리가 가능하기 때문이다.

accessoryCircular

case .accessoryCircular:
    VStack {
        Text("\(entry.repo.daysSinceLastActivity)")
            .font(.headline)
        Text("days")
            .font(.caption)
    }

이렇게 작게 보이게 된다.

그리고 ZStack에 AccessoryWidgetBackground()를 사용하면

ZStack {
    AccessoryWidgetBackground()
    VStack {
        Text("\(entry.repo.daysSinceLastActivity)")
            .font(.headline)
        Text("days")
            .font(.caption)
    }
}

이렇게 배경이 은은하게 보이게 된다.

accessoryRectangular

case .accessoryRectangular:
    VStack {
        Text(entry.repo.name)
            .font(.headline)
        Text("\(entry.repo.daysSinceLastActivity) days")
        
        HStack {
            Image(systemName: "star.fill")
                .resizable()
                .frame(width: 12, height: 12)
            
            Text("\(entry.repo.watchers)")
            
            Image(systemName: "tuningfork")
                .resizable()
                .frame(width: 12, height: 12)
            
            Text("\(entry.repo.forks)")
            
            if entry.repo.hasIssues {
                Image(systemName: "exclamationmark.triangle.fill")
                    .resizable()
                    .frame(width: 12, height: 12)
                
                Text("\(entry.repo.openIssues)")
            }
        }
        .font(.caption)
    }

실행화면

실행해서 추가하면 이렇게 나온다.

처음에는 추가하면 Default로 설정된 Repository가 나온다.

그리고 Customize에서 추가한 위젯을 클릭하고 한번더 클릭하면 앱 화면이 뜨는데 여기서 변경이 가능하다.