FlexLayout (6)

안녕하세요. 그린입니다🟢

이번 포스팅에서는 이제 거의 다왔어요..!

FlexLayout 리드미 뿌시기의 마지막 바로 전 섹션인 Margins에 대해 학습해보겠습니다🙌

 

Margins

마진이 뭘까요? 마진은 여백을 의미합니다.

즉 해당 뷰가 어떤 뷰만큼을 기준으로 어느정도 여백을 가지고 있냐가 마진입니다.

즉 잘게 쪼개서 보면 총 뷰가 가질 수 있는 여백 방향은 4방향입니다.

위,아래,좌,우🏃🏻

이 방향에서 같은 레벨의 뷰 혹은 상위뷰와의 오프셋을 지정해줍니다.

 

그럼 Margin을 적용할 수 있는 메서드들에 대해 알아보시죠🙋🏻

 

Margins의 여러가지 메서드

1. marginTop(_ value: CGFloat) / marginTop(_ percent: FPercent)

 - CGFloat 혹은 퍼센트 값으로 위쪽 여백을 줄 수 있습니다.

view.flex.marginTop(20)
view.flex.marginTop(20%)

2. marginBottom(_ value: CGFloat) / marginBottom(_ percent: FPercent)

 - CGFloat 혹은 퍼센트 값으로 아래쪽 여백을 줄 수 있습니다.

view.flex.marginBottom(20)
view.flex.marginBottom(20%)

3. marginLeft(_ value: CGFloat) / marginLeft(_ percent: FPercent)

 - CGFloat 혹은 퍼센트 값으로 왼쪽 여백을 줄 수 있습니다.

view.flex.marginLeft(20)
view.flex.marginLeft(20%)

4. marginRight(_ value: CGFloat) / marginRight(_ percent: FPercent)

 - CGFloat 혹은 퍼센트 값으로 오른쪽 여백을 줄 수 있습니다.

view.flex.marginRight(20)
view.flex.marginRight(20%)

5. marginStart(_ value: CGFloat) / marginStart(_ Percent: FPercent)

 - 시작 여백을 지정해줍니다. LTR에서는 왼쪽을 RTL에서는 오른쪽을 시작점으로 보니 해당 문화권에 따라 시작점이 다른걸 감안했습니다.

즉 LTR에서는 왼쪽 여백을 RTL에서는 오른쪽 여백을 지정해줍니다.

view.flex.marginStart(20)
view.flex.marginStart(20%)

6. marginEnd(_ value: CGFloat) / marginEnd(_ Percent: FPercent)

 - 종료 여백을 지정해줍니다. LTR에서는 오른쪽을 RTL에서는 왼쪽을 종료점으로 보니 해당 문화권에 따라 시작점이 다른걸 감안했습니다.

즉 LTR에서는 오른쪽 여백을 RTL에서는 왼쪽 여백을 지정해줍니다.

view.flex.marginEnd(20)
view.flex.marginEnd(20%)

7. marginHorizontal(_ value: CGFloat) / marginHorizontal(_ percent: FPercent)

 - 수평의 여백을 지정해줍니다.

즉 좌/우측 여백 혹은 시작/종료 여백을 지정해줍니다.

view.flex.marginHorizontal(20)
view.flex.marginHorizontal(20%)

8. marginVertical(_ value: CGFloat) / marginVertical(_ percent: FPercent)

 - 수직의 여백을 지정해줍니다.

즉 상/하단 여백을 지정해주는것이죠.

view.flex.marginVertical(20)
view.flex.marginVertical(20%)

9. margin(_ insets: UIEdgeInsets)

 - UIEdgeInset을 사용해 모든 여백을 지정해줍니다.

해당 메서드는 iOS 11 이상에서 UIView.safeAreaInsets를 사용해 모든 여백을 지정하는데 유용하다고 해요!

view.flex.margin(UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 20))

10. margin(_ insets: NSDirectionalEdgeInsets)

 - NSDirectionEdgeInset을 사용해 모든 여백을 지정해줍니다.

해당 메서드는 LTR/RTL 방법을 지원하는 뷰를 레이아웃 시 directionalLayoutMargin을 사용할 때 유용하다고 해요!

즉 바로 위 UIEdgeInsets와 다른점은 left가 leading으로 문화권에 따라 좌/우측이 될 수가 있습니다.

view.flex.margin(NSDirectionalEdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 20))

11. margin(_ value: CGFloat)

 - 모든 방향의 여백을 동일하게 지정해줍니다.

view.flex.margin(20)

12. margin(_ vertical: CGFloat, _ horizontal: CGFloat)

 - 수직과 수평의 여백을 각각 따로 지정해줄 수 있습니다.

view.flex.margin(10, 20)

13. margin(_ top: CGFloat, _ left: CGFloat, _ bottom: CGFloat, _ right: CGFloat)

 - 모든 방향의 여백을 각각 줄 수 있습니다.

view.flex.margin(10, 20, 30, 40)

 

margin 메서드 체이닝

당연히 이 모든 메서드들을 체이닝하여 연결해 아래와 같이 사용할 수 있습니다.

view.flex.marginTop(30).marginLeft(10)

 

마무리

이렇게 간단한 Margin에 대해 알아봤습니다!

다음에는 Paddings과 확장 메서드들을 알아보면서 FlexLayout을 마무리 지으려합니다!

 

[참고자료]

https://github.com/layoutBox/FlexLayout

GitHub - layoutBox/FlexLayout: FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementati