iOS/UIKit

[UIKit] FlexLayout이란

Dev_Ted 2025. 7. 31. 00:05

FlexLayout

FlexLayout은 UIStackView에서 발전한 레이아웃 방법으로, 사용하기 쉬우면서 성능이 우수한 라이브러리입니다.

flex container라는 부모 컨테이너 안에 flex items라는 자식들을 포함시켜 item을 정렬하는 구조입니다.

 

특징

  • Flexbox의 레이아웃 잡는 방식은 간단하고 빠름
  • main axis와 cross axis를 바탕으로 정렬 방향이 정의되며, direction을 통해 정의됨


Creation, modification, definition of flexbox items

addItem(:UIView) → Flex

  • UIView를 subview로 추가한 뒤, flexbox를 사용 가능하게 만듦

define(_ closure: (_ flex: Flex) -> Void)

  • flexbox 구조와 일치하도록 코드를 구조화하는 메서드
  • 서브뷰 계층과 레이아웃 속성을 선언
    • 뷰의 flex 속성을 정의하는 것이지, 레이아웃을 잡는 것은 아님
  • 다른 flex item과 container를 넣을 때 사용될 수 있음
  • define의 장점
    • 소스 코드 구조와 flexbox 구조가 일치하기 때문에 이해/수정하기 쉬움
    • HTML과 React Native가 정의하는 방법과 구조가 비슷함
    • define 클로저 안에 조건문, 반복문 등 하고 싶은 걸 다 넣을 수 있음
view.flex.addItem().define { flex in
	flex.addItem(imageView).grow(1)
	
	flex.addItem().direction(.row).define { flex in
		flex.addItem(titleLabel).grow(1)
		flex.addItem(priceLabel)
	}
}

flex.view

  • flex item의 UIView에 접근

layout(mode: LayoutMode = . fitContainer)

  • flex container의 자식들을 레이아웃
  • define은 구조를 정의하는 것이고, layout 메서드를 호출해야 실제로 레이아웃을 잡아줌

 

Flexbox containers properties

direction(_: Direction)

  • flex container 안의 item들을 어떻게 정렬할 지 정의
  • Applies to: flex container
  • Values: column / columnReverse / row / rowReverse
  • Default value: column
  • CSS name: flex-direction

justifyContent(_: JustifyContent)

  • main-axis에서 빈 공간을 어떻게 만들어둘 지 정의
  • Applies to: flex containers
  • Values: start / end / center / spaceBetween / spaceAround / spaceEvenly
  • Default value: start
  • CSS name: justify-content

alignItems(_: AlignItems)

  • item들을 corss-axis에서 어떻게 레이아웃할 지 정의
  • Applies to: flex containers
  • Values: stretch / start / end / center / baseline
  • Default value: stretch
  • CSS name: align-items

alignSelf(_: AlignSelf)

  • alignItems를 오버라이드해서 자식들의 정렬 방향을 컨트롤하는 메서드
  • Applies to: flex containers
  • Values: auto / stretch / start / end / center / baseline
  • Default value: auto
  • CSS name: align-self

wrap(_: Wrap)

  • flex container에서 새로운 줄이 어떻게 쌓일 지(stacked)를 결정하는 프로퍼티
    • 기본값은 한 줄이지만, item이 들어왔을 때 새로운 줄에 item이 계속 쌓이게 할 수 있음
  • Applies to: flex containers
  • Values: noWrap / wrap / wrapReverse
  • Default value: noWrap
  • CSS name: flex-wrap

alignContent(_: AlignContent)

  • cross-axis에 여분의 공간이 남아있을 때, flex container의 줄을 정렬하는 프로퍼티
  • justifyContent는 main-axis를 기준으로 정렬
  • 만약 flexbox가 한 줄만 있다면 효과가 없음
  • Applies to: flex containers
  • Values: start / end / center / stretch / spaceBetween / spaceAround / spaceEvenly
  • Default value: start
  • CSS name: align-content

 

Flexbox items properties

grow(_: CGFloat)

  • flex item이 여유 공간을 얼마나 차지할 수 있는지를 정의
  • 0이면 아이템은 고정 크기, >0이면 비율에 따라 여유 공간 분배
    • 예: grow(1)을 모든 아이템에 주면 공간을 균등 분배 grow(2)인 아이템은 grow(1)보다 2배 공간 차지
  • Applies to: flex items
  • Default value: 0
  • CSS name: flex-grow

shrink(_ value: CGFloat)

  • 공간이 부족할 때, 아이템이 얼마나 줄어들 수 있는지를 결정
  • 0이면 줄어들지 않고, >0이면 상대적으로 줄어듦
    • 예: shrink(3)은 shrink(1)보다 3배 빠르게 줄어듦
  • Applies to: flex items
  • Default value: 0
  • CSS name: flex-shrink

basis(_ value: CGFloat?) / basis(_ value: FPercent)

  • grow/shrink 적용 전의 기본 크기를 지정
  • 값이 nil이면 auto로, 뷰의 intrinsic content size를 기준으로 사용
  • 퍼센트도 지원 (FPercent(50%) 같은 방식)
  • Applies to: flex items
  • Default value: 0
  • CSS name: flex-basis

gap(_ value: CGFloat)

  • row/column 사이의 간격을 지정
  • 내부적으로 columnGap, rowGap도 각각 설정 가능
  • CSS 기준과 동일하게 동작
  • Applies to: flex containers
  • CSS name: gap, row-gap, column-gap

isIncludedInLayout(_ value: Bool)

  • 해당 뷰를 Flex 레이아웃에 포함시킬지 여부를 동적으로 제어
  • false로 설정하면 FlexLayout이 해당 뷰를 무시
  • Applies to: flex items

display(_ value: Display)

  • 아이템의 표시 여부를 결정 (숨김 처리 포함)
  • .none은 완전히 제거, .contents는 자식 뷰는 유지
  • Applies to: flex items
  • Values: flex / none / contents
  • CSS name: display

boxSizing(_ value: BoxSizing)

  • width/height가 content 영역만 포함할지, padding/border까지 포함할지 결정
  • Applies to: flex items
  • Values: borderBox (default) / contentBox
  • CSS name: box-sizing

markDirty()

  • FlexLayout은 변경 사항이 있을 때만 레이아웃을 갱신함
  • 수동으로 dirty 플래그를 설정해 레이아웃 강제 갱신 가능
    • 예: UILabel.text 변경 후 레이아웃 재계산 필요할 때
  • Applies to: flex items

sizeThatFits(_ size: CGSize)

  • 주어진 사이즈 내에서 해당 뷰가 Flex 레이아웃될 때의 실제 크기를 반환
  • 동적 높이 계산 시 유용 (height = flexView.sizeThatFits(width).height)
  • Applies to: flex items

intrinsicSize

  • 뷰 자체의 고유 크기를 반환 (frame과 무관)
  • AutoLayout의 intrinsicContentSize와 유사 개념
  • Applies to: flex items

 

한 줄 요약

 

UIStackView의 대체이자 확장판
728x90