[UIKit] FlexLayout이란

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의 대체이자 확장판