SwiftUIで二重スクロール作ってみた / When I tried to make a dual-scroll-ish view in SwiftUI

Transcript

1. 4XJGU6*
   Ͱ
   ೋॏεΫϩʔϧ࡞ͬͯΈͨ f o r
   Ϟ ό ν Ω
   ʙ .PC JMF
   5J Q T
   ڞ ༗ ձ ʙ
    
2. } var employedBy = "YUMEMI Inc." var job = "iOS Tech Lead" var favoriteLanguage = "Swift" var twitter = "@lovee" var qiita = "lovee" var github = "el-hoshino" var additionalInfo = """ ٱʑͷొஃ͗ͯ͢Կ΋͔΋๨ΕͯΔʂ """ final class Me: Developable, Talkable {
4. *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    εΫϩʔϧͷॳظҐஔΛ
   ը૾ͷԼʹ
5. *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    εΫϩʔϧͯ͠΋
   ը૾ͷҐஔ͸มΘΒͳ͍ ԼʹεΫϩʔϧʹͭΕͯ
   എܠͷෆಁ໌౓্͕͕Δ
6. *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    ԼʹΦʔόʔεΫϩʔϧ͚ͨ࣌ͩ͠
   ը૾΋ҰॹʹԼ͕Γ·͢ ϦϑϨογϡϓϩάϨε΋
   දࣔ͠·͢
7. *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    എܠࣗମ͸ৗʹෆಈ
8. *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    0, ϋ΢εϘλϯ͕λοϓ͞Ε·ͨ͠ ࣮͸ͨͩͷը૾Ͱ͸ͳ͘
   ϘλϯͰͨ͠ʂ
9. *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    *UFN
    എܠ ϝΠϯϘλϯ εΫϩʔϧϏϡʔ
10. struct BackgroundView: View { var body: some View { LinearGradient( colors: [ .mint.opacity(0.5), .cyan, ], startPoint: .top, endPoint: .center ) .ignoresSafeArea() } }
11. struct PrimaryView: View { var body: some View { VStack { Button { } label: { Image(systemName: "house.lodge.fill") .resizable() .scaledToFit() } } .frame(maxHeight: .infinity, alignment: .top) } }
12. struct PrimaryView: View { @State private var showsDialog = false var body: some View { VStack { Button { showsDialog = true } label: { Image(systemName: "house.lodge.fill") .resizable() .scaledToFit() } } .frame(maxHeight: .infinity, alignment: .top) .confirmationDialog("Message", isPresented: $showsDialog, actions: { Text("OK") }, message: { Text("ϋ΢εϘλϯ͕λοϓ͞Ε·ͨ͠") }) } } 0, ϋ΢εϘλϯ͕λοϓ͞Ε·ͨ͠
13. *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     struct OperationScrollView: View { var body: some View { ScrollView { LazyVGrid(columns: [GridItem(.flexible(minimum: 150, maximum: 300)), GridItem(.flexible(minimum: 150, maximum: 300))], content: { ForEach(0 ..< 20) { i in Text("Item: \(i)") .frame(maxWidth: .infinity) .frame(height: 100) .background(Color.blue) } }) .padding(.horizontal) } .background(Color.black.opacity(0.8)) } }
14. *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     struct OperationScrollView: View { var topPadding: CGFloat var body: some View { ScrollView { LazyVGrid(columns: [GridItem(.flexible(minimum: 150, maximum: 300)), GridItem(.flexible(minimum: 150, maximum: 300))], content: { ForEach(0 ..< 20) { i in Text("Item: \(i)") .frame(maxWidth: .infinity) .frame(height: 100) .background(Color.blue) } }) .padding(.horizontal) } .safeAreaPadding(.top, topPadding) .background(Color.black.opacity(0.8)) } }
15. *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     struct OperationScrollView: View { @State var componentsOffset: CGFloat var topPadding: CGFloat private var scrollViewOpacity: CGFloat { max(min((-componentsOffset-10) / topPadding, 0.8), 0) } var body: some View { ScrollView { LazyVGrid(columns: [GridItem(.flexible(minimum: 150, maximum: 300)), GridItem(.flexible(minimum: 150, maximum: 300))], content: { ForEach(0 ..< 20) { i in Text("Item: \(i)") .frame(maxWidth: .infinity) .frame(height: 100) .background(Color.blue) } }) .padding(.horizontal) } .safeAreaPadding(.top, topPadding) .background(Color.black.opacity(scrollViewOpacity )) } } ͯ͞໰୊͸
    ͜ͷ
    componentsOffset
    Λ
    Ͳ͏΍ͬͯऔΔ͔
16. public struct PositionReader: ViewModifier { struct PositionKey: PreferenceKey { static var defaultValue: CGFloat = 0 static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) { value += nextValue() } } var coordinateSpace: CoordinateSpace var position: KeyPath<CGRect, CGFloat> @Binding var value: CGFloat public func body(content: Content) -> some View { content .background( GeometryReader { geometry in Color.clear .preference(key: PositionKey.self, value: geometry.frame(in: coordinateSpace)[keyPath: position]) } ) .onPreferenceChange(PositionKey.self, perform: { newValue in value = newValue }) } } public extension View { func reading(_ keyPath: KeyPath<CGRect, CGFloat>, in coordinateSpace: CoordinateSpace, andAssignTo value: Binding<CGFloat>) -> some View { self.modifier(PositionReader(coordinateSpace: coordinateSpace, position: keyPath, value: value)) } }
17. *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     struct OperationScrollView: View { @State var componentsOffset: CGFloat var topPadding: CGFloat @Namespace private var scrollView: Namespace.ID private var scrollViewOpacity: CGFloat { max(min((-componentsOffset-10) / topPadding, 0.8), 0) } var body: some View { ScrollView { LazyVGrid(columns: [GridItem(.flexible(minimum: 150, maximum: 300)), GridItem(.flexible(minimum: 150, maximum: 300))], content: { ForEach(0 ..< 20) { i in Text("Item: \(i)") .frame(maxWidth: .infinity) .frame(height: 100) .background(Color.blue) } }) .padding(.horizontal) .reading(\.minY, in: .named(scrollView), andAssignTo: $componentsOffset) } .safeAreaPadding(.top, topPadding) .background(Color.black.opacity(scrollViewOpacity )) .coordinateSpace(.named(scrollView)) } }
18. *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     struct OperationScrollView: View { @State var componentsOffset: CGFloat var topPadding: CGFloat @Namespace private var scrollView: Namespace.ID private var scrollViewOpacity: CGFloat { max(min((-componentsOffset-10) / topPadding, 0.8), 0) } var body: some View { ScrollView { LazyVGrid(columns: [GridItem(.flexible(minimum: 150, maximum: 300)), GridItem(.flexible(minimum: 150, maximum: 300))], content: { ForEach(0 ..< 20) { i in Text("Item: \(i)") .frame(maxWidth: .infinity) .frame(height: 100) .background(Color.blue) } }) .padding(.horizontal) .reading(\.minY, in: .named(scrollView), andAssignTo: $componentsOffset) } .safeAreaPadding(.top, topPadding) .background(Color.black.opacity(scrollViewOpacity)) .coordinateSpace(.named(scrollView)) .refreshable { reload() } } }
19. *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     ԼʹΦʔόʔεΫϩʔϧ͚ͨ࣌ͩ͠
    ը૾΋ҰॹʹԼ͕Γ·͢
20. struct PrimaryView: View { var topSpacing: CGFloat @State private var showsDialog = false var body: some View { VStack { Spacer() .frame(height: max(0, topSpacing)) Button { showsDialog = true } label: { Image(systemName: "house.lodge.fill") .resizable() .scaledToFit() } } .frame(maxHeight: .infinity, alignment: .top) .confirmationDialog("Message", isPresented: $showsDialog, actions: { Text("OK") }, message: { Text("ϋ΢εϘλϯ͕λοϓ͞Ε·ͨ͠") }) } }
21. *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     εΫϩʔϧͷॳظҐஔΛ
    ը૾ͷԼʹ
22. *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     struct OperationScrollView: View { @State var componentsOffset: CGFloat var topPadding: CGFloat @Namespace private var scrollView: Namespace.ID private var scrollViewOpacity: CGFloat { max(min((-componentsOffset-10) / topPadding, 0.8), 0) } var body: some View { ScrollView { LazyVGrid(columns: [GridItem(.flexible(minimum: 150, maximum: 300)), GridItem(.flexible(minimum: 150, maximum: 300))], content: { ForEach(0 ..< 20) { i in Text("Item: \(i)") .frame(maxWidth: .infinity) .frame(height: 100) .background(Color.blue) } }) .padding(.horizontal) .reading(\.minY, in: .named(scrollView), andAssignTo: $componentsOffset) } .safeAreaPadding(.top, topPadding) .background(Color.black.opacity(scrollViewOpacity)) .coordinateSpace(.named(scrollView)) .refreshable { reload() } } } ͯ͞ࠓ౓ͷ໰୊͸
    ͜ͷ
    topPadding
    Λ
    Ͳ͏΍ͬͯऔΔ͔
23. struct PrimaryView: View { @Binding var baseImageHeight: CGFloat var topSpacing: CGFloat @State private var showsDialog = false var body: some View { VStack { Spacer() .frame(height: max(0, topSpacing)) Button { showsDialog = true } label: { Image(systemName: "house.lodge.fill") .resizable() .scaledToFit() } .reading(\.height, in: .local, andAssignTo: $baseImageHeight) } .frame(maxHeight: .infinity, alignment: .top) .confirmationDialog("Message", isPresented: $showsDialog, actions: { Text("OK") }, message: { Text("Did tap house button") }) } }
24. struct PrimaryView: View { @Binding var baseImageHeight: CGFloat var topSpacing: CGFloat @State private var showsDialog = false var body: some View { VStack { Spacer() .frame(height: max(0, topSpacing)) Button { showsDialog = true } label: { Image(systemName: "house.lodge.fill") .resizable() .scaledToFit() } .reading(\.height, in: .local, andAssignTo: $baseImageHeight) } .frame(maxHeight: .infinity, alignment: .top) .confirmationDialog("Message", isPresented: $showsDialog, actions: { Text("OK") }, message: { Text("Did tap house button") }) } }
25. *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     struct OperationScrollView: View { @Binding var componentsOffset: CGFloat var topPadding: CGFloat @Namespace private var scrollView: Namespace.ID private var scrollViewOpacity: CGFloat { max(min((-componentsOffset-10) / topPadding, 0.8), 0) } var body: some View { ScrollView { LazyVGrid(columns: [GridItem(.flexible(minimum: 150, maximum: 300)), GridItem(.flexible(minimum: 150, maximum: 300))], content: { ForEach(0 ..< 20) { i in Text("Item: \(i)") .frame(maxWidth: .infinity) .frame(height: 100) .background(Color.blue) } }) .padding(.horizontal) .reading(\.minY, in: .named(scrollView), andAssignTo: $componentsOffset) } .safeAreaPadding(.top, topPadding) .background(Color.black.opacity(scrollViewOpacity)) .coordinateSpace(.named(scrollView)) .refreshable { reload() } } }
26. struct BackgroundView: View { var body: some View { LinearGradient( colors: [ .mint.opacity(0.5), .cyan, ], startPoint: .top, endPoint: .center ) .ignoresSafeArea() } }
27. struct PrimaryView: View { @Binding var baseImageHeight: CGFloat var topSpacing: CGFloat @State private var showsDialog = false var body: some View { VStack { Spacer() .frame(height: max(0, topSpacing)) Button { showsDialog = true } label: { Image(systemName: "house.lodge.fill") .resizable() .scaledToFit() } .reading(\.height, in: .local, andAssignTo: $baseImageHeight) } .frame(maxHeight: .infinity, alignment: .top) .confirmationDialog("Message", isPresented: $showsDialog, actions: { Text("OK") }, message: { Text("Did tap house button") }) } }
28. *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     struct OperationScrollView: View { @Binding var componentsOffset: CGFloat var topPadding: CGFloat @Namespace private var scrollView: Namespace.ID private var scrollViewOpacity: CGFloat { max(min((-componentsOffset-10) / topPadding, 0.8), 0) } var body: some View { ScrollView { LazyVGrid(columns: [GridItem(.flexible(minimum: 150, maximum: 300)), GridItem(.flexible(minimum: 150, maximum: 300))], content: { ForEach(0 ..< 20) { i in Text("Item: \(i)") .frame(maxWidth: .infinity) .frame(height: 100) .background(Color.blue) } }) .padding(.horizontal) .reading(\.minY, in: .named(scrollView), andAssignTo: $componentsOffset) } .safeAreaPadding(.top, topPadding) .background(Color.black.opacity(scrollViewOpacity)) .coordinateSpace(.named(scrollView)) .refreshable { reload() } } }
29. *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     *UFN
     struct ContentView: View { @State private var baseImageHeight: CGFloat = 0 @State private var componentsOffset: CGFloat = 0 var body: some View { PrimaryView( baseImageHeight: $baseImageHeight, topSpacing: componentsOffset - baseImageHeight ) .overlay { OperationScrollView( componentsOffset: $componentsOffset, topPadding: baseImageHeight ) } .background { BackgroundView() } }
30. %FNP
31. ͜ͷ࣮૷ʹ͸ͪΐͬͱ໰୊΋͋Γ·͢! w ݱ࣌఺Ͱ͸
    SFGSFTIBCMF
    ʹ
    BTZOD
    ॲཧΛೖΕΒΕͳ͍
    w ಠࣗͰ
    3FGSFTI"DUJPO
    ʹରԠ͢Ε͹͍͍
    w IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPO TXJGUVJSFGSFTIBDUJPO
32. ͜ͷ࣮૷ʹ͸ͪΐͬͱ໰୊΋͋Γ·͢! w TBGF"SFB1BEEJOH
    ʹ΋ෆ౎߹͕͋Δ
    w άϧάϧͷҐஔ͕Լ͕͍ͬͯΔ
    w ্ʹεΫϩʔϧͨ͠ࡍ
    4BGF"SFB
    ൣғͰ͸εΫϩʔ ϧϏϡʔʹ͋ΔϘλϯ͕λοϓͰ͖ͳ͍
    w ୅ΘΓʹεΫϩʔϧϏϡʔͷҰ൪্ʹ
    4QBDFS
    ΛೖΕ Δํ๏΋ߟ͑ΒΕΔ
    w ͦͷ৔߹εΫϩʔϧϏϡʔͷԼͷ
    1SJNBSZ7JFX
    ͷ Ϙλϯ͕λοϓͰ͖ͳ͍
33. 4XJGU6*
    ໘౗ͤ͐͘
34. 4XJGU6*
    ໘౗ͤ͐͘
    ୭͔ॿ͚͍ͯͩ͘͞ʂ