[iOS] SwiftUI : 한 사이즈의 서로 다른 디자인 위젯 여러 개 만드는 법

위젯의 사이즈는 small, medium, large가 있습니다. extraLarge의 경우 아이패드에서만 되는 것으로 알고 있어요.

이 중에서 저는 small 사이즈만 2 타입의 디자인으로 만들고 싶어 아래와 같이 구현해보았습니다.

 

우선은 PrevieProvider 프로토콜을 따르는 struct에서 아래와 같이 코드를 구현해주면 됩니다. family에서 한 사이즈만 지정해주면 됩니다. 

struct cocoBabyWidget_Previews: PreviewProvider {
    static var previews: some View {
        cocoBabyWidgetEntryView(entry: SimpleEntry(date: Date(), babyNickName: "", dDay: "", dWeek: "", configuration: ConfigurationIntent()))
            .previewContext(WidgetPreviewContext(family: .systemSmall))
    }
}

  .previewContext(WidgetPreviewContext(family: .systemSmall)) 

 

그리고 Widget 프로토콜을 따르는 struct에서 아래 소스코드를 추가해줍니다.

struct cocoBabyWidget: Widget {
    let kind: String = "cocoBabyWidget"
    
    var body: some WidgetConfiguration {
        IntentConfiguration(kind: kind, intent: ConfigurationIntent.self, provider: Provider()) { entry in
            cocoBabyWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
        .supportedFamilies([.systemSmall])
    }
}

     .supportedFamilies([.systemSmall])

 

 

디폴트로 여러개 사이즈를 가진 위젯(제일 작은 크기 이외에는 unknwon"이라는 글자만 뜨게 했습니다.

디폴트로는 이렇게 3개의 사이즈가 나오는데요.

 

 

 

위와 같이 family에서 사이즈를 지정하면 원하는 사이즈만 위젯 추가시에 나타나는 것을 볼 수 있어요.

 

다음은 한가지 사이즈로 다양한 디자인, 혹은 포맷으로 구현하고 싶을 때가 있는데요. 이때 아래와 같이 구현하면 됩니다.

기본적으로 위젯을 2개 구현하고, 이 2개의 위젯을 메인에서 불러오는 개념인데요.

WidgetBundle 프로토콜을 통해서 구조체를 구현하고, Widget을 반환하는 인스턴스를 만들어 주면 됩니다.

 

첫번째 위젯, 두번째 위젯 둘다      .supportedFamilies([.systemSmall]) 로만 구현한 후에 WidgetBundle 을 이용하고, @main을 통해 가장 먼저 해당 구조체가 호출될 수 있도록 구현해줍니다.

@main
struct cocoBabyWidgetBundle: WidgetBundle {
    @WidgetBundleBuilder
    var body: some Widget {
        cocoBabyWidget()
        cocoBabySecondWidget()
    }
}

 

2가지 디자인 타입의 같은 사이즈의 위젯이 구현된 것을 볼 수 있습니다.

 

최종 버전은 아래와 같습니다! ㅎㅎ

얼른 마무리하고 업뎃버전 출시하고 싶네요.