PayPayのようなおしゃれな TabBarを作る！ 上條 栞汰 ~ in SwiftUI ~

⾃⼰紹介 l 上條栞汰(かみじょうかんた) l 東洋⼤学総合情報学部2年 l Swift歴 1年(あと3週間ぐらい!!) l UIKit 11ヶ⽉ l SwiftUI １ヶ⽉ 経歴(インターン) l 株式会社ゆめみ l 株式会社サイバーエージェント CA Tech iOS Dojo @kanta_Swift @KantaSwift よろしければフォローお願い致します🙇

PayPayのTabBar 1. 浮いてるように⾒えるデザイン! 2. View(スクロール)と連携している! 3. 膨らんでいる部分がある！ <特徴>

3つの特徴を押さえて 実際に作ってみる！！

完成品

冒頭で挙げた特徴を どのように実現していったか 簡単に紹介します！

特徴1. 浮いているように⾒えるデザイン overlayを使⽤! 👈のようなモデルを定義！！ -> タブの個数を任意にすることができる！ タブとViewを対応させることができる！ -> 浮いているように⾒せることができる！

特徴2. スクロールと連携 GeometryReader + PreferenceKey 👇 ScrollViewのOffsetを 取得することができる！ [参考] https://medium.com/@maxnatchanon/sw iftui-how-to-get-content-offset-from- scrollview-5ce1f84603ec 外国の⽅の記事が ⼀番わかりやすかったです！！ 👆

特徴3. 膨らみの再現 addLine(to: CGPoint) 現在の位置から引数（to）で指定した位置まで move(to: CGPoint) pathの始点 などなど... いろいろ試してみると楽しい👍 👇 👇

以上3つの特徴を押さえた技術分野をまとめると... • PreferenceKey -> ⼦ビューから親ビューにデータを渡す仕組み • GeometryReader -> ⾃⾝の親のViewに対する位置を知る仕組み • ShapeとPath -> いろんな形の図形を作ることができる！！

おまけ @resultBuilderについて 配列なのにカンマとシンタックスがない！？ 1. 要素の組み合わせを宣⾔的にかける！ 2. 可読性が上がってる？かも！

開発する上で参考したサイト達 最後に 特徴1. 浮いているように⾒えるデザイン+おまけ • https://capibara1969.com/2723/ • https://capibara1969.com/2771/ 特徴2. スクロールと連携 特徴3. 膨らみの表現 • https://medium.com/@maxnatchanon/swiftui-how-to-get-content-offset-from-scrollview-5ce1f84603ec • https://qiita.com/hcrane/items/3f3a9ff2ef0fccd01338 • https://qiita.com/maiyama18/items/a64bab2094750319ef8d • https://speakerdeck.com/chocoyama/20fen-dewakaru-su-xi-resultbuilder-iosdc-2022 • https://speakerdeck.com/uhooi/iosdc-japan-2022

ご清聴ありがとうございました！ ※近⽇(今⽉中!)に今回開発したTabViewのコードを公開するので 気になる⽅いらっしゃいましたらフォローお願いします🙇 @KantaSwift