WWDC 21 - What’s new in SwiftUI

---

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

 

---

 

 

 

요약

• AsyncImage 가 생겼다.  - 비동기적으로 이미지를받아오도록 하고, default로 placeHolder를지원한다.  다양한 커스텀,애니메이션, 에러핸들링지원!
• List - .refreshable modifier등장했다. 비동기적으로 수행할수도있다. 
  • .task modifier를통해, 처음에 뷰가 로드되어질때 작업을실행하도록할수있다. 
  • 또한, 비동기적인 배열들에 listen하면서 자동적으로 새롭게 추가할수도있다. 
  • .listRowSeparatorTint  modifer를 통해 각 구분선마다 색깔을지정할수있고, 숨길수도있따.
  • .swipeActions 를 통해 액션들을 추가할수있다.  
    • trailing, leading, 등 여러개가능! 
• MacOS를위한?? Table 이생겼다.  - 여러칼럼으로생성하게할수있다. 
• 간단하게 NavigationView에 .searchable  modifer를 통해 쉽게 search field를 부착할수있다. 
• .importItemProvider를 통해,  디바이스로부터 mac에 데이터를넣을수이따???  
• .exportItemProvider를 통해 내보낼수도이따. 
• symbol은 이제 fill를 하지않아도 자동적으로 적절한 symbol이선택되어진다. 
• Canvas 가생겼다.  
  • 모든 symbol들을 보여준다. 
• TimelineView 가생겼다.
  • 현재시간에따른 값을주고, 그값에따라 특정뷰를선택하도록…. 화면보호기처럼. 
  • TimelineSchedule을 이용해서, watchOS…이미지변경…. 등 

• .privacySensitive   modifier를 통해, 민감한정보는가릴수있게했다.
  • watchOS, widget에서 락되어있는 경우에 가려준다. 
• .background ( .ultraThinMaterial ) 을 통해 백그라운드가 약간의블러먹으면서 뒷배경들이 살짝투시되도록한다. 
• View -  .safeAreaInset 이 추가되어 ,스크롤뷰안에서 safeArea를 추가한다. 
  • ScrollView에 추가할수도있고
• preview에 orientation모드도 추가됐다. 
• 그리고 Text에 이제 markdown포맷을 지원한다…….!! 
  • Label도 가능하다! 
• TextField - .onSubmit  버튼을통해 return 누를경우 액션을취할수있다. 
  • .submitLabel을 통해서 return 버튼을 바꾸거나 강조할 수 있다. 
• @FocusState가생겼다. 
• Button에 다양한  옵션이생겼다. - tinted, .constrolSize, .controlProminence 
• .confirmationDialog를통해 행동하기전에 확인을 얻도록한다 ( alert처럼 ) 
• ControlGroup이생겼다. 각 버튼들을 묶어주는… 

 

 

 

---

2019년에 발표했고,

2020년에 완전히 SwiftUI로만으로 앱을만들수있고,

2021년에, 이제, 새로운다양한기능들을 더 적용시켰다.

• 물론, 기존의 UIkit, Appkit 에서도 SwfitUI를 믹스할수있다.

 

SwiftUI는 모든플랫폼에서 쉽게 가능하다.

 

 

 

 

아래의것들을 살펴보자

 

 

 

 

👍SwiftUI는 이제  내부적으로 이미지로딩을 비동기적으로 지원하는 Image를 제공한다. ( AsyncImage ) 

 

👍AsyncImage

손쉽게 URL만 주면 비동기적으로받아오고, 

default로 placeholder를 지원한다.

 

또한 다양한 커스텀을지원한다!

• placeHolder의 색을지정하고, image를 수정하고, 
• 심지어 애니메이션, 에러핸들링ㄷ가능하다. 

 

phase단계를통해서, 에러, 성공, 등에관련하여 애니메이션을 작용할수있따!!

 

 

 

 

 

👍.refresh modifier

• 새로생김!
• 또한, 커스텀이가능하다.

 

 

await는 Swift5.5에서새로등장한 동시성언어기능이며, 

비동기적인 메서드라고 지칭하고, 

UI를 막지않으면서 refresh하도록해준다.

 

 

👍.task modifier 

• 새로운 동시성API이다.
• 뷰의라이프타임에 비동기적인작업을 부착하도록한다.
• 뷰가 처음으로로드되어질때, 작업을실행하고, 뷰가 사라질때 자동적으로 취소하게한다.

 

• 또한, 다양한 복잡한 비동기작업들과도 사용되어질수있다. 

👍for await  in 

• 새로운 비동기적인 배열이다 .
• 그래서아래와같이 사용하면, newestCandidates를 비동기적으로 listen하면서, 새로운게있으면 업데이트해준다……?!!

더 자세한건 아래 세션 참고!

 

 

 

 

 

List에 더 인터랙티브하게 빌드하는 새로운방법이 생겼다.

 

아래는 아주간단한 list이지만, text가 editable하지않다.

 

 

 

간단하게, Text를 TexField로 변경한다. 

하지만, 바인딩이필요하다. 

list클로저안에서 각원소들은 바인딩이아니다.

 

 

이렇게, 섭스크립트를이용하여 바인딩할수있지만, 

변형이생길경우에, 전체리스트를 reload하기때문에 추천하지않는다.

대신, 더자세한 내용들은 아래 session을 참고하라 

 

 

달러사인으로 바인딩으로 전달하도록한다 .

 

이러한 문법들은 swift에서 가능하므로, 모든곳에서가능하다 ( ForEach구문안에서도 ) 

 

 

 

👍 .listRowSeparatorTint modifier 

 

• 새로등장한것으로, 각각에 원하는색으로지정할수있다 .
• 물론 section에도 동일한 modifer를지원한다.

 

• 물론 separtor을 숨길수도있따.

 

 

 

👍.swipeActions   modifier 

• 커스텀스와이프액션을 정의할수있다. 
• 물론 액션에 tint 컬러도지정할수있다.
• 모든플랫폼에서적용가능하다.

 

• 👍default로 trailing에 액션이나타나도록하는데, leading으로변경할수있다.

 

 

• 👍또한, trailing, leading 등으로 계속해서 액션들을 추가해줄수있따. 

 

 

MacOS

에서,  왼쪽에 열을 표현하기위해, 오른쪽에만 데이터가나타나도록 , .insert으로  listStyle을 주었다!

 

 

• 또한, style을 alternateRowBackground를 정하여, 셀 백그라운드색을 번갈아나타나도록할수있다.

 

 

 

👍우리는, 좀더 남은 화면들을 더 많이사용하고싶다!!

이렇게 한테이블에 4개의컬럼을줄수있따

 

 

 

 

 

👍 Table 

 

또한 셀렉션이가능하다. 멀티셀렉션도!

 

 

• 또한 sort도 지원한다. 

 

 

core data fech reuqest의 지원을 해준다.

 

FetchRequest

 

 

SecitonedFetchReuqest 

• 음, pinne인지아닌지로 섹션을나누어주면서 정렬해준건가? 

 

 

 

MacOS를위한 SwiftUI와, Table , Core data 사용방법은 아래 session확인.

 

 

 

👍.searchable   modifier

• 간단하게 한줄로 작성가능!
• 알아서 적절한 장소에 search field를 부착해준다.

 

자세한건 아래참조,

 

 

 

 

 

 

 

사진? CharacterIcon? 은이제 다른앱과 drag 가가능해진다. 

 

 

👍.importsItemProviders    modifier 

• 음,… 아래를통하면, 아이폰,아이패드에서 사진등을 mac 앱에보낼수있다뭐그런간가…..

 

 

이렇게, 맥앱에서 Import From iPhone or iPad - Take Photo 를누르고,

 

짜잔.!! 이렇게 핸드폰에서찍은사진이 넘겨온다…….. 개쯘다

 

 

 

 

 

데이터를 export할수있다.!

 

 

 

 

 

SF Symbol에 많은 modifier가 생겼다.

• circle, filled, ….etc
• 이전에는 하드코딩했어야했다.

 

 

Human Interface Guidelines에서는 tab bar에서는 fill을 사용하라고 권장한다. 

 

하지만~ 이제는 fill을 붙이지않아도, 이제는자동적으로 적절한 것으로 선택해준다.

음, 또한 다른플랫폼에서도 적절히선택되어진다? 

 

 

 

👍Canvas 

• 모든 symbole들을 볼수있도록해주는? 
• ㄸ한, 모든 플랫폼에서가능하고,
• 뷰와 마찬가지로 제스쳐, 정보, 상태에따른 업에티드, 다크모드 등등 다 지원한다.

 

 

• 이렇게도가능하다…….ㅎㄸ

 

 

.accessbilityChildren    modifier 

• Canvasㅂ뿐만아니라 다른 뷰도가능하다

 

 

 

👍TimelineView 

• 음,.. screensaver와같이…? ( 화면보호기 ) 
• 스케쥴과 같이생성된다. 

• 현재시간을 전달하고, 그것에맞게 focalpoint(초점)를 업데이트한다? 

 

 

이러한 Timeline뷰는 정말 유용하다.  ( 이렇게 움직이도록!! ) 

 

 

• 이전에는 Always on 디스플레일때는 시간에의해 가려졌는데, 
• 이제는 어둡게만하는것으로 default되고, ( 가려지지않고, 대신어둡게만? ) 

• 음, 그래서뭐 자동적으로움직인다는건가?  그냥바뀌도록만하는듯

 

 

• 중요한점은 TimelineSchedule이다.
  • 정한시간에 따라 로드한다.  

• 다양한종류가있다.

 

👍.privacySensitive    modifier 

• 민감한정보는 숨기고싶다 
• 자동적으로, Always On state일때 가려준다. 

 

자세한건 세션

 

 

 

또한 위젯에서도사용가능하다.!

• 락스크린에 추가됐으면서, 잠금화면일때 가려준다.
• 풀리면 보여줌!

 

 

 

.ultraThinMaterial      modifier 

• 아하, 최대한 뒷배경을 비추도록하나보다 . 
• 이모지는 자동적으로 배재한다. 

 

 I'm adding a material-backed overlay to display the number of symbols. Adding a material is as easy as adding a background. I'm using the ultraThinMaterial, and can give it any custom shape to fill. These materials automatically come with the expected vibrant blending of content on top of them when using primary, secondary, tertiary, and now even quaternary foreground styles. And emojis are automatically excluded from that, so they look exactly as they should.

 

 

macOS에서는 sidebar, popover는 자동적으로 blur material background를 갖는다.

 

 

이러한 material은  safeArea와의 결합에서도 잘작동한다.

• 스크롤해도 아래 safeArea는 침범ㅁ하지않으면서,  해당 safeArea의 백그라운드를 블러처리해준다.

 

( 가장하단으로내렸을떄, 

 

 

 

👍.previewInterfaceOrientation     modifier

preview에 추가하여, 가로,세로모드를 각각볼수이따!

 

 

 

accessbility에서도 개선점이생겼다.

더쉽게. 볼수이따? 

 

또한 Accessbility tab도생겼다.

 

 

 

 

 

 

 

 

 

대박,  Text는 이제 markdown 포멧을 지원한다…

 

 

type safe 한 attribute도 가질수있다.

 

 

커스텀 attribute를 정의할수있고, 마크다운문법안에서 작성되어질수있다.

 

 

 

물론,마크다운이 localized에서도 적용된다.

 

 

음, 이제 Xcode13부터는 String, 등을 뽑아낼수이따? ? ? ? ? ? 

 

 

 

또한, 다이나믹타입에 대해서, 최소최대를 이렇게 지정할수있게됐다.!

• dynamic … dynamic 

최소로 정한사이즈가있기때문에, 그것보다작은폰트는 똑같이 최소로정해진다.

 

 

 

👍.textSelection     modifier 

macOS는 dynamic type을 지원하지않지만, 

selectable text를 지원한다.

• 수정가능한텍스트가아님에도, 드래그를 가능하게해준다.
• text뿐만아니라 모든뷰에도가능하다!!
• 또한, iOS, iPadOS에서도 가능하며, 이때는 롱프레스를통해 선택할수있다.

 

 

 

 

 

새로운포멧 API 

• 날짜는없애고, ㅣㅅ간만!

 

 

• 이름? 의포맷도..

 

 

 

 

 

.onSubmit         modifier

• 사용자가 return눌렀을때 감지하는 ? 

 

 

.submitLabel         modifier

• return을 누르면 어떤 일이 생길지 힌트, 강조하기위해 . 

 

키보드위에 툴바에 나타나도록 할수있다.   

• macOS에서는 터치바에나타난다.

 

 

 

@FocusState

• 음……상태에따라 활성화시켜주는거같은데…  ( 어렵 .. ) 

 

 

• 키보드가사라질때 포커스를 끄도록……

 

 

 

 

Button에 많은기능이생겼다.

 

• standard bordered button이 추가됐다.

 

 

 

• 버튼이사용된모든그룹에대해 일괄적으로 적용시킬수있다.

 

Tint도적용된다.

 

 

 

 

.controlSize    modifier 

 

 

 

.controlProminence     modifier 

• increased로 정말 stand out 하게만든다

large 로 controlSize정하면, 자동적으로 이쁘게, 라운디드된거로 만들어준다.

 

 

 

.keyboardShortcut           

• 키보드 엔터로 작동할수있도록해준다.

 

 

자동적으로,  눌려지거나, 못만지거나, 다크모드, 다이나믹타입, 등에 잘 적용도이ㅓ있따.

 

 

 

 

자동적으로 destructive하면 빨간색으로나타난다.

 

 

.confirmationDialog          modifier

• 액션하기전에 확인을 얻도록 한다.

 

 

 

 

.menuStyle에 button, .

.menuIndicator ( .hidden) 을 추가했다.

 

 

 

 

primaryAction

• 음, 음, ……. 그니까, indicator가있으면 그걸로 리스트를보여주고, indicator를안누르면 바로 deafult로동작하게끔.
• 만약 indicator가 없다면, 꾹 누르도록??????!! 해서 리스트나타나나봐. ( 인디케이터 가리지않아도그런듯, - ㅁ - ) 

 

 

 

 

.toggleStype         modifier

• 기존토글을 버튼처럼보여지게한다. 오홍 ㅎ

 

 

ControlGroup

• 연관성있는 컨트롤들을 컨테이너로표현한. 

macOS에서는 딱구분지게나타남 ( 자세히보면 가운데선그어져있ㅇ므 )