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%)
마무리
이번 주제는 레이아웃에 익숙하다면 충분히 술술 넘어가는 주제였습니다.
다만 꼭 필요한건 직접 구현해보면서 익혀보는게...
뒤돌아 까먹는게 코드🥲