Widget - 위젯을 타입별로 꾸며보자

 

https://moonggi-dev-story.tistory.com/91

Widget - 신규 프로젝트에 위젯을 달아보자

 

에 이어서 위젯에 내용을 추가 하고자 합니다. 좀더 기능을 추가해서 그럴듯한(?) 위젯을 만들어 보고자 합니다.

---

1. 위젯 뷰 구성

1-1. 사이즈별 뷰를 꾸미는 방법

- 기본적으로 위젯의 사이즈는 3가지 타입을 가지고 있습니다. (systemLarge, systemSmall, systemMedium)

 

 

- 한가지 뷰로만 꾸릴경우 사이즈 규격에 맞지않게 위젯을 만들수가 있게 됩니다.. 그래서 해당 사이즈를 분기 처리하여 뷰를 구성 할수 있습니다.

 

struct TestWidgetEntryView : View {
    var entry: Provider.Entry
    @Environment(\.widgetFamily) private var widgetFamily
    
    let datas = ["a", "b", "a1", "b1"]
    
    var body: some View {
        switch widgetFamily {
            case .systemSmall:
                VStack {
                    Text("systemSmall")
                        .padding(.bottom, 5)
                    ForEach(datas, id: \.self) {
                        Text($0)
                    }
                }
            case .systemLarge:
                Text("systemLarge")
            default:
                EmptyView()
        }
    }
}

 

- 다음과 같이 처리 할경우 medium에 대한 처리가 없기에 뷰가 없이 나올수가 있습니다. 분기 처리하여 생성할수도 있지만 특정 사이즈의 위젯을 생성 할수 있도록 처리 할수 있습니다.

AppIntentConfiguration(kind: kind, intent: ConfigurationAppIntent.self, provider: Provider()) { entry in
    TestWidgetEntryView(entry: entry)
        .containerBackground(.fill.tertiary, for: .widget)
}.supportedFamilies([.systemSmall])

- supportedFamilies 에 해당 사이즈 값 (enum) 을 추가하면 고유한 사이즈의 위젯만 생성 할수 있습니다.

 

2.  위젯별 설명 추가

2-1. 한가지 속성에 타이틀을 줄수 있습니다.

- ConfigurationDisplayName, Description 을 이용해 추가 할수 있습니다.

 AppIntentConfiguration(kind: kind, intent: ConfigurationAppIntent.self, provider: Provider()) { entry in
    TestWidgetEntryView(entry: entry)
        .containerBackground(.fill.tertiary, for: .widget)
}.supportedFamilies([.systemSmall])
.configurationDisplayName("작은 위젯 타이틀입니다.")
.description("작은 위젯 내용입니다.")

 

- 각각 사이즈의 설명을 주고 싶은 경우가 있겠지만, 해당 기능은 지원하지 않는것으로 보인다

- 만약에 그럴경우 신규 Configuration 을 추가하고 WidgetBundle 에 묶어서 추가하면 가능하다.

 

3.  신규 위젯 구성 추가

3-1. A, B 각각 위젯의 성격이 다를경우 다음과 같이 처리가 가능하다.

*예시 소스 입니다. 추가하고 묶는 내용만 파악하면 됩니다.

struct TestWidget2: Widget {
    let kind: String = "TestWidget2"
    
    var body: some WidgetConfiguration {
        AppIntentConfiguration(kind: kind, intent: ConfigurationAppIntent.self, provider: Provider()) { entry in
            TestWidgetEntryView(entry: entry)
                .containerBackground(.fill.tertiary, for: .widget)
        }.supportedFamilies([.systemLarge])
        .configurationDisplayName("큰 위젯 타이틀입니다. (속성도 다릅니다)")
        .description("큰 위젯 내용입니다.")
    }
}

@main
struct TestWidgetBundle: WidgetBundle {
    var body: some Widget {
        TestWidget()
        TestWidget2()
    }
}

 

 

 

 

다음 포스팅은 데이터를 추가하여 갱신 하는 위젯을 만들고자 한다.

---

참고

https://developer.apple.com/documentation/widgetkit

WidgetKit | Apple Developer Documentation