WWDC 20 - Build SwiftUI views for widgets

---

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

---

 

 

 

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

Build SwiftUI views for widgets - WWDC20 - Videos - Apple Developer

 

---

요약

• 레이어의 코너를 모든디바이스에 동일한 값으주지않고 싶으면서, 디바이스마다 외부레이어의 코너에 따라 안족모서리를 그에맞는 코너를 주고싶을때는  ContainerRelatvieShape()를 이용한다.
  • 바깥레이어와 안쪽레이어의 사이의 padding값이 바뀌면 안쪽 코너도 자연스럽게 변경된다!
• Text에는 Data타입을 받을수있고, 다양한 포맷형식을제공한다
  
  • 이를통해 위젯에서는 라이브로 카운팅되는 날짜,타이머등을 볼수있다. 
• SwiftUI에서는 아주간단하게 view들을 따로 struct로 뽑아낼수있다. 
• SwiftUI는 Attribute Inspecter로도 손쉽게 뷰들을 수정할수있고, 즉각적으로 코드에도 반영된다. 
• 다크모드, 다양한 위젯사이즈, 폰트크기등을 preview에서도 확인할수있다. 

 

 

 

---

요런것들을 알아볼거다~ 

 

 

데모앱으로는, 내가 하루에 얼마나 커피를 마셨는지를 알수있는 앱이다. 

 

 

위젯으로는, 내가 하루에 카페인을 얼마나먹었는지 알수있도록 하는 위젯이다. 

크게 상단에는 하루에얼마나 카페인을 먹었는지,

하단은 가장마지막에먹은 커피와 시간을 보여준다. 

 

 

그리고 코너도 둥글게 할것이다 

 

마지막시간으로부터 얼마나지났는지 라이브로 보여줄수있어야한다. 

 

 

이미 WidgetConfiguration은 세팅해놨고, 

뷰들만 집중할수있도록 따로코드를 빼놨다. 

 

그럼, 뷰에필요한 데이터들을 작성해보자. - CaffeinWidgetData

extension으로작성한 previewData는 말그대로 preview에서 쓰일데이터다. 

 

 

우선 View에 프로퍼티를 추가하고, 

Preview에 previewData를 추가한다. 

 

 

자그럼 View에 UI를 다음과같이 추가해보자. 

 

 

Color("espresso")는 Asset에 들어있는 커스텀 컬러다. 

 

그리고 .minimumScaleFactor modifier를 사용했는데, 

이는 font자체가 title로 굉장히크다. 그래서 레이아웃이 더 작아질때 폰트도 더작아지게 하기위함이다.

 

 

 

배경색을 주기위해, 

ZStack안에 배경색을 입히고, VStack들을 넣어주었다.

 

 

그럼이제 하단뷰들을 만들어보자.

이번에 새로운 API를 사용했는데,

Text에 Data타입이 인풋으로들어갔다.

이를통해 자동적으로 시간이흐를스록 시간이 늘어나거나 줄어들게해준다!!

그러므로 홈스크린에서는 더 라이브하게보일것이다! 

 

 

그리고 보간법을이용하여 다음과같이 ago를 추가할수도있다.

또한 자동적으로 localized key를 생성해줌으로써 다양한 언어에대응할수 있도록해준다.

 

 

 

 

상단과 하단을 분리하기위해, 

각각을 VStack에 넣어주고, 

그사이에 공간을 넣기위해 Spacer()를 넣어주었다. 

 

 

그리고 각 VStack들을 leading주기위해, VStack의 Attributes Inspector에서 줄수있따. 

 

 

이제슬슬 코드가 복잡해보이기시작하니, 분리시켜주자!

SwiftUI에서는 View가 굉장히 싸기때문에 거의 아무런비용없이 가능하다. 

 

VStack - Extract Subview를 눌러준다. 

 

 

이렇게 따로 분리된 view에 이름 바꿔주고,

data를 넣어준다.

 

 

 

 

마찬가지로 하단뷰도 subView로 끄집어내주자. 

 

 

그렇게 WidgetView에 데이터를넣어주자. 

 

 

 

기본적으로 현재 컨텐트들이 center되어있다 ( center안에서 leading으로되어있음 ) 

이제는 컨텐트들을 아예 leading으로 해주고싶다. 

그러기위해서는 HStack에넣어주고,  Spacer를 오른쪽에추가함으로써 가능하다.

 

 

 

 

그리고 약간의위아래 padding을주기위해 

VStack의 Attributed Inspector를 이용했다. 

마찬가지로 코드에도 반영된다 ( .padding(. all) ) 

• 따로 Padding 값을 주지않았는데, SwiftUI는  디바이스와 설정값에의해 적절한 값을 사용하기때문이다. 

 

 

그리고 상단뷰에 백그라운드를 변경해줬다. 

 

 

또한 상단뷰에도 적절한 padding을 모두주었다. 

 

하지만 너무 과한 padding같으므로, 8로 설정해주자. 

 

 

 

humna Interface Guidline에서 widget은 rounded 코너가 중요한 디자인적요소중 하나이다. 

이는 간단하게 .cornerRadius를 통해가능하다. 

 

하지만, 디바이스마다 위젯에 다른 Radius를 적용할수있으므로,   다른 방법을 사용해보자.

iOS 14에서는 ContainerRelativeShape가 있는데,

이를통해 가장가까운 Container shape를 찾고, 적절한 corner radius를 적용해준다. 

여기에서는 시스템은 container shape를 widget으로 잡고, 그에 적절한 corner을 제공해준다!!

 

 

자동적으로 조절해주는것은 아래를 보면 호가실히 이해가간다.

상단과하단뷰를 감싸는 VStack의 padding값을 변경하면 자동적으로 Corner값이 변경되는걸 알수있다!!!

즉 외부의 corner와 자신의 Corner사이의 거리를 계산해주면서 아주적절한 내부적 corner를 갖게해준다!!

 

 

마지막으로 상단에 공간을 넣어주자. - Spacer () 

 

 

 

 

 

스크린에설치하기전에, 우선 preview로 darkmode를 확인해보자.

.environment modifier를 이용하여 쉽게 preview로 볼수있다!

이것이가능한이유는 이미 Asset 카탈로그에 커스텀색을 추가할때 Darkmode도 추가해줬기때문이다.

즉 Widget은 자동적으로 색을선택해준다.

 

 

 

우리엄마는 굉장히커피를 좋아하시기떄문에 이앱을 굉장히좋아할것이다.

하지만, 하단의 시간을 나타내는 글자는 다소작아서 어머닣나테 불편할수도있겠다. 

그러므로 큰글자도 지원하고싶다!

그전에! 한번 Preview를 통해서, 이미 디바이스에 큰폰트로설정한경우를 봐보자. - extraExtraExtraLarge

 

 짜잔!! 아무런작업을안했는데도 이미 지원ㅇ르하고있다!! 이것이 다 SwiftUI덕분이다. 

 

 (  placeholder 방법도나왔는데, 이제는 isPlacedholder modifier가 사라졌으니 넘어가겠습니다  ) 

 

 

 

 

자, 다양한 family사이즈를 지원해보자.

우선 preview로 medium사이즈를 봐보자. 

다좋은데 너무 공간낭비가심한거같아! 

 

 

남은공간에 어떤 커피를 마셨는지, 에대한 사진을 넣고싶다.

그러므로, 데이터구조에 photoname을 만들어주자. 

그 포토는 asset 카탈로그에서 가져오도록한다. 

 

자그럼, 사진은 medium사이즈에서만 나와야한다.

 

그러므로 조건문가능한 LAyout을만들어야하므로, @Environment 프로퍼티를 이용하자.

 

 

그리고, 컨텐츠오른쪽에 이미지가나와야하므로, 

HStack으로구성하고,

조건문을 통해 medium사이즈일때만 image를 보여준다!!!

 

 

 

---

자이것으로 위젯뷰는 마치고, 

위에서적용한 새로운 API를 다시 설명해보자. 

 

 

corner를 정할때 모든 디바이스에 똑같은값을 설정하고싶지않을것이다.

이는 COntainerRelativeShape를 통해서 쉽게 가능해진다.

바깥코너와 안쪽모서리의 거리를 계산하여 자연스럽게 안쪽코너를 만들어준다. 

 

 

그리고 Text에는 Data타입을 받을수있고, 다양한 포맷형식을제공한다.