uhooiさん発ランダムタスクにチャレンジしよう！

集まれSwift好き！Swift愛好会 vol.80 @ DeNA
https://love-swift.connpass.com/event/311304/

Transcript

1. uhooiさん発ランダムタスクに チャレンジしよう！ 野瀬田 裕樹
2. 野瀬田 裕樹（@ynoseda） DMM.com アプリ開発室所属
3. uhooiさん • uhooiさんのことはみんな知ってる前提なので話しません • たまにuhooiさんのXからランダムにアプリ開発のお題が流れてくることがあり ます • 今日はたまたま目についたそれをやった話
4. お題1：ScrollViewの背景色を良い感じにしたい！
5. やりたいこと • ScrollViewで引っ張ったとき、コンテンツ領域の外ではScrollView自体の backgroundが見える • このbackgroundの色をコンテンツの色と同じにしたい • 上から下に引っ張ったときは、コンテンツの上の方の色と同じにしたい • 逆の場合はコンテンツの下の方の色と同じにしたい
6. お題1の解答編
7. お題1の解答編 - 概要 • コンテンツのy座標に連動するpositionを保持する • ScrollViewの背景色で、このpositionより上の領域はコンテンツの上の方の色 にする • 逆に下の方の領域はコンテンツの下の方の色にする
8. お題1の解答編 - コンテンツのy座標に連動させる private struct ScrollContentViewMinYPreferenceKey: PreferenceKey { static var defaultValue: [CGFloat] = [0] static func reduce(value: inout [CGFloat], nextValue: () -> [CGFloat]) { value.append(contentsOf: nextValue()) } }
9. お題1の解答編 - コンテンツのy座標に連動させる ScrollView { content().overlay { GeometryReader { proxy in Color.clear.preference( key: ScrollContentViewMinYPreferenceKey.self, value: [proxy.frame(in: .global).minY] ) } } }.onPreferenceChange(ScrollContentViewMinYPreferenceKey.self) { value in scrollContentViewMinY = value[0] }
10. お題1の解答編 - 連動したpositionより上だけ色を変更 .background { VStack(spacing: 0) { topBackgroundColor.frame(height: max(scrollContentViewMinY, 0)) bottomBackgroundColor.frame(height: scrollViewHeight - scrollContentViewMinY) }.ignoresSafeArea() }.overlay { GeometryReader { proxy in Color.clear.onAppear { scrollViewHeight = proxy.frame(in: .global).height } }.ignoresSafeArea() }
11. お題1の解答編 - 結果 • これで良い感じになった！ • https://x.com/ynoseda/status/1737120393960558947?s=20 • 補足 ◦ 別に基準値はminYじゃなくてもmaxYでもなんでもいいです ▪ コンテンツの裏のどこかのpositionで切り替わればいいので
12. お題2：スクロールの境目でボタンの色を変えたい！
13. やりたいこと • ScrollViewでスクロールしたとき、ナビゲーションバーが透明だとボタンとコン テンツの色が重なって見辛くなることがある • Appleの公式のアプリだと背景色に合わせてボタンの色が良い感じに変化して いる • これを実現したい
14. お題2の解答編
15. お題2の解答編 - 概要 • スクロールするごとに今のwindow(UIView)からUIImageに変換する • このとき、ボタンのframeを使ってボタン部分のみを切り出す • 切り出すときにボタンの形状にあたる丸を書いてその外側だけ書き出すよう にする • ボタンの周りのUIImageが得られるのでそれが明るいか判定する
16. お題2の解答編 - コード • https://gist.github.com/yuukiw00w/0972b4fd33a08fe774228ebaa592558e • 実装は↑にあるが、汚すぎるので参考までに • https://x.com/ynoseda/status/1741515297054744844?s=20 • 補足 ◦ パフォーマンス低そうな気がするので実運用に耐えられるかは微妙 ◦ 階層は違うけど裏にいるViewの色を判定するAPIとか欲しい
17. まとめ • たまに時間あったらこういうお題にチャレンジしても面白いよね • みんなも自分なりの回答をポストしてみよう！