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共有会
   

   View Slide

2. Who am I
   ● Name
   ● 佐藤タケシ(さとうたけし)
   ● Company
   ● Merpay, Inc.(2019/01 ~)
   ● Role
   ● Software Engineer (iOS)
   ● Account
   ● Twitter: @hatakenokakashi
   ● Facebook: 佐藤剛士
   ● GitHub: SatoTakeshiX
   

   View Slide

3. ● SwiftUIを始める最適な一冊
   ● SwiftUIの基礎を徹底解説
   ○ レイアウトシステム
   ○ 座標空間
   ○ データ管理
   ○ UIコンポーネント
   ● 実践的なサンプルアプリ
   ○ GitHub API
   ○ お絵かきアプリ
   ○ 写真フィルターアプリ
   ● iOS 14対応
   ○ LazyVStack、LazyVGrid、
   WidgetKit、@StateObjectなど
   「SwiftUI開発レシピ amazon」で検
   索！
   

   View Slide

4. 豊富なサンプル
   アプリ
   ● GitHubリポジトリー検索
   ● お絵かきアプリ
   ● 写真フィルターアプリ
   ● TodoアプリをWidget対応
   「SwiftUI開発レシピ amazon」で検
   索！
   

   View Slide

5. SwiftUIで作る
   開閉式メニュー
   

   View Slide

6. 下からにゅっと出るメニューを作ろう
   

   View Slide

7. Take 1
   

   View Slide

8. アニメーション
   子View
   親View
   

   View Slide

9. アニメーション
   子View
   親View
   値更新時にwithAnimation
   で囲う
   

   View Slide

10. アニメーション
    子View
    offsetでviewを移動させる
    300は仮の数字
    （後で直す）
    

    View Slide

11. take 1 Safe Areaの隙間が気になりますね
    

    View Slide

12. Take 2
    

    View Slide

13. 単純にignoresSafeAreaで無視してみると？
    

    View Slide

14. ボタンがSafe Area外に表示されていてだめですね‍♂
    

    View Slide

15. Take 3
    

    View Slide

16. SafeArea外には背景を置く
    子View
    

    View Slide

17. SafeArea外には背景を置く
    子View
    背景コンテンツを
    Rectangleでつくる
    

    View Slide

18. SafeArea外には背景を置く
    子View
    iOS 14.2だと子Viewの
    geometryが0になったの
    で、親Viewからもらう
    

    View Slide

19. SafeArea外には背景を置く
    子View
    子ViewのViewサイズで
    移動させる
    

    View Slide

20. SafeArea外には背景を置く
    親View
    geometry.safeAreaInset
    sを子Viewに渡す
    

    View Slide

21. SafeArea外には背景を置く
    親View
    親ViewからSafeAreaを
    bottomだけ無視させる
    

    View Slide

22. Take 3 いい感じ。
    

    View Slide

23. まとめ
    ● データ変更をwithAnimationで囲めばアニメーションする
    ● GeometryReaderでsafeAreaInsetsを使って背景コンテン
    ツを作成する
    

    View Slide

24. Sample Code
    ● https://gist.github.com/SatoTakeshiX/4c0aed5430f2
    a272d33ebcfd8192b5d6
    

    View Slide