swiftswiftui

How to get the position of a view in SwiftUI


Below I have three Text views, the location of View 3 will be dynamic every time the app loads, and what I would like to be able to do is animate View 2 to the exact position of View 3 regardless of where View 3 is on the screen.

I found this thread but I'm not sure how to use ReometryReader to accomplish what I need.

How can I get the current position of View 3?

How can I assign the x and y position of the View 3 to xPosition and yPosition respectively inside the withAnimation method?

struct PositioningViews: View {
    @State private var xPosition:CGFloat = 0
    @State private var yPosition:CGFloat = 0
    
    var body: some View {
        HStack {
            Text("View 1")
                .background(.purple)
           
            Text("View 2")
                .background(.orange)
                .offset(x: xPosition, y: yPosition)
                .onAppear {
                    withAnimation(Animation.easeOut(duration: 0.3).delay(0.5)) {
                        self.xPosition = 50
                        self.yPosition = 0
                    }
                }
            
            Text("View 3")
                .background(.blue)
        }
    }
}

Solution

  • Complete Working Code:

    struct PositioningViews: View {
        @State private var xPosition2:CGFloat = 0
        @State private var yPosition2:CGFloat = 0
        @State private var xPosition3:CGFloat = 0
        @State private var yPosition3:CGFloat = 0
        @State private var offsetValueX = 0.0
        @State private var offsetValueY = 0.0
        var body: some View {
            HStack {
                Text("View 1")
                    .background(.purple)
               
                
                Text("View 2")
                    .background(.orange)
                    .overlay(
                        GeometryReader{ geo -> AnyView in
                            
                            AnyView(Color.clear
                                .onAppear(){
                                  
                                        xPosition2 = geo.frame(in: .global).midX
                                        yPosition2 = geo.frame(in: .global).midY
                                    
                                    
                                })
                        }
                    )
    
                    .background(.blue)
                    .offset(x: offsetValueX, y: offsetValueY)
                    .onAppear(){
                        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                            withAnimation {
                                offsetValueX = xPosition3 - xPosition2
                                offsetValueY = yPosition3 - yPosition2
                            }
                        }
                    }
                    .zIndex(2)
                
                
                Text("View 3")
                    .background(.blue)
                    .overlay(
                        GeometryReader{ geo -> AnyView in
                            
                            AnyView(Color.clear
                                .onAppear(){
                                   
                                    xPosition3 = geo.frame(in: .global).midX
                                    yPosition3 = geo.frame(in: .global).midY
                                        
                                    
                                })
                        }
                    )
                    .zIndex(1)
            }
        }
    }
    

    EDIT, Without AnyView:

    struct PositioningViews: View {
        @State private var xPosition2:CGFloat = 0
        @State private var yPosition2:CGFloat = 0
        @State private var xPosition3:CGFloat = 0
        @State private var yPosition3:CGFloat = 0
        @State private var offsetValueX = 0.0
        @State private var offsetValueY = 0.0
        var body: some View {
            HStack {
                Text("View 1")
                    .background(.purple)
               
                
                Text("View 2")
                    .background(.orange)
                    .overlay(
                        GeometryReader{ geo  in
                            Color.clear
                                .onAppear(){
                                    xPosition2 = geo.frame(in: .global).midX
                                    yPosition2 = geo.frame(in: .global).midY
                                }
                        }
                    )
                    .background(.blue)
                    .offset(x: offsetValueX, y: offsetValueY)
                    .onAppear(){
                        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                            withAnimation {
                                offsetValueX = xPosition3 - xPosition2
                                offsetValueY = yPosition3 - yPosition2
                            }
                        }
                    }
                    .zIndex(2)
                
                Text("View 3")
                    .background(.blue)
                    .overlay(
                        GeometryReader{ geo in
                           Color.clear
                                .onAppear(){
                                    xPosition3 = geo.frame(in: .global).midX
                                    yPosition3 = geo.frame(in: .global).midY
                                        
                                }
                        }
                    )
                    .zIndex(1)
            }
        }
    }