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

【公開用】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

53e2d354b3299d64a54af680865516d5?s=128

Sato Takeshi

July 01, 2020
Tweet

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を 2つ入れる ListViewには NavigationViewがある

  10. TabBarとNavigationViewのViewスタック問題 TabViewにViewを 2つ入れる 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までは2カラムのSidebarだったが、iOS 14からは3カラムまで表示できるよう

    になった • compactサイズ(SplitView表示やiPhoneでの表示)ではTab barを使うこと • SidebarとTab barを組み合わせてはいけない • サイドバーの項目はView階層のトップのナビゲーションをする • ユーザーにとって重要なコンテンツを表示 • 編集モードに対応させる • ドロップ&ドラッグに対応させる
  17. 3 column Sidebars in iPad

  18. None
  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の概念がない。 画面上は2個しか 画像が表示されてない

  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登場 画面に表示されている 2個のImageしか 生成しない!

  41. UITableView, UICollectionViewとは 異なりDataSourceDelegateの実装や ReuserIdentifierの登録は不要

  42. None
  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