[SwiftUI] Offset vs Position (+ Padding)

 

오늘은 SwiftUI에서 Layout과 관련이 있는 메서드에 대해서 살펴볼 예정입니다.

offset 이란?

(공식 문서)

공식 문서의 정의를 해석해보면 "지정된 수평 및 수직 거리로 이 뷰를 오프셋합니다." 음... 뭔 말인지 모르겠어서 🤷

Discussion을 읽어보았습니다.

➡️ x 및 y 매개변수에 지정된 양만큼 표시된 내용을 이동하려면 offset을 사용한다고 적혀있습니다.

그래서 위에 사진 예시처럼 원래 Text가 있어야하는 자리에서부터 x로 20만큼, y로 50만큼 떨어져 실제 텍스트가 위치하는 것을 확인할 수 있습니다.

 

따라서 offset은 자신의 원래 위치에서 상대적으로 위치를 설정할 때 사용하는 메서드입니다.

---

position 이란?

(공식 문서)

공식 문서에는 "부모 좌표 공간의 지정된 좌표에 이 뷰의 중심을 배치합니다"라고 나와있습니다.

 

그래서 코드로 예시를 한 번 보겠습니다.

Image(systemName: "heart")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 50, height: 50)
    .padding(.top, 50)
    .position(CGPoint(x: 100.0, y: 100.0))
    .background(.gray)

 

 

 

 

 

 

 

 

 

 

• position은 부모뷰를 기준으로 x가 100, y가 100만큼 떨어진 곳에
  하트 이모지가 위치하게 됩니다.

* Tip) 부모뷰가 어디서부터 어디까지인지 모르겠다면! background 생상을 칠해보자.

 

따라서 position은 부모뷰의 위치에서 상대적으로 위치를 설정할 때 사용하는 메서드입니다.

---

offset vs position

 var body: some View {
        ZStack {
            Image(systemName: "heart")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .foregroundStyle(.red)
                .frame(width: 50, height: 50)
                .padding(.top, 50)
                .offset(x:20, y: 30)

            Image(systemName: "heart")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 50, height: 50)
                .padding(.top, 50)
                .position(CGPoint(x: 100.0, y: 100.0))
        }

    }

 

 

 

 

 

❤️ (빨간하트) - offset 사용

   1. 원래 빨간 하트 위치 정렬 

   2. 원래 빨간 하트 위치에서부터 x로 20, y로 30 떨어진 지점에 빨간 하트가 위치

   (여기서 파란색 상자가 원래 하트 위치를 뜻합니다.)

 

 

 

 

 

 

 

 

 

 

🖤 (검정하트) - position 사용

   1. 부모뷰 확인

   2. 부모뷰에서부터 x로 100, y로 100 떨어진 지점에 빨간 하트가 위치

   (여기서 파란색 상자가 부모뷰를 뜻합니다.)

 

 

 

 

 

 

 

 

---

padding 이란?

(공식 문서)

패딩에 대한 정의는 "즉, 뷰의 특정한 모서리(예: 위, 아래, 왼쪽, 오른쪽)에 같은 크기의 여백을 추가할 때 사용하는 기능입니다. 이를 통해 뷰 주변의 여백을 균일하게 설정할 수 있습니다." 라고 나와있습니다.

 

간단하게 말하면 요소 사이의 간격을 지정한다고 볼 수 있습니다.

그러면 이제 실제 코드로 padding을 어떻게 지정해주는지 살펴보겠습니다.

VStack {
    // 1.
    Text("ABCDEFG")
        .padding(.bottom, 15)
    // 2.
    Text("ABCDEFG")
        .padding([.leading, .bottom], 15)
    // 3.
    Text("ABCDEFG")
        .padding(EdgeInsets(top: 0, leading: 15, bottom: 15, trailing: 0))
    // 4
    Text("ABCDEFG")

 

위에 코드에서 전체, 1번부터 3번까지의 레이아웃입니다.

사진을 본 결과 2번과 3번이 코드 작성에는 살짝 다른점이 있지만 표현될때는 동일하게 보인다는 것을 알 수 있습니다.

 

---

결론 🔍

내 원래 요소에서 상대적인 위치를 조절할 때는? ➡️ Offset

부모 요소에서 상대적인 위치를 조절할 때는? ➡️ Positon

요소와 요소 사이의 간격을 조절할 때는? ➡️ Padding