Save 37% off PRO during our Black Friday Sale! »

SwiftUIで作る開閉式メニュー

53e2d354b3299d64a54af680865516d5?s=47 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

53e2d354b3299d64a54af680865516d5?s=128

Sato Takeshi

December 22, 2020
Tweet

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