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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 単純にignoresSafeAreaで無視してみると?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Take 3 いい感じ。

    View full-size slide

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

    View full-size slide

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

    View full-size slide