【公開用】What’s update in SwiftUI for iOS 14

CA.swift #12 WWDC20報告会
https://cyberagent.connpass.com/event/177267/
で発表した資料です。
Apple Beta Software のスクリーンショットは差し替えています。

サンプルコード
・https://github.com/SatoTakeshiX/swiftui-ios14-updates

SwiftUI実践入門
・https://booth.pm/ja/items/1579464

SwiftUI開発レシピ
・https://booth.pm/ja/items/1920812

SwiftUI life-cycle iOS14 Where to put AppDelegate code?
・https://stackoverflow.com/questions/62538110/swiftui-life-cycle-ios14-where-to-put-appdelegate-code

【WWDC20】What’s new in SwiftUI
・https://developer.apple.com/wwdc20/10041

【WWDC20】App essentials in SwiftUI
・https://developer.apple.com/wwdc20/10037

【WWDC20】Introduction to SwiftUI
・https://developer.apple.com/videos/play/wwdc2020/10119/

【WWDC20】Stacks, Grids, and Outlines in SwiftUI
・https://developer.apple.com/videos/play/wwdc2020/10031/

【WWDC20】Design for iPad
・https://developer.apple.com/videos/play/wwdc2020/10206/

App Structure and Behavior
・https://developer.apple.com/documentation/swiftui/windowgroup

OutlineGroup
・https://developer.apple.com/documentation/swiftui/outlinegroup

Transcript

1. What’s update in SwiftUI for iOS 14 2020 年 7 月 1 日 佐藤タケシ CA.swift #12 WWDC20報告会
2. Who am I • Name • 佐藤タケシ(さとうたけし) • Company • Merpay, Inc.(2019/01 ~) • Role • Software Engineer (iOS) • Account • Twitter: @hatakenokakashi • Facebook: 佐藤剛士 • GitHub: SatoTakeshiX
3. WWDC 20 ここにテキストを挿入 ここにテキストを挿入 ここにテキストを挿入 ここにテキストを挿入 ここにテキストを挿入。
4. SwiftUIの特徴
5. SwiftUIの進化 iOS 13 iOS 14
6. 目次 バグ修正 • TabBarと NavigationViewの Viewスタック問題 • NavigationViewの iPad縦向きでの Padding問題 ◦ Sidebars in iPad App, Scene, WindowGroup ついにSwiftUIのみでアプリ が作れるように！ • App • Scene • WindowGroup New UI Components • LazyVStack,LazyHSt ack • LazyVGrid,LazyHGri d • OutlineGroup
7. バグ修正
8. TabBarとNavigationViewのViewスタック問題 • NavigationViewをTabBarに組み込んだ状態でNavigationViewをPush遷移した場 合に起きる現象 • iOS 13では他のタブを選択してPushした画面タブに戻るとNavigationViewのView スタックがもとに戻ってしまう • iOS 14ではタブ移動してもNavigationViewのViewスタックが保持されるようになっ た
9. TabBarとNavigationViewのViewスタック問題 TabViewにViewを ２つ入れる ListViewには NavigationViewがある
10. TabBarとNavigationViewのViewスタック問題 TabViewにViewを ２つ入れる ListViewには NavigationViewがある
11. iOS13 iOS14
12. NavigationViewのiPad縦向きでのPadding問題 • iOS 13ではNavigationViewに複数のViewをネストさせた状態でPaddingを追加す るとiPadの縦向きでSplit Viewが表示される現象があった • iOS 14ではPaddingを入れても入れなくても最初のViewがスライドするようなUIに なった
13. NavigationViewのiPad縦向きでのPadding問題
14. iOS13 iOS14
15. Sidebars in iPad
16. Sidebars in iPad • iOS 14からiPadのRegularサイズではTabBarではなくSidebarが推奨される • iOS 13までは２カラムのSidebarだったが、iOS 14からは3カラムまで表示できるよう になった • compactサイズ（SplitView表示やiPhoneでの表示）ではTab barを使うこと • SidebarとTab barを組み合わせてはいけない • サイドバーの項目はView階層のトップのナビゲーションをする • ユーザーにとって重要なコンテンツを表示 • 編集モードに対応させる • ドロップ&ドラッグに対応させる
17. 3 column Sidebars in iPad
19. App, Scene, WindowGroup
20. App by 100% pure SwiftUI
21. App by 100% pure SwiftUI @main Swift 5.3から導入。プログラムが最初に起動する処 理を属性として定義できる。 @main属性をつけた型に はmain()という型メソッドの実装が必要。
22. App by 100% pure SwiftUI App アプリケーションを表現するプロトコル。 main()という型メソッドがデフォルト実装されている。
23. App by 100% pure SwiftUI Scene ユーザーに表示する View階層のコンテナ。 UIWindowSceneDelegateのSwiftUI版。 プラットフォームによって動作に違いがある。 iPadOS, macOSでは同じアプリ複数のウィンドウを作 成、削除が可能。 iOSではSceneが画面全体をおおうようになる。
24. App by 100% pure SwiftUI WindowGroup 同じ構造のウィンドウのグループを提示するシーン。 もっともよく使うScene。 SwiftUIによってウィンドウの挙動はプラットフォームそ れぞれ特有の動作を行う。 iPadOS, macOSでは同時に複数のウィンドウを表示で きる。macOSではタブで複数のウィンドウをまとめるこ ともできる。
25. iPadでマルチウィンドウ macOSでマルチウィンドウ ⌘+Nで作成
26. App by 100% pure SwiftUI ContentView シーンに表示するViewをWindowGroupに配置する。 独自のViewを配置する。
27. App, Scene, WindowGroup Tips
28. アプリの起動を検知するには • まずAppDelegateを実装する。既存実装でかまわない。
29. アプリの起動を検知するには • UIApplicationDelegateAdaptorのProperty Wrapperを使う
30. アプリがバックグラウンドにいるかを確認する • EnvironmentのProperty Wrapperの scenePhaseキーパスを利用する • onChangeメソッドで新しい scenePhaseを取得する • 実際動かしてみたが、 UIApplication.Stateと同じものかは 未確認。アプリ起動後ホームボタンを 押してもbackgroundイベントが呼ば れなかった。
31. New UI Components
32. LazyVStack, LazyHStack
33. LazyVStack, LazyHStack ↓ SwiftUIでReuseの概念ができた！
34. 今まで：VStack, HStackの挙動 • 画面に収まりきれないぐらいViewを作るとメモリの無駄になる。 • UITableView, UICollectionViewのReuseの概念がない。
35. 今まで：VStack, HStackの挙動 • 画面に収まりきれないぐらいViewを作るとメモリの無駄になる。 • UITableView, UICollectionViewのReuseの概念がない。 VStackで100個の Imageを作成すると？？
36. 今まで：VStack, HStackの挙動 • 画面に収まりきれないぐらいViewを作るとメモリの無駄になる。 • UITableView, UICollectionViewのReuseの概念がない。 画面上は２個しか 画像が表示されてない
37. • 画面に収まりきれないぐらいViewを作るとメモリの無駄になる。 • UITableView, UICollectionViewのReuseの概念がない。 今まで：VStack, HStackの挙動 Debug View Hierarchy Imageが100個生成されて いる！！ -> メモリの無駄
38. LazyVStack, LazyHStack登場 • 画面外のViewは生成しない • 垂直方向はLazyVStack, 水平方向はLazyHStack
39. LazyVStack, LazyHStack登場 • 画面外のViewは生成しない • 垂直方向はLazyVStack, 水平方向はLazyHStack LazyVStackで100個の Imageを作成すると？？
40. • 画面外のViewは生成しない • 垂直方向はLazyVStack, 水平方向はLazyHStack LazyVStack, LazyHStack登場 画面に表示されている ２個のImageしか 生成しない！
41. UITableView, UICollectionViewとは 異なりDataSourceDelegateの実装や ReuserIdentifierの登録は不要
43. LazyVGrid, LazyHGrid
44. LazyVGrid, LazyHGrid ↓ 念願のCollectionViewがSwiftUIに！
45. LazyVGrid, LazyHGrid • グリッド表示をするUI Component • LazyVGridが垂直方向、LazyHGridが水平方向にグリッドする • GridItem配列をcolums引数に渡してレイアウトする
46. LazyVGrid, LazyHGrid • グリッド表示をするUI Component • LazyVGridが垂直方向、LazyHGridが水平方向にグリッドする • GridItem配列をcolums引数に渡してレイアウトする GridItemの配列を作る
47. LazyVGrid, LazyHGrid • グリッド表示をするUI Component • LazyVGridが垂直方向、LazyHGridが水平方向にグリッドする • GridItem配列をcolums引数に渡してレイアウトする LazyVGridのイニシャライ ザーにcolumsを渡す
48. LazyVGrid, LazyHGrid • グリッド表示をするUI Component • LazyVGridが垂直方向、LazyHGridが水平方向にグリッドする • GridItem配列をcolums引数に渡してレイアウトする グリッド表示で レイアウトされた！
49. LazyVGrid, LazyHGrid • グリッド表示をするUI Component • LazyVGridが垂直方向、LazyHGridが水平方向にグリッドする • GridItem配列をcolums引数に渡してレイアウトする Debug View Hierarchy にも画面表示された Imageしか作成されていな い！
50. GridItemのその他のレイアウト方法 • GridItem.Sizeをイニシャライザに渡すことでセルのレイアウトを決定 • .adaptive(minimum: 100): セルの最小値が100になるようレイアウト minimum:100で セルのサイズを 最小100にする
51. GridItemのその他のレイアウト方法 • GridItem.Sizeをイニシャライザに渡すことでセルのレイアウトを決定 • .adaptive(minimum: 100): セルの最小値が100になるようレイアウト こんなセルになる
52. OutlineGroup
53. OutlineGroup ↓ ListViewで折りたたみUI
54. OutlineGroup • ツリー構造のデータを折りたたみUIで表示非表示できるUI • ツリー構造のデータ: 自身の型をプロパティに持つ型 WWDCItemは 自身の型の配列を childrenプロパティで 保持する
55. OutlineGroup OutlineGroupの children引数に keypathを渡す
56. OutlineGroup 折りたたみUIが 実現できる！
57. まとめ • iOS 13での不具合が直ってより使えるようになった！ • iPadOSではSidebarが重要になった！ • App, Scene, WindowGroupでSwiftUIだけでアプリが作れるようになった！ • 新しいコンポーネントもたくさん追加された！
58. まとめ • iOS 13での不具合が直ってより使えるようになった！ • iPadOSではSidebarが重要になった！ • App, Scene, WindowGroupでSwiftUIだけでアプリが作れるようになった！ • 新しいコンポーネントもたくさん追加された！ SwiftUIを始める絶好の機会！
59. Sample Code • https://github.com/SatoTakeshiX/swiftui-ios14-updates
60. 【宣伝】SwiftUI本 BOOTHにて発売中 SwiftUIの概要が分かる https://booth.pm/ja/items/1579464 SwiftUIでCombine+MVVMのアプリ開発を解説 https://booth.pm/ja/items/1920812
61. 参考資料 • SwiftUI life-cycle iOS14 Where to put AppDelegate code? • 【WWDC20】What’s new in SwiftUI • 【WWDC20】App essentials in SwiftUI • 【WWDC20】Introduction to SwiftUI • 【WWDC20】Stacks, Grids, and Outlines in SwiftUI • 【WWDC20】Design for iPad • App Structure and Behavior • OutlineGroup