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