Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SwiftUIで作る開閉式メニュー

Sato Takeshi
December 22, 2020

 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

Sato Takeshi

December 22, 2020
Tweet

More Decks by Sato Takeshi

Other Decks in Technology

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