Slide 24
Slide 24 text
スクロールに連動した日付選択タブの動きを作る(3)
画面全体構造における基本方針は「ZStack & ScrollView & LazyVStack」の構成
全体を構成するTimetableView.swiftにおけるScrollViewのOffset値と関連するAnimation処理の抜粋：
ZStack(alignment: .topLeading) {
ZStack(alignment: .top) { // ※ …（画面上部に固定表示される要素を記述）… }
ScrollViewWithVerticalOffset(
onOffsetChange: { offset in
shouldCollapse = offset < verticalOffsetThreshold
},
content: {
Spacer().frame(height: 130)
LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
Section(
header: TimetableDayHeader(
selectedDay: viewModel.state.selectedDay,
shouldCollapse: shouldCollapse,
onSelect: { [weak viewModel] in
viewModel?.selectDay(day: $0)
}
)
.frame(height: shouldCollapse ? 53 : 82)
.animation(.easeInOut(duration: 0.08), value: shouldCollapse)
) { // ※ …（一覧表示要素を記述）… }
}
// Determines whether or not to collapse.
private let verticalOffsetThreshold = -142.0
// When offset value is exceed the threshold, TimetableDayHeader collapse with animation.
@State private var shouldCollapse = false
TimetableHeader.swiftの動き
15 16
Day2 Day3
14
Day1
Day2 Day3
Day1
Collapse or Expand
① 取得したOffset値がしきい値を超えたかどうかを見る
② shouldCollapse値の変化でAnimation発火