Slide 1
Slide 1 text
SwiftUIで作る
開閉式メニュー
2020 年 12 月 22 日
佐藤タケシ
[Online] potatotips #72 iOS/Android開発Tips共有会
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
● SwiftUIを始める最適な一冊
● SwiftUIの基礎を徹底解説
○ レイアウトシステム
○ 座標空間
○ データ管理
○ UIコンポーネント
● 実践的なサンプルアプリ
○ GitHub API
○ お絵かきアプリ
○ 写真フィルターアプリ
● iOS 14対応
○ LazyVStack、LazyVGrid、
WidgetKit、@StateObjectなど
「SwiftUI開発レシピ amazon」で検
索！
Slide 4
Slide 4 text
豊富なサンプル
アプリ
● GitHubリポジトリー検索
● お絵かきアプリ
● 写真フィルターアプリ
● TodoアプリをWidget対応
「SwiftUI開発レシピ amazon」で検
索！
Slide 5
Slide 5 text
SwiftUIで作る
開閉式メニュー
Slide 6
Slide 6 text
下からにゅっと出るメニューを作ろう
Slide 7
Slide 7 text
Take 1
Slide 8
Slide 8 text
アニメーション
子View
親View
Slide 9
Slide 9 text
アニメーション
子View
親View
値更新時にwithAnimation
で囲う
Slide 10
Slide 10 text
アニメーション
子View
offsetでviewを移動させる
300は仮の数字
（後で直す）
Slide 11
Slide 11 text
take 1 Safe Areaの隙間が気になりますね
Slide 12
Slide 12 text
Take 2
Slide 13
Slide 13 text
単純にignoresSafeAreaで無視してみると？
Slide 14
Slide 14 text
ボタンがSafe Area外に表示されていてだめですね♂
Slide 15
Slide 15 text
Take 3
Slide 16
Slide 16 text
SafeArea外には背景を置く
子View
Slide 17
Slide 17 text
SafeArea外には背景を置く
子View
背景コンテンツを
Rectangleでつくる
Slide 18
Slide 18 text
SafeArea外には背景を置く
子View
iOS 14.2だと子Viewの
geometryが0になったの
で、親Viewからもらう
Slide 19
Slide 19 text
SafeArea外には背景を置く
子View
子ViewのViewサイズで
移動させる
Slide 20
Slide 20 text
SafeArea外には背景を置く
親View
geometry.safeAreaInset
sを子Viewに渡す
Slide 21
Slide 21 text
SafeArea外には背景を置く
親View
親ViewからSafeAreaを
bottomだけ無視させる
Slide 22
Slide 22 text
Take 3 いい感じ。
Slide 23
Slide 23 text
まとめ
● データ変更をwithAnimationで囲めばアニメーションする
● GeometryReaderでsafeAreaInsetsを使って背景コンテン
ツを作成する
Slide 24
Slide 24 text
Sample Code
● https://gist.github.com/SatoTakeshiX/4c0aed5430f2
a272d33ebcfd8192b5d6