SwiftUIで作る開閉式メニュー

[Online] potatotips #72 iOS/Android開発Tips共有会
https://potatotips.connpass.com/event/194575/

発表発表資料

サンプルコード
https://gist.github.com/SatoTakeshiX/4c0aed5430f2a272d33ebcfd8192b5d6

1人でアプリを作る人を支えるSwiftUI開発レシピ
https://nextpublishing.jp/book/12491.html

Transcript

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