Wednesday, September 28, 2022
HomeiOS Developmentios - How do I add a vertical swipe up gesture(to go...

ios – How do I add a vertical swipe up gesture(to go to a different view) in a scrollview in SwiftUI

[ad_1]

I designed a SwiftUI view which is a scrollview. Now I need to add a vertical swipe gesture to it which shall take it to a different view. I tried to do it using the tabView and adding a rotating effect of -90 degrees to it. But that rotates my original view too and that’s not what I want. I couldn’t find any relevant help in SwiftUI which deals with swiping up a scrollview to a new view.
Here’s my code..

the vertical swipe I achieved using this. But my view get rotated. Setting other angles disappears the view somehow. I am new to SwiftUI, I am stuck on it for a week now.1

GeometryReader { proxy in
        TabView {
            ScrollView {
                VStack(alignment: .center) {
                    ZStack(alignment: .leading) {
                        Image("Asset 13").resizable().frame(width: percentWidth(percentage: 100), height: percentHeight(percentage: 50), alignment: .top)
                        HStack {
                            Spacer()
                            Image("Asset 1")//.padding(.bottom, 130)
                            Spacer()
                        }.padding(.bottom, 150)
                        
                        HStack {
                            VStack(spacing:2) {
                                Text("followers").foregroundColor(.white).padding(.leading, 20)
                                HStack {
                                    Image("Asset 3")
                                    Text("10.5k").foregroundColor(.white)
                                }
                            }
                            Spacer()
                            VStack {
                                Image("Asset 10").padding(.trailing)
                                Text("300K Review ").foregroundColor(.white)
                            }
                            
                        }.background(Image("Asset 2").resizable().frame(width: percentWidth(percentage: 100), height: percentHeight(percentage: 6), alignment: .leading))
                            .padding(.top, 410)
                        HStack {
                            Spacer()
                            Image("Asset 14").resizable().frame(width: percentWidth(percentage: 50), height: percentHeight(percentage: 25), alignment: .center)
                            Spacer()
                        }.padding(.top, 390)
                        
                        
                    }
                    VStack(spacing: 4) {
                        Text("Karuna Ahuja | Yoga Instructor").font(Font.custom(FontName.bold, size: 22))
                        Text("12 Years of Experience with Bhartiya Yog Sansthan").tracking(-1).font(Font.custom(FontName.light, size: 16)).opacity(0.4)
                    }
                    Divider()
                    HStack {
                        ZStack {
                            Image("Asset 6").resizable().frame(width: percentWidth(percentage: 30), height: percentHeight(percentage: 12), alignment: .center)
                            VStack {
                                Image("Asset 5").resizable().frame(width: percentWidth(percentage: 8), height: percentHeight(percentage: 4), alignment: .center)
                                Text("245").font(Font.custom(FontName.bold, size: 16))
                                Text("Video").font(Font.custom(FontName.medium, size: 16)).opacity(0.5)
                            }
                        }
                        
                        ZStack {
                            Image("Asset 6").resizable().frame(width: percentWidth(percentage: 30), height: percentHeight(percentage: 12), alignment: .center)
                            VStack {
                                Image("Asset 7").resizable().frame(width: percentWidth(percentage: 8), height: percentHeight(percentage: 4), alignment: .center)
                                Text("45").font(Font.custom(FontName.bold, size: 16))
                                Text("Live Class").font(Font.custom(FontName.medium, size: 16)).opacity(0.5)
                            }
                        }
                        
                        ZStack {
                            Image("Asset 6").resizable().frame(width: percentWidth(percentage: 30), height: percentHeight(percentage: 12), alignment: .center)
                            VStack {
                                Image("Asset 9").resizable().frame(width: percentWidth(percentage: 8), height: percentHeight(percentage: 4), alignment: .center)
                                Text("245").font(Font.custom(FontName.bold, size: 16))
                                Text("Sessions").font(Font.custom(FontName.medium, size: 16)).opacity(0.5)
                            }
                        }
                    }
                    Divider()
                    Text("Shine bright so that your light leads other. I'm a fitness junkie, high-energy yoga instructor. Let's make fitness FUN!").font(Font.custom(FontName.normal, size: 16)).tracking(-1).opacity(0.7).padding([.leading,.trailing], 6)
                    VideoPlayer(player: AVPlayer(url: videoUrl))
                        .frame(height: 320)
                    
                    Spacer()
                }.gesture(DragGesture(minimumDistance: 20, coordinateSpace: .global)
                    .onEnded { value in
                        let horizontalAmount = value.translation.width as CGFloat
                        let verticalAmount = value.translation.height as CGFloat
                        
                        if abs(horizontalAmount) > abs(verticalAmount) {
                            print(horizontalAmount < 0 ? "left swipe" : "right swipe")
                        } else {
                            print(verticalAmount < 0 ? "up swipe" : "down swipe")
                        }
                    })
            }.edgesIgnoringSafeArea(.all)
                .ignoresSafeArea()
            Text("this")
            Text("this")
            Text("this")
            
            //                ForEach(colors, id: \.self) { color in
            //                    color // Your cell content
            //                }
            //                .rotationEffect(.degrees(-90)) // Rotate content
            //                .frame(
            //                    width: proxy.size.width,
            //                    height: proxy.size.height
            //                )
        }
        .frame(
            width: proxy.size.height, // Height & width swap
            height: proxy.size.width
        )
        .rotationEffect(.degrees(90), anchor: .topLeading) // Rotate TabView
        .offset(x: proxy.size.width) // Offset back into screens bounds
        .tabViewStyle(
            PageTabViewStyle(indexDisplayMode: .never)
        )
    }

[ad_2]

Source link

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments