Offset과 Padding의 차이

Offset 정의

    /// Offset this view by the specified horizontal and vertical distances.
    ///
    /// Use `offset(x:y:)` to to shift the displayed contents by the amount
    /// specified in the `x` and `y` parameters.
    ///
    /// The original dimensions of the view aren't changed by offsetting the
    /// contents; in the example below the gray border drawn by this view
    /// surrounds the original position of the text:
    ///
    ///     Text("Offset by passing horizontal & vertical distance")
    ///         .border(Color.green)
    ///         .offset(x: 20, y: 50)
    ///         .border(Color.gray)
    ///
    /// - Parameters:
    ///   - x: The horizontal distance to offset this view.
    ///   - y: The vertical distance to offset this view.
    ///
    /// - Returns: A view that offsets this view by `x` and `y`.
    @inlinable public func offset(x: CGFloat = 0, y: CGFloat = 0) -> some View

 

 

Offset this view by the specified horizontal and vertical distances.

-> 지정된 수직, 수평 거리만큼 view를 offset한다. (offset : 상쇄하다라는 뜻인데 아직 감이 잘 안옴. layout 상관없이 이동시킬 수 있어서 그런건가..)

 

 

Use `offset(x:y:)` to to shift the displayed contents by the amount specified in the `x` and `y` parameters.

-> 'offset(x:y:)'를 'x', 'y' 파라미터에 지정된 양만큼 보여지는 컨텐츠를 '이동'시키기 위해 사용하라

 

 

The original dimensions of the view aren't changed by offsetting the contents; in the example below the gray border drawn by this view surrounds the original position of the text:

-> contents를 offset 함으로서 view의 원래 *dimension은 변하지 않는다. 아래 예제에서 gray border는 text의 본래 좌표(=position) 주위에 그려진다. (아래 이미지 참고)

 

*dimension 뜻 : a measurement of something in a particular direction, especially its height, length, or width

-> 우리가 흔히 생각하는 차원이 이런 뜻인지는 모르겠는데, 여기서는 특정 방향, 특히 높이, 길이, 넓이에 대한 측정을 나타낸다.

 

 

즉, offset는 view 자체를 모두 이동시키는 것이 아니라 뷰 내부에 보여지는 컨텐츠를 단순히 이동시키기 위함인 것 같다.

     Text("Offset by passing horizontal & vertical distance")
         .border(Color.green)
         .offset(x: 20, y: 50)
         .border(Color.gray)

 

- Parameters: 

- x: The horizontal distance to offset this view.

- y: The vertical distance to offset this view.

 

-> x좌표 : 뷰를 가로로 이동

-> y좌표 : 뷰를 세로로 이동

 

- Returns: A view that offsets this view by `x` and `y`.

-> 뷰를 파라미터로 받은 x, y값 만큼 이동시킨 뷰를 리턴함.

---

 

Padding 정의

- padding(_:_:)

A view that pads this view inside the specified edge insets with a system-calculated amount of padding.

-> 시스템에서 계산된 padding의 양으로 지정된 가장자리 내부의 view를 *pad하는 view

 

*pad 뜻 : fill or cover (something) with soft material in order to protect it or its contents, make it more comfortable, or give it a particular shape.

-> 내부를 보호하기 위해 부드러운 것을 채워넣어 더 편하고 특정 모양을 만든다. 근데 여기서는 그냥 둘러싼다라고 생각하면 될 듯. SwiftUI에서 padding을 넣게되면, view 주위에 공간이 생기는 걸 생각하면 잘 와닿음. 

 

 

Declaration

func padding(_ edges: Edge.Set = .all, _ length: CGFloat? = nil) -> some View

 

Return Value

A view that pads this view using the specified edge insets with specified amount of padding.

->  시스템에서 계산된 padding의 양으로 지정된 가장자리 내부의 view를 *pad하는 view를 리턴

 

Parameters

edges

The set of edges along which to pad this view; if nil the specified or system-calculated mount is applied to all edges.

-> view를 감쌀 가장자리의 집함. 만약 딱히 값을 주지 않는다면 기본값으로 .all 이 들어가 모든 가장자리에 적용이 된다.

 

*참고로 declaration에서 edges 파라미터 앞에 _ 이 것이 의미하는 바를 모른다면, Swift 문법 중 "Parameter, Argument, Wildcard"에 대해서 공부하고 오면 딱히 값을 주지 않는다는 말이 무슨 뜻인지 더 자세히 알게될 것이다.

 

length

The amount to inset this view on the specified edges. If nil, the amount is the system-default amount.

-> 지정된 가장자리들에 padding view를 끼워넣을 수치. 만약 값을 안준다면 (=nil 이라면) system-default amount(=시스템 설정 기본값)이 적용된다.

 

*default : 기본 값이라고 생각하면 된다. -> 엄청 자주나오니 꼭 알아두시길

 

Discussion

Use padding(_:) to add a system-calculated amount of padding inside one or more of the view’s edges by passing either a single edge name, or an OptionSet describing which edges should be padded. For example you can add padding to the bottom of a text view:

 

-> padding(_:)은 가장자리 이름이나 pad 되어야할 가장자리를 묘사한 OptionSet의 값을 넣음으로서 하나 이상의 뷰의 가장자리들에 시스템에서 정의된 padding 값을 추가할 때 사용하라. 예를 들어, text view를 바텀에 padding을 추가할 수 있다.

 

*OptionSet : OptionSet은 비트 집합을 나타낼때 사용하는 프로토콜이다. 거의 쓸일이 없을 것 같으니 일단, 가장자리 이름과 수치에 집중하자!

 

 

To pad the view’s insets, which affects the amount of padding inside the edges of the view, see padding(_:). To pad all outside edges of a view with an amount you specify, see padding(_:).

 

-> 각각의 뷰의 가장자리에 특정 수치의 padding을 넣고싶다면 padding(_:)을 사용하고, 모든 가장자리에 특정 수치의 padding을 넣고 싶다면 padding(_:)를 사용하라.

 

*참고 : 처음 코딩을 접하시는 분들에겐 대체 무엇이 다른지 어려울 수 있다. 하지만 각각의 정의와 쓰임을 보면 다른 용도로 쓰인다는 것을 알아 두자. 무엇보다 겉으로는 같아 보이는 함수이지만 내부 "parameter"의 차이로 인해 발생한다는 점을 알아두시면 좋다.

---

 

결론!!!!!!!

offset는 view 자체를 모두 이동시키는 것이 아니라 뷰 내부에 보여지는 컨텐츠를 단순히 이동시키기 위함인 것 같다.

-> 추측상 offset은 뷰들간의 레이아웃이 있지만 그것을 무시하고 강조(?)해야하는 컨텐츠가 있다면 그 컨텐츠를 부각시키기 위할때 사용할 것 같다. 예를 들어 지도 위에 이미지를 띄운다던지와 같이

 

padding은 view 내부에 설정한 수치 값만큼 공간을 준다. 

-> 추측상 뷰들간의 레이아웃을 잡기 위해 설정한다고 생각한다. 아마 Spacer와 함께 레이아웃을 잡을때 가장 많이 쓰이지 않을까 싶다. 

 

 

*수정사항이 보인다면 말씀해주세요! 피드백은 언제나 환영입니다 ㅎㅎ 제 글이 도움이 되셨길 바랍니다 :)*

 

 

 

참고 문서 :

developer.apple.com/documentation/swiftui/transformedshape/padding(_:_:)

Apple Developer Documentation

developer.apple.com/documentation/swiftui/datepicker/offset(x:y:)

Apple Developer Documentation