FlexLayout (4)

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

이번 포스팅에서는 계속 쭉 이어서 FlexLayout에 대해 학습해보겠습니다!

주제는 4번 항목인 Absolute Positioning입니다🙌

 

Absolute Positioning을 직독직해 해보면 "절대 위치"로 해석이 됩니다.
그러면 우리는 Flexbox를 컨테이너 혹은 상위 뷰에서 어떤 위치로 배치할지에 대해 알아보겠다고 짐작할 수 있겠습니다!

 

사용법

아래와 같이 위치를 잡기 위해서는 2가지가 있습니다.

상대적 위치로 지정하던지 아니면 절대적 위치로 지정하던지!

우리는 줄곧 이전 포스팅에서 대부분 상대적 위치를 통해 각 요소들을 잡았습니다.

그런데 이번 핵심은 절대적 위치입니다.

우선적으로 position 메서드를 사용합니다.

view.flex.position(.relative) // Default
view.flex.position() // relative
view.flex.position(.absolute)

요렇게 보면 relative 즉 상대적 위치가 디폴트 값입니다.

그런데 만약 상대적 위치를 고려하지 않고 절대적으로 위치를 잡아줘야되는 경우가 있습니다.

그럴때 absolute를 인자로 넣어주고 이제 나오는 메서드들을 이용해 상대적 위치를 잡아줄꺼야~ 라고 인식시켜줍니다.

그러면 상대적 위치는 어떻게 잡을 수 있을까요?

 

Absolute Positioning Method

공식 문서에서 절대적 위치를 잡아주는 메서드로 9가지를 설명하고 있습니다.

천천히 하나씩 보시죠!

 

1. top(: CGFloat) / top(: FPercent)

CGFloat값 혹은 퍼센트 값으로 넣어줄 수 있으며 자신과 상위의 상단 엣지간 거리를 지정해줍니다.

SwiftUI를 사용해보신적이 있다면 더 쉽게 다가올 수 있는 .padding(.top, 20)과 같은 느낌입니다.

view.flex.position(.absolute).top(10)
view.flex.position(.absolute).top(10%)

 

2. bottom(: CGFloat) / bottom(:FPercent)

자신과 상위의 하단 엣지간 거리를 지정해줍니다.

view.flex.position(.absolute).bottom(10)
view.flex.position(.absolute).bottom(10%)

 

3. left(: CGFloat) / left(: FPercent)

자신과 상위의 좌측 엣지의 거리간 거리를 지정해줍니다.

view.flex.position(.absolute).left(10)
view.flex.position(.absolute).left(10%)

 

4. right(: CGFloat) / right(: FPercent)

자신과 상위의 우측 엣지의 거리간 거리를 지정해줍니다.

view.flex.position(.absolute).right(10)
view.flex.position(.absolute).right(10%)

 

5. start(: CGFloat) / start(: FPercent)

자신의 시작점 포인트와 상위의 시작점 포인트간 거리를 지정해줍니다.

LTR에서는 left(), RTL에서는 right()로 대응합니다.

view.flex.position(.absolute).start(10)
view.flex.position(.absolute).start(10%)

 

6. end(: CGFloat) / end(: FPercent)

자신의 엔드 포인트와 상위의 엔드 포인트간 거리를 지정해줍니다.

start와 더불어 LTR에서는 right(), RTL에서는 left()로 대응합니다.

view.flex.position(.absolute).end(10)
view.flex.position(.absolute).end(10%)

 

7. vertically(: CGFloat) / vertically(: FPercent)

자신과 상위의 vertical(수직) 즉, 상하단에 해당하는 엣지간 거리를 지정해줍니다.

.top().bottom()의 코드와 같습니다.

view.flex.position(.absolute).vertically(10)
view.flex.position(.absolute).vertically(10%)

 

8. horizontally(: CGFloat) / horizontal(: FPercent)

자신과 상위의 horizontal(수평) 즉, 좌우에 해당하는 엣지간 거리를 지정해줍니다.

.left().right()의 코드와 같습니다.

view.flex.position(.absolute).horizontally(10)
view.flex.position(.absolute).horizontally(10%)

 

9. all(: CGFloat) / all(: FPercent)

자신과 상위의 모든 상하좌우에 해당하는 엣지간 거리를 지정해줍니다.

top().bottom().left().right()의 코드와 같습니다.

view.flex.position(.absolute).all(10)
view.flex.position(.absolute).all(10%)

 

위의 메서드들로 상황에 따라 절대적 위치와 크기를 지정해줄 수 있습니다.

해당 절대위치로 크기/위치가 지정된 flexbox 즉 뷰는 동등한 다른 뷰 레이아웃에 영향을 주지 않습니다.

즉 절대위치를 활용한다면 Z축을 만들어 오버레이를 사용하는 효과를 얻을 수 있습니다.

아래와 같이 위의 항목들은 체이닝되어 사용할 수 있습니다!

  view.flex.position(.absolute).top(10).right(10).width(100).height(50)
  view.flex.position(.absolute).left(20%).right(20%)

 

마무리

이번 주제는 레이아웃에 익숙하다면 충분히 술술 넘어가는 주제였습니다.

다만 꼭 필요한건 직접 구현해보면서 익혀보는게...

뒤돌아 까먹는게 코드🥲

 

[참고자료]

https://github.com/layoutBox/FlexLayout