FlexLayout (7)

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

이번 포스팅에서는 드디어 FlexLayout ReadMe의 마지막 섹션 Paddings와 Extra UIView methods에 대해 학습하겠습니다🙋🏻

Padding vs Margin?

저번 포스팅에서는 Margin에 대해 다뤘어요.

그런데 이번엔 Padding!

둘다 여백을 주는것은 동일한데 어떤 차이가 있을까요?

아주 아주 비슷하지만 가장 확실한 차이가 있습니다.

우선 아래 비교 그림을 보시죠!

디자인 감각이 없어서 색 조합이라던지... 아무튼 엉망이지만 이걸로 대변할 수 있습니다!

전체적인 View가 있을것이고 이게 상위 혹은 부모뷰가 될 수 있어요.

여기에 Content들이 담겨요.

그럴때 Margin은 보시다시피 Content 전체와 상위뷰간 여백을 나타냅니다.

즉 외부 여백을 뜻합니다.

Border는 Content의 테두리를 말합니다.

마지막으로 Padding은 Content 자체에서의 여백입니다.

즉 Content의 가장자리로부터 해당하는 내부 여백이에요.

경우에 따라 원하는걸 혼합해 적절히 사용하면 됩니다🙌

 

그러면 이제 본격적으로 Padding이 무엇인지 Margin과 어떤 차이인지 알았으니 Padding에는 어떤 메서드들이 있는지 보러 가시죠!
이전 포스팅에서 다룬 Margin과 다 동일하다고 보시면 됩니다!
가장 큰 차이는 외부 여백인지 내부 여백인지😄

 

Padding의 여러가지 메서드

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

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

view.flex.paddingTop(20)
view.flex.paddingTop(20%)

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

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

view.flex.paddingBottom(20)
view.flex.paddingBottom(20%)

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

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

view.flex.paddingLeft(20)
view.flex.paddingLeft(20%)

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

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

view.flex.paddingRight(20)
view.flex.paddingRight(20%)

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

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

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

view.flex.paddingStart(20)
view.flex.paddingStart(20%)

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

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

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

view.flex.paddingEnd(20)
view.flex.paddingEnd(20%)

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

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

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

view.flex.paddingHorizontal(20)
view.flex.paddingHorizontal(20%)

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

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

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

view.flex.paddingVertical(20)
view.flex.paddingVertical(20%)

9. padding(_ insets: UIEdgeInsets)

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

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

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

10. padding(_ insets: NSDirectionalEdgeInsets)

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

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

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

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

11. padding(_ value: CGFloat)

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

view.flex.padding(20)

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

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

view.flex.padding(10, 20)

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

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

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

 

padding 메서드 체이닝

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

view.flex.paddingTop(30).paddingLeft(10)

 

Background Color 지정

자 그럼 두번째로 UIView의 확장 메서드들을 알아보시죠!

리드미에 나와있는건 뭐 별거 없네요!?ㅋㅋ

백그라운드컬러 지정입니다!

backgroundColor(_ color: UIColor)

선언은 이렇습니다.

단순히 컬러만 넣어주면 됩니다.

flex.addItem().backgroundColor(.green).define { (flex) in
  flex.addItem().height(1).backgroundColor(.red)
}

어디든 원하는 컨테이너 혹은 콘텐츠에 배경색 지정이 가능합니다!

 

마무리

자 이렇게 7개의 포스팅에 거쳐 가장 기본적인 FlexLayout의 개념과 정의를 알아봤습니다🙌

역시 실제 프로젝트에서 다양하게 만나보는게 제일이겠습니다!

그래도 확실히 조금 더 쉽게 사용될 수 있는 라이브러리임에는 동의합니다👍

 

[참고자료]

https://github.com/layoutBox/FlexLayout

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