[WidgetKit]Widget이란? & Widget 만들기

1.Widget 이란?

공식문서를 보면 WidgetKiet은 앱과 관련있는 콘텐츠를 한눈에 보여준다고 합니다.

또한 앱에 빠르게 접근할 수 있도록 하며 3개의 다른사이즈(small, medium, large)를 제공합니다.

유저가 위젯을 스택으로 쌓았을 때는 적절한 시간에 관련있는 정보가 가장 위에 오도록 rotate 시키기도 합니다

 

위젯을 실행시키기 위해서는 widget extension을 추가해야 합니다.

timeline provider로 위젯내용이 언제 업데이트 될지 설정할 수 있으며, swiftUI를 이용해 위젯에 표시될 콘텐츠를 보여줍니다.

 

---

2.Widget 만들기

1. File > New > Target

2. Widget Extension

3. extension 이름 입력

4. Click Finish

 

 

 

---

3.Add Configuration Details

2번에서 widget 이름을 넣는 창에서 Budle identifier 및에 include Configuration Intent라는 체크박스가 보입니다.

이 체크박스텅해 유저에게 위젯을 커스터마이징할 수 있게 할 것인가에 대해 선택할 수 있습니다.

 

StaticConfiguration

유저가 구성할 수 있는 프로퍼티가 없는 위젯입니다.

공식문서에 나와있는 예로는 일반적인 시장 정보를 보여주는 주식시장 위젯, 헤드라인을 보여주는 뉴스위젯이 있습니다.

 

IntentConfiguration

유저가 구성할 수 있는 프로퍼티가 있는 위젯입니다.

공신문서에서는 도시의 우편번호 또는 추적번호가 필요한 패키지 추적 위젯이라고 나와있습니다.

(이 예제는 뭔소린지 모르겠지만 개인에 따라 위젯내용이 달라질 수 있을 때 intentConfiguration을 사용한다고 이해함

디데이나 메모를 위한 위젯 등)

 

Congifuration 생성자

Widget을 생성하면 아래와 같은 코드를 볼 수 있습니다.

Configuration의 생성자를 보면 kind, intent, provider, content closure를 볼 수 있습니다.

kind

widget을 구분하는 문자열로, 위젯의이 나타내는 내용을 설명해야 합니다.

intent

유저가 설정할 수 있는 프로퍼티를 정의하는 커스텀 intent라고 합니다.

Provider

위젯을 언제보여줄지를 알려주는 provider를 넣어줍니다. 이 provider는 TimelineProvider를 conform 하는 객체입니다.

다시 말하자면 위젯의 내용이 언제 보여지고, 언제 업데이트가 되어야 하는지에 대한 정보를 담고 있는 객체를 넣어주어야 합니다.

언제 보여질 지는 TimelineProvider 라는 프로토콜을 따르고 있는 Provider라는 구조체 안에서 정의할 수 있습니다.

(Timeline Provider에 대해 자세하게 따로 글 쓸 예정)

 

Content Closure

SwiftUI view를 담고있는 클로저입니다. provider의 TimelineEntry 파라미너를 넘겨주며 위젯의 내용을 보여주기 위해 불러집니다.

 

 

Placeholder

아직 잘 모르겠음. 다음에 정리

---

4.Display Content in Your Widget - 위젯 사이즈 정해주기

 

공식문서 예제에서 조금 변형한 예제 코드입니다.

small, mdeium, large 각각 1, 3, 5 개씩 인덱스를 표시해주도록 하였습니다.

struct GameStatusWidgetEntryView : View {
    @Environment(\.widgetFamily) var family: WidgetFamily

    var count: Int {
        switch family {
        case .systemSmall: return 1
        case .systemMedium: return 3
        case .systemLarge: return 5
        default: return 3
        }
    }
    
    var entry: Provider.Entry

    var body: some View {
        ForEach(0..<count) { index in
            Text(String(index))
            Divider()
        }
    }
}

 

size 별로 설정해준 인덱스가 잘 나온 것을 확인할 수 있습니다.

 

어떤 사이즈들을 제공할 지 또한 설정가능합니다.

맨 마지막줄 supportedFamilies 를 이용해 어떤 크기위 위젯을 제공할 지 써주면 됩니다.

(default는 small, medeium, large 모두 제공)

 

**공식문서와 블로그들을 보면서 공부 목적으로 정리한 글입니다.

문제 있을 시 알려주시면 수정하도록 하겠습니다 :)