Swift

[iOS] FlexLayout + PinLayout

JSKoder 2023. 6. 29. 21:01

FlexLayout + PinLayout

개요: Yoga(Facebook) 기반의 Flexbox 구현에 Swift 인터페이스를 추가. UIStackView에 비해 8 ~ 12배 빠른 속도

두 프레임워크는 유사한 방식과 메서드명을 공유한다. PinLayout은 CSS의 절대적인 포지셔닝에서 영감을 얻었으며, 일반적인 제어 및 애니메이션에 매우 유용하다. 한 번에 하나의 보기를 레이아웃으로 전체 제어를 제공한다.(코딩 및 결함이 간단함.)

🎯 핵심

  • Pinlayout은 세밀화한 작업에, Flexlayout은 큼지막한 작업에 적합하다.

📜 규칙

  • layoutSubview에서 레이아웃 위치를 잡아줘야 한다.

📏  FlexLayout의 Grow와 Shrink

FlexLayout은 Flexbox 개념에서 grow와 shrink라는 두 가지 중요한 속성을 지원한다.

  • grow: 이 속성은 뷰가 가용 공간을 채우기 위해 얼마나 성장할 수 있는지를 결정. 기본 값은 0이며, 양의 값은 주 축 방향의 남은 공간에 대한 뷰의 성장 가능성을 나타낸다.
  • shrink: 이 속성은 뷰가 필요한 공간이 부족할 때 얼마나 줄어들 수 있는지를 결정. 기본 값은 1이며, 양의 값은 주 축 방향의 부족한 공간을 상쇄하기 위한 뷰의 줄어듦 가능성을 나타낸다. >> UIKit에서 Label의 Autoshrink와 같은 역할을 진행하는듯?

📍 PinLayout의 기준점(anchor point) 설정

PinLayout은 뷰의 크기와 위치를 조정할 때 기준점을 설정하는데 사용. 기준점은 뷰의 좌표를 결정하는데 사용되는 포인트. 이는 다음의 메서드를 사용해 설정할 수 있다.

  • anchor(: CGPoint): 뷰의 기준점을 설정한다. CGPoint는 (0,0)에서 (1,1) 사이의 값을 가진다. 예를 들어, (0,0)은 뷰의 왼쪽 상단, (1,1)은 뷰의 오른쪽 하단이며, (0.5,0.5)는 뷰의 중심이다.
  • anchor(: HorizontalAlign, _: VerticalAlign): 수평 및 수직 정렬을 사용하여 뷰의 기준점을 설정한다.

🧭  원칙 및 철학

  • Flexbox는 간단하고 강력하며 빠름.
  • FlexLayout 구문은 간결하고 연결이 가능함.
  • 수동레이아웃보다 빠름.

📌 PinLayout 연산자

RTL(Right To Left): LTR 언어를 지원하는 오른쪽에서 왼쪽으로 텍스트를 읽는 언어

LTR(Left To Right): 왼쪽에서 오른쪽으로 텍스트를 읽는 언어

정렬 연산자

  • .left: 뷰의 왼쪽 가장자리가 첫 번째 보기에 왼쪽 정렬.
  • .center: 뷰의 첫번째 보기가 수평 가운데 정렬
  • .right: 뷰의 오른쪽 가장자리가 첫 번째 보기에 오른쪽 정렬
  • .start: LTR > .left, RTL > .right
  • .end: LTR > .right, RTL > .left
  • .top: 뷰의 위쪽 가장자리가 첫 번째 보기와 위쪽 정렬.
  • .center: 뷰가 첫 번째 뷰와 수직 가운데 정렬.
  • .bottom: 뷰의 아래쪽 가장자리가 첫 번째 뷰와 아랫쪽 정렬.

모서리 레이아웃

  • top, bottom, left, right 함수들은 각각 상단, 하단, 왼쪽, 오른쪽 가장자리를 배치 >> SnapKit과 비슷? top().right() >> topRight() + 사이즈 설정 .size
  • vCenter와 hCenter는 수평, 수직 중심 설정.
  • LTR(왼쪽에서 오른쪽) 또는 RTL(오른쪽에서 왼쪽) 언어에 따라 start, end 함수들이 사용됩니다.
  • all 함수는 모든 가장자리를 동시에 배치하고, horizontally와 vertically 함수는 각각 수평, 수직 방향의 가장자리를 배치합니다.

가장자리 정렬 레이아웃

  • above(of: UIView): 지정된 뷰 위에 뷰를 배치합니다.
  • below(of: UIView): 지정된 뷰 아래에 뷰를 배치합니다.
  • before(of: UIView): LTR(왼쪽에서 오른쪽) 방향에서 보기는 지정된 뷰의 왼쪽에, RTL(오른쪽에서 왼쪽) 방향에서는 오른쪽에 배치됩니다.
  • after(of: UIView): LTR 방향에서 보기는 지정된 뷰의 오른쪽에, RTL 방향에서는 왼쪽에 배치됩니다.
  • left(of: UIView): 지정된 뷰의 왼쪽에 뷰를 배치합니다.
  • right(of: UIView): 지정된 뷰의 오른쪽에 뷰를 배치합니다.

다른 뷰 사이 레이아웃

  • horizontallyBetween(: UIView, and: UIView): 지정된 두 뷰 사이에 뷰를 수평으로 배치
  • verticallyBetween(: UIView, and: UIView): 지정된 두 보기 사이에 세로 보기를 배치

정렬이 있는 다른 보기 사이의 레이아웃

  • horizontallyBetween(: UIView, and: UIView, aligned: VerticalAlign)
  • verticallyBetween(: UIView, and: UIView, aligned: HorizontalAlign)

제약조건(anchor)

  • 그림으로 대체

너비, 높이 및 크기

  • width(또는 height)(:CGFloat): 뷰의 너비를 픽셀로 지정
  • width(또는 height)(of: UIView): 참조된 뷰의 높이와 일치하게 설정
  • width(또는 height)(N%): 뷰의 너비와 높이를 픽셀(또는 슈퍼 뷰의 백분율)로 지정. 값은 음수가 아니여야 한다.

크기조정 메서드

  • sizeToFit()
  • sizeToFit(: FitType): 매개변수 값에 따라 보기의 너비 또는 높이를 조정함.

최소 및 최대 너비 또는 높이를 설정하는 메서드

  • minWidth(또는 minHeight)(:CGFloat)
  • minWidth(또는 minHeight)(:Percent)
  • maxWidth(또는 maxHeight)(:CGFloat)
  • maxWidth(또는 maxHeight)(:Percent)

여백

  • CSS와 유사한 방식
  • marginTop,left,bottom,right: 상단 여백을 픽셀 또는 슈퍼뷰 높이의 백분율로 설정 >> 퍼센트도 가능함.
  • marginStart, marginEnd: 시작, 종료 여백을 설정

📐 Flexlayout 연산자

  • Direction: 주축을 설정하여 flex 아이템이 플렉스 컨테이너에 어떻게 배치될지 결정, column, columnReverse, row, rowReverse 값을 가질 수 있다.
  • JustifyContent: 플렉스 컨테이너의 주축을 따라 플렉스 아이템이 어떻게 배치될지 결정, start, end, center, spaceBetween, spaceAround, spaceEvenly 값을 가질 수 있다.
  • AlignItems: 교차 축을 따라 플렉스 아이템이 어떻게 배치될지 결정, stretch, start, end, center, baseline 값을 가질 수 있다.
  • AlignSelf: 교차 축에서 자식 아이템이 어떻게 배치될지 결정, 이 속성은 부모의 alignItems를 무시한다. auto, stretch, start, end, center, baseline 값을 가질 수 있다.
  • Wrap: 플렉스 컨테이너가 단일 행 또는 여러 행을 가지도록 설정, noWrap, wrap, wrapReverse 값을 가질 수 있다.
  • AlignContent: 플렉스 컨테이너의 교차 축에서 플렉스 라인이 어떻게 배치될지 결정, start, end, center, stretch, spaceBetween, spaceAround 값을 가질 수 있다.
  • LayoutDirection: 플렉스 컨테이너의 레이아웃 방향을 제어, LTR(왼쪽에서 오른쪽)과 RTL(오른쪽에서 왼쪽) 언어를 지원. 이 값을 설정하면 start 또는 end 속성을 사용하여 뷰를 위치시키면서 언어에 따른 스크린의 왼쪽 또는 오른쪽에 배치될지 고려할 필요가 없다.

📚 참고 자료