Wednesday, June 10, 2026
HomeiOS Developmentios - Add left swipe gesture to point out aspect menu in...

ios – Add left swipe gesture to point out aspect menu in web page tab view swiftui

[ad_1]

I used to be attempting to observe a tutorial which applied a clear swipe gesture to point out a aspect menu making utilizing of a hstack, offset, and drag gesture much like how twitter at present has it arrange. Nonetheless, I wished to switch it in order that the tabs on the backside will be swiped like a web page tab view in swiftui however that breaks the swipe gesture in order that it would not set off the aspect menu when swiped left upon.

I used to be attempting to make it work in order that if I had been within the left most tab, the swipe gesture ought to nonetheless set off and present the aspect menu. Nonetheless, it isn’t working. I used to be in a position to get it to work to point out the aspect menu if the profile picture was clicked and the swipe to get out of the aspect menu nonetheless works, so I hoped somebody might level me as to how I might clear up this.

Right here is the code for the BaseView.swift


import SwiftUI

struct BaseView: View {
    @State var showMenu: Bool = false
    
    // Hiding Native One...
    init(){
        UITabBar.look().isHidden = true
    }
    
    @State var currentTab = "House"
    
    // Offset for Each Drag Gesuture and exhibiting Menu...
    @State var offset: CGFloat = 0
    @State var lastStoredOffset: CGFloat = 0
    
    // GEsture Offset...
    @GestureState var gestureOffset: CGFloat = 0
    @State var isSearching = false
    var physique: some View {
        
        let sideBarWidth = getRect().width - 90
        
        // Complete Navigation View....
        NavigationView{
            
            HStack(spacing: 0){
                
                // Aspect Menu...
                SideMenu(showMenu: $showMenu)
                
                // Primary Tab View...
                VStack(spacing: 0){
                    
                    TabView(choice: $currentTab){
                        
                        House(showMenu: $showMenu)
                            .navigationBarTitleDisplayMode(.inline)
                            .navigationBarHidden(true)
                            .tag("House")
                            .gesture(isSearching ? DragGesture() : nil) 
                        
                        Textual content("Search")
                            .navigationBarTitleDisplayMode(.inline)
                            .navigationBarHidden(true)
                            .tag("Search")
                        
                        Textual content("Notifications")
                            .navigationBarTitleDisplayMode(.inline)
                            .navigationBarHidden(true)
                            .tag("Notifications")
                        
                        Textual content("Messages")
                            .navigationBarTitleDisplayMode(.inline)
                            .navigationBarHidden(true)
                            .tag("Message")
                    }.tabViewStyle(.web page(indexDisplayMode: .by no means)) //Web page Tab view modified right here
                     .indexViewStyle(.web page(backgroundDisplayMode: .by no means))
                    
                    // Customized Tab Bar....
                    VStack(spacing: 0){
                        
                        Divider()
                        
                        HStack(spacing: 0){
                            
                            // Tab Buttons...
                            TabButton(picture: "House")
                            
                            TabButton(picture: "Search")
                            
                            TabButton(picture: "Notifications")
                            
                            TabButton(picture: "Message")
                        }
                        .padding(.prime,15)
                        .padding(.backside,safeArea().backside == 0 ? 15 : 0)
                    }
                }
                .body(width: getRect().width)
                // BG when menu is exhibiting...
                .overlay(
                
                    Rectangle()
                        .fill(
                        
                            Shade.main
                                .opacity(Double((offset / sideBarWidth) / 5))
                        )
                        .ignoresSafeArea(.container, edges: .vertical)
                        .onTapGesture {
                            withAnimation{
                                showMenu.toggle()
                            }
                        }
                )
            }
            // max Dimension...
            .body(width: getRect().width + sideBarWidth)
            .offset(x: -sideBarWidth / 2)
            .offset(x: offset > 0 ? offset : 0)
            // Gesture...
            .gesture(
            
                DragGesture()
                    .updating($gestureOffset, physique: { worth, out, _ in
                        
                        out = worth.translation.width
                    })
                    .onEnded(onEnd(worth:))
            )
            // No Nav bar title...
            // Hiding nav bar...
            .navigationBarTitleDisplayMode(.inline)
            .navigationBarHidden(true)
        }
        .animation(.easeOut, worth: offset == 0)
        .onChange(of: showMenu) { newValue in
            
            // Preview points...
            
            if showMenu && offset == 0{
                offset = sideBarWidth
                lastStoredOffset = offset
            }
            
            if !showMenu && offset == sideBarWidth{
                offset = 0
                lastStoredOffset = 0
            }
        }
        .onChange(of: gestureOffset) { newValue in
            onChange()
        }
    }
    
    func onChange(){
        let sideBarWidth = getRect().width - 90
        
        offset = (gestureOffset != 0) ? ((gestureOffset + lastStoredOffset) < sideBarWidth ? (gestureOffset + lastStoredOffset) : offset) : offset
        
        offset = (gestureOffset + lastStoredOffset) > 0 ? offset : 0
    }
    
    func onEnd(worth: DragGesture.Worth){
        
        let sideBarWidth = getRect().width - 90
        
        let translation = worth.translation.width
        
        withAnimation{
            // Checking...
            if translation > 0{
                
                if translation > (sideBarWidth / 2){
                    // exhibiting menu...
                    offset = sideBarWidth
                    showMenu = true
                }
                else{
                    
                    // Additional instances...
                    if offset == sideBarWidth || showMenu{
                        return
                    }
                    offset = 0
                    showMenu = false
                }
            }
            else{
                
                if -translation > (sideBarWidth / 2){
                    offset = 0
                    showMenu = false
                }
                else{
                    
                    if offset == 0 || !showMenu{
                        return
                    }
                    
                    offset = sideBarWidth
                    showMenu = true
                }
            }
        }
        
        // storing final offset...
        lastStoredOffset = offset
    }
    
    @ViewBuilder
    func TabButton(picture: String)->some View{
        
        Button {
            withAnimation{currentTab = picture}
        } label: {
            Picture(picture)
                .resizable()
                .renderingMode(.template)
                .aspectRatio(contentMode: .match)
                .body(width: 23, top: 22)
                .foregroundColor(currentTab == picture ? .main : .grey)
                .body(maxWidth: .infinity)
        }

    }
}

struct BaseView_Previews: PreviewProvider {
    static var previews: some View {
        BaseView()
    }
}

Right here is the code for House.swift


import SwiftUI

struct House: View {
    @Binding var showMenu: Bool
    var physique: some View {
        
        VStack{
            
            VStack(spacing: 0){
                
                HStack{
                    
                    Button {
                        withAnimation{showMenu.toggle()}
                    } label: {
                        Picture("Pic")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .body(width: 35, top: 35)
                            .clipShape(Circle())
                    }
                    
                    Spacer()
                    
                    // Navigation Hyperlink...
                    NavigationLink {
                        
                        Textual content("Timeline View")
                            .navigationTitle("Timeline")
                        
                    } label: {
                        
                        Picture("Sparkles")
                            .resizable()
                            .renderingMode(.template)
                            .aspectRatio(contentMode: .match)
                            .body(width: 22, top: 22)
                            .foregroundColor(.main)
                    }

                }
                .padding(.horizontal)
                .padding(.vertical,10)
                
                Divider()
            }
            .overlay(
            
                Picture("Brand")
                    .resizable()
                    .aspectRatio(contentMode: .match)
                    .body(width: 25, top: 25)
            )
            
            Spacer()
        }
    }
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

The aspect menu is an easy view that reveals some buttons and pictures. I wished it so if I swipe left from the house menu, it nonetheless triggers the sidemenu to pop up and present together with the web page tab view from the bottom. It really works completely with out the web page tab view modification and I commented the place the web page tab view modification was made within the base view to make clear that. Thanks a lot for all of your assist!

[ad_2]

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments