WWDC 20 - Widgets Code-along, part 1: The adventure begins

 

 

---

• 세션보면서 정리한 내용입니다. 해석이 잘못된 경우가 있을수있으니 발견하시면 댓글로 남겨주시면 감사하겠습니다🙏🏻

---

https://developer.apple.com/wwdc20/10034

Widgets Code-along, part 1: The adventure begins - WWDC20 - Videos - Apple Developer

 

 

 

 

 

---

 

요약 

• 간단하게 Widget은 그저 SwiftUI의 View이다
• Widget을 preview로 볼때는, .previewContext modifier를 붙여야한다.
• View에 필요한 데이터들은 entry로 표현되고, 이 entry들은 timeline provider에의해 제공된다.
• timeline provider는 placeholder, snapshot, timeline을 제공한다.
  • placeholder는 위젯이 timeline을 기다리는동안 사용되어지고,  유저정보를 이용하지말자.
    • 유저정보를 이용하지않느방법으로는 간단하게 SwiftUI - .isPlaceholder modifier를 이용하면 손쉽게가능하다.
      • ( 직접해봤는데 isPlaeholder자체가없어졌더라고요. -ㅁ- 애초에 이제는 PlaceholderView 기본Template에 없기도해요. 아마, 그냥 자동적으로 지원하는게 아닐까, 싶습니다. ) 
  • snapshot은 위젯갤러리에서 한번만 사용되는 entry로 사용된다.
  • timline은 위젯갤러리로부터 홈스크린에 추가되고나서 사용된다. 
• Widget의 family들을 제한하는 방법은 Widget - body - .supportedFamilies modifier를 이용하면된다.

 

---

 

 

이번세션은 코드로 진행하므로, 

진행할프로젝트를 아래에서 다운받아서 같이진행해볼수있다. 

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

Apple Developer Documentation

 

 

우선 간단하게 위젯은 그저 SwiftUI view일뿐이다.

그리고 시간에따라 SwiftUI view를 업데이트한다. 

 

 

 

일단, 첫번째프로젝트를 실행해보면, 

3가지캐릭터들이나온다. 각각 침입자로부터 세상을 지키는 캐릭터들이다 ㅎ

 

세부사항들은 체력바랑, 시간이 있다.

 

이제 위젯에들어갈 화면의 구현코드를 살펴보자. 

SwiftUI로 작성됐고, 스택으로이루어져있다. 

 

이코드면 충분하겠다.

 

이제 WidgetTarget 만들자. 

File - New - Target 

 

widget extension선택한다. 

activate 해준다. 

 

 

 

 

자이제 target이만들어졌고, 

이미 우리가원하는 뷰들이 있으니, 해당 파일들을 target에 추가해주자. 

 

 

 

우선 동작하는지를 확인하기위해,   아바타가있는 뷰 - AvatarView를 preview에 넣어보자. 

Widget에서 preview를 하기위해서는 .previewContext modifier를 붙여야한다

 

그리고 몇가지 정보를 수정해주자.

configurationDisplayName과 description을 수정한다. 

 

 

 

그리고 우리의 메인 entryView - EmjoiRangerWidgetEntryView에서, 

body를 AvatarView로 바꿔주자.

그런데, AvatarView에는 캐릭터가필요하다.

그럼 캐릭터는 어디에서오는걸까? 

entry와같이 오기때문에, 

entry를 변경하자. 

• CharacterDetail 타입 프로퍼티를 추가해줬다. 

 

다시 EntryView의 AvatarView의 캐릭터를 넣어주고, 

 

 

그런데, 그럼 entry는 어디에서오는걸까? 

 

entry는 timeline provider로부터 온다. 

timeline provider는 위젯의 핵심적인 엔진이다.

• 위젯갤러리에서 하나의 entry만 보여주고할때.  timeline provider는 snapshot을 제공한다.
• 또한 유저가 갤러리로부터, 디바이스에 configured 된 위젯을 추가했을때,  full timeline을 제공한다.

 

그러므로, timelineprovider - snapshot에서 character를 넣어주자.

 

 

우리는 Full timeline은 필요가없으니, 하나 entry만 넣어주자.

 

 

오케이! 이제 빌드하고 런해보장

 

오케이 위젯이 홈스크린에 설치됐다. 

ㅎ자ㅣ만 뭔가 수정하고싶은부분이있다. 

 

 

 

우선 첫번째로, 여러개의 사이즈를 기본적으로지원하고있따. 

하지만 medium, large들은 적합한사이즈가아닌것같다.  또한 지원하기에는 애매하다.

그러므로 families를 제한해보자 

 

아주간단하게, Widget - body에 .supportedFamilies modifier를 이용하면된다. 

 

 

또, target에 기본 template으로, PlaceholderView가 있는데,

PlaceholderView는 우리위젯이워낙빨라서 제대로 못봤지만, 위젯이 타임라인을 기다리고있을때 보여지게되는 뷰다.

그래서 AvatarView로바꿔주고, 

 

그리고 PlaceHolderView의 preview를 확인할때는

그냥 Group으로만들어주고 PlaceholderView를 추가해주면된다! 

 

 

 

하지만 나는 placeholder에 진짜 content말고, 없는content로보여주고싶다!

SwiftUI는 아주쉽게 할수있따.

간단하게 isPlaceholder modifier를 이용하면된다!!! 

• 직접해봤는데 isPlaeholder자체가없어졌더라고요. -ㅁ- 애초에 이제는 PlaceholderView 기본Template에 없기도해요. 

 

끝!

 

그리고 다음 세션들을 참고하면 너무나좋다!!