간단하게 언급해보자면 FlexLayout 은 UIStackView 을 개선한 것이고, PinLayout 은 auto layout 이 아닌 방법으로 UIView 및 CALayer 를 레이아웃할 수 있습니다.
그래서 UIStackView 처럼 안에 담을 아이템들을 FlexLayout 으로 설정하고 root container 가 되는 뷰를 PinLayout 으로 배치하는 것으로 함께 사용할 수 있습니다.
🚨참고사항
레이아웃에 대한 주석을 포함한 코드입니당. 프로젝트에는 코드의 가독성이 떨어진다고 판단해서 주석을 삭제했습니다.
아래표시한 파란색 부분이 rootFlexContainer 입니다.
import UIKit
import FlexLayout
import PinLayout
class UpdateViewController: UIViewController {
// MARK: - Components
// ...
// MARK: - View Life Cycle
override func viewDidLoad() {
super.viewDidLoad()
// ...
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// ✅ PinLayout 으로 flexbox container 의 레이아웃을 지정.
rootFlexContainer.pin
.vCenter() // vertical 중심 정렬
.hCenter() // horizontal 중심 정렬
.height(487).width(327)
/*
// 너비 대비 비율로 높이를 지정할 수도 있습니다.
rootFlexContainer.pin.horizontally(24) // left(24).right(24) 과 동일
.vCenter()
.height(rootFlexContainer.frame.width / 327 * 487)
*/
// ✅ Flex 메서드 layout() 을 사용하여 flexbox 의 자식 레이아웃을 지정.
rootFlexContainer.flex.layout()
}
}
rootFlexContainer 안의 아이템들을 UIStackView 처럼 사용한다고 생각하면 됩니당.
// MARK: - Layout
extension UpdateViewController {
private func setLayout() {
view.addSubview(rootFlexContainer)
// ✅ 목표: updateCardImageView 는 위에, updateButton 는 맨 아래에서 시작.
rootFlexContainer.flex.direction(.column)
// 첫 번째 아이템은 시작, 마지막 아이템은 끝에 위치하도록 item1, item2 를 감싸고, item3, item4 를 감싸는 아이템 계층 두 개를 추가함.
.justifyContent(.spaceBetween)
.define { flex in
// 1
flex.addItem().direction(.column).define { flex in
// 📌 item1
// ✅ 목표: updateCardImageView 를 중앙정렬.
flex.addItem().direction(.column).alignItems(.center).define { flex in
flex.addItem(updateCardImageView).marginTop(20)
// 아이템의 크기를 유지(기본값)
// .grow(0)
// ✅ 목표: rootFlexContainer 에 대해서 우측상단에 위치.
// .absolute 을 사용하여(position(.relative)가 기본값) parent 와 관련하여 절대적으로 위치함.
flex.addItem(cancelButton).position(.absolute).top(20).right(20)
}
// 📌 item2
flex.addItem(updateContentLabel).marginTop(16).marginBottom(18).marginHorizontal(16)
}
// 2
// 🚨 아래의 트러블 슈팅2 를 거쳐서 수정됩니다.
flex.addItem().direction(.column).define { flex in
// 📌 item3
// ✅ 목표: updateButton 을 기준으로 bottom 간격을 가짐. checkBoxButton 와 cehckLabel 이 수평 중앙 정렬.
flex.addItem().direction(.row).alignItems(.center).marginBottom(20).define { flex in
flex.addItem(checkBoxButton).marginLeft(16).size(16)
flex.addItem(checkLabel).marginLeft(2)
}
// 📌 item4
flex.addItem(updateButton).marginBottom(16).marginHorizontal(17)
}
}
}
}
🌴 PR 요약
🌱 작업한 브랜치
381
🌱 작업한 내용
🚨참고사항
📸 스크린샷
📮 관련 이슈