Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

完成品

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

開発する上で参考したサイト達 最後に 特徴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

Slide 13

Slide 13 text

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