목차
- 세션보면서 정리한 내용입니다. 해석이 잘못된 경우가 있을수있으니 발견하시면 댓글로 남겨주시면 감사하겠습니다🙏🏻
https://developer.apple.com/wwdc19/219
SwiftUI on watchOS - WWDC19 - Videos - Apple Developer
SwiftUI allows a whole new world of possibilities when developing watchOS apps and notifications. From custom animations to providing an...
developer.apple.com
요약
watchOS6 부터는 이제 SwiftUI를 사용할 수 있다!
- watch app, notification, digital crown에서 사용할 수 있다.
watch app에서는 SwiftUI - WKHostingController를 채택하여 interface controller 역할을 하게된다!
- 또한, 기존 WatchKit과의 완전한 통합이되었기때문에 둘다 같이쓸수있다.
- 스토리보드에 해당 클래스를 사용할수있다!
- List에서는 watchOS에서만 사용할수있는 .listStyle(.carousel) modifier를 지원한다.
Notification에서는, SwiftUI - WKUserNotificationHostingController를 채택하여 notifciation controller역할을하게된다.
digital crown에서는, .digitalCrownRotation modifier를 이용하여, 다양한 상황에 맞는 파라미터를 지정하여, crown으로 제어할수있게된다.
watchOS6 부터는 SwiftUI를 사용할수있게됐따!! ( 박수박수 )
SwiftUI는 WatchKit과 완전하게 통합되었기땓문에, 둘다같이 사용할수있다.
watchOS에서 SwiftUI를 사용할수있는 몇가지 다른방법들을 살펴볼것이다.
이 watch app은 카드리스트로, 각 퀴즈를 볼수있다. 어디서든 공부하기위해서다 ㅎ
기존에는 WKInterfaceController를 채택하는 클래스가 interface controller가 되어야하는데,
이제는 WKHostingController를 채택하는 클래스가 interface controller가 된다!!
해당 클래스는 SwiftUI에의해 제공된다.
WKHostingController는 interface controller의 타입이므로, 이것을 다른 interface controller에서도 사용할수있다!!
물론! 이 클래스가 처음으로보여지기위해, 스토리보드에서도 사용되어진다!
또한, WatchKit interface controller push API를 이용하여 해당 interface controller에 push할수있다!
TopicList를 자세히보면,
List로 구성되어있고,
각 cell은 TopicCell로 표현하고,
각 cell마다 NavigationButton을 붙임으로써 CardList라는 다른 View로 이동하게해놨다.
그리고 cell은 .listRowPlatterColor modifier를 사용함으로써 각 셀마다 섹을 지정해주었다.
그리고 @ObjectBinding을 통해, 해당 model이 변경될때마다 뷰들이 업데이트된다.
자이제는, 각 cell에 각 주제마다 몇개의카드가있는지 알기위한 label을 추가할것이다.
우선 stack을 사용하고,text를 추가하자.
그리고 stack은 기본적으로 center alignment이므로, leading으로바꿔주자.
또 각 셀마다 주제에맞는 이모티콘을 넣어주고싶다.
HStack을이용하여 text 를 넣어주고, 폰트크기를 키워줬다.
그리고 Apple Watch에만 유니크한 새로운 SwiftUI기능이 더 있는데, 그것은바로 스크롤!
우선 각 셀마다 동일한 height를 지정해준다.
그리고 List에.listStyle(.carousel) modifier를 추가해준다!!
그러면!! 스크롤하면 다음과같이 딱 센터에집중하게해주고!! 대박
그리고 List에 새로운 두가지타입의 기능을 추가했다.
그것은 드래그!!
onMove를 통해서 드래그하여 위치를 변경할수있고,
onDelete를통해서 삭제할수있다!
자이번에는, interactive notification을 살펴보자.
notification은 크게 두가지중요한부분으로 구성된다.
짧게보이는것과 길게보이는것으로 구성된다.
짧게보이는것은 자동적으로 앱아이콘이포함되어진다.
짧은부분이지나고, 자동적으로 긴부분으로 변환되는데,
scrolling interface가있고, 커스텀이가능한부분이다.
notification안에서 이렇게 예약가능한 화면을 제공하고잇다.
하단에는 action이 포함되어있다.
자 그럼, 기존 Pop Quiz앱에도 이름처럼 팝하게 나타날수있도록 만들어보자.
NotificationController안에서 시작한다.
이것이 SwiftUI로 시작하는 NotificaitonController다.
didReceive 메서드가존재하고,
didReceive가 호출되고나면 body를 다시그려낸다.
NotificaitonView를 보면 다음과같은데,
공부하기에는 영 별로다. 그러므로 바꿔보자.
canvas하단의 핀버튼을이용하여 NotificaitonView와 FlashCard 둘다 보여주자.
좀 더 크게 보여주고싶으므로, Side안에 넣어준다.
그리고 커스텀으로, 미리 만들어둔 container인 FlipView로 감싸는데,
( FlipView 코드는 해당 링크에서 확인할수있다. )
실행해보면 다음과같이!!! flip되어진다!
심지어드래그도가능해진다! ( 박수박수 )
이제 apple Watch의 마지막, digital crown을 얘기해보자.
이미, WKCrownSequencer API를 통해서 digital crown의 장점을 사용할수있다.
해당API로는 굉장히 아주 제한된기능만 할수있다.
Apple Watch Series 4부터는 햅틱크라운을 도입했다.
( 돌리면서 진동주는 )
그냥 스크롤하는것을 digital crown으로하기위해서는 다음과같은 .digitalCrownRotation modifier를 이용한다.
( 근데 스크롤은 크라운으로 원래되는거 아니였나??????? )
이번에는 스크롤기능은 필요없지만,
People에서 사람수를 카운트시키는것을 크라운으로도 하기위해서는 다음과같은 modifier를 사용한다.
by 파라미터가있는데, 몇씩 증가시킬것인지, 이값을통해 햅틱피드백을준다.
이렇게 알람앱은 원형으로돌아가는구조다.
추가적으로 sensitivity, isContinuous 파라미터를 갖는다.
sensitivity는 한칸을 움직이기위해 크라운을 얼마나돌려야할지를 나타내고,
isContinuous는 끝에도달했을때 멈추도록할것인지를 나타낸다.
그러므로, isContinous 가 true이면, 한바퀴돌아도 계속해서 돌수있다.
그럼 크라운이 입력값을 받기위해서는 어떻게해야할까?
UIKit Framework에서 사용하던, firstResponder 와같이,
.focusable modifier를 이용하면된다.
이를통해 탭하는 뷰에따라 크라운이 focus하게된다.
추가적인 내용은 다음세션을 참고해라.
그럼 크라운을 Quiz앱에 적용시켜보자!
카드리스트형식이, 원래는 ScrollView로 구성되어있는데, 이를 ZStack으로 바꾼다.
이를통해 더이상 수직적인 뷰구조가아닌, 상단에 다 몰려있는형식이된다. 하나밖에안보이지만, 모든 카드들이 있는것!
그리고 ZStack에 대해 digital crown modifier를 적용시킨다.
그리고 커스텀으로만든 .cardTansformed modifier를 적용시킨다. 3D애니메이션전환이이루어짐!
그래서 이를 실행해보면!
짜잔!!
SwiftUI를 통해서 이렇게 Apple Watch에서도 적용할수있다라는것을 알수있다!!
다음세션을 참고하랏!
댓글