Position vs Offset 예시와 함께 비교 분석하기

 

Animation 뚜까파기 모음 zip

1. Animation의 기초

2. Animation을 일어나게 하는 Trigger들 ( Gesture를 중심으로 )

 

+) Animation을 위한 미니 공부들

Position vs Offset 예시와 함께 비교 분석하기

 

---

Animation 공부하면서 정말 헷갈렸던 개념 중에 하나... Position과 Offset !!

Animation 곳곳에 쓰이는 녀석이기 때문에 아주 잘 쓰고 싶은 다음에 한번 파봤다(?)

 

 🔮 이 녀석 어떤 뷰일지 예상이 간다면 굳이 읽을 필요가 없을 것 같습니닷.. ( 정답은 제일 밑에 있습니다. ) 

---

 🔮 우선 알아야 하는 개념 

1) 무엇을 기준으로 이동하는가

https://developer.apple.com/documentation/swiftui/making-fine-adjustments-to-a-view-s-position

위에서 설명하는 것처럼 View의 위치를 미세하게 조정하는 방법은 2가지가 있다.

바로 Offset과 Position!

설명하는 바에 따르면 아래로 정리할 수 있다.

Offset: 뷰의 렌더링된 콘텐츠를 현재 위치에서 이동
Position: 부모 내에서 명시적 위치를 설정

 

Offset은 원래 있어야 하는 자리 기준으로 이동, Position은 부모 뷰의 자리를 기준으로 이동한다.

 

2) 이동은 어디서 어디로 하는가

우선 Offset과 Position 둘 다 (    )을 기준으로  X, Y 만큼 이동시킬 수 있다.

 

일반적으로 우리가 쓰는 수학 좌표계랑 좀 다른 게 우측으로 이동할 수록 X는 증가하고, Y는 아래로 갈 수록 증가한다.

아마 휴대폰 기기 특성상 왼쪽 상단에서 0,0을 쓰기 위해서 이렇게 설계한 듯 하다. ( 개인 피셜입니다 )

 

 

---

 🔮 기본 단계 

이 뷰를 기준으로 Offset과 Position의 차이를 알아보려 한다.

        ZStack {
            Crosshairs()
            Rectangle()
                .stroke(Color.primary)
            Image(systemName: "circle")
        }
        .frame(width: 160, height: 160)

이렇게 과녁 같은 모양이 나옵니듕

이런 과녁 모양에서 Circle 이 이미지를 이동시킬 것이다.

 

아래 코드를 보면 한 줄만 다르다. 하나는 Offset이고 하나는 Position !!

        ZStack {
            Crosshairs()
            Rectangle()
                .stroke(Color.primary)
            Image(systemName: "circle")
                .offset(x: 40.0, y: -40.0) // Offset을 사용
        }
        .frame(width: 160, height: 160)
        
        
        ZStack {
            Crosshairs()
            Rectangle()
                .stroke(Color.primary)
            Image(systemName: "circle")
                .position(x: 144, y: 80)  // position 사용
        }
        .frame(width: 160, height: 160)

 

위에서 이야기했던 대로

Offset: 뷰의 렌더링된 콘텐츠를 현재 위치에서 이동
Position: 부모 내에서 명시적 위치를 설정

한다. 따라서 Offset의 기준점과 Position의 기준점은 다음과 같다.

⚠️ 기준점을 잘 생각하며 다시 코드를 보고 어떻게 뷰가 그려질지 예상을 해보고 아래로 내려오세요 !!!

 

 

정답: 

 

---

 🔮 심화 단계 

다시 이 코드를 보고 어떻게 그려져야 하는 지 알 것 같으면 넘어가셔도 됩니다.

사실 공홈에서 저 예시보고 뭐야 쉽네 했는데, 실험을 하기 위해 코드를 작성하다보니까 또 어려움 봉착...

아는 줄 알았는데 모르겠...^_^

 

이럴 때는 다시 정의를 읽어보자.

Offset: 뷰의 렌더링된 콘텐츠를 현재 위치에서 이동
Position: 부모 내에서 명시적 위치를 설정

 

뭘 모르는 지 가만히 생각해보면, Offset에서는 현재 위치를 알아야지 이 뷰가 어디 그려지는 지 알 수 있고, Position에서는 부모뷰가 어떻게 그려져야 하는지 이 뷰가 어디 그려져야 하는 지 알 수 있다.

그런데 어떤 기준으로 해야 하는지 순서도 잘 모르겠고 당황스러운 ..게 문제..

 

그래서 서칭을 하다가 엄청난 WWDC 영상을 발견했다.

Building Custom Views with SwiftUI 라는 영상인데, 스유에서 뷰가 어떻게 그려지는 지에 대한 내용을 담은....

Hstack이나 Vstack과 관련한 내용들도 설명되어 있다. 솔직히 처음 Hstack이나 Vstack을 공부할 때 이 영상을 보면 더 머리가 아플 거 같기는한데,,, 조금 이해도가 있고 영상을 보니까 뭔 말인지 알 것 같았다.

 

이렇게 View가 그려질 때 RootView에서 위치를 잡는 게 사실은 마지막에 일어나는 일임을 알 수 있다. 그니까 위치잡는 것을 알아보고 있는 우리가 헷갈리수밖에 ^^ 머릿속에 해당 뷰의 위치를 떠올릴 때 폰에서 어디다! 라는 생각은 잠시 버리고 해당 뷰를 떼어서 생각해보는 것을 추천합니다..

 

WWDC에서 그렸던 View랑 비슷하게 나도 내가 짰던 예시코드를 그려봤다.

우선 Offset부터 죠져보자.

0번부터 차례대로 읽어보면 됩니다..!

Offset 

 

Position

그리고 Position....

 

 

글로 설명하는 것보다 그림으로 같이 설명하는 게 나을 거 같아서,... 열심히 그렸습니다..

그리다보니 드는 생각...

 

이렇게까지 했어야 했을까?

 

그래도 완전 완벽 이해했음 !!! ㅋㅋㅋㅋㅋ

 

이건 젤 처음 물어봤던 것에 대한 정답 !!

 

---

출처

Making fine adjustments to a view’s position | Apple Developer Documentation

 

position(x:y:) | Apple Developer Documentation

offset(x:y:) | Apple Developer Documentation

 

Building Custom Views with SwiftUI - WWDC19 - Videos - Apple Developer