[iOS] FlexLayout과 PinLayout 사용 방법

https://github.com/layoutBox/FlexLayout

GitHub - layoutBox/FlexLayout: FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementati

FlexLayout

UIStackView를 개선한 컴포넌트로 속도향상, 기능추가, 선언형 프로그래밍이 가능하다.

PinLayout과 같이 사용된다.

 

FlexLayout은 UIStackView처럼 axis를 정하고 alignment, distribution을 설정하는등 UIStackView와 동일하게 사용된다.

 

그래프의 막대가 짧을수록 성능이 빠른 의미이다.

 

사용

1. flex container 생성

import UIKit
import FlexLayout
import PinLayout

class ViewController: UIViewController {
    // root뷰가 될 컨테이너뷰
    let rootFlexContainer: UIView = UIView()
	
    // flexContainer 내부에 사용될 컴포넌트들
    let label1 = UILabel().then {
        $0.text = "label1"
        $0.backgroundColor = .systemRed
    }
    let label2 = UILabel().then {
        $0.text = "label2"
        $0.backgroundColor = .systemGreen
    }
    let label3 = UILabel().then {
        $0.text = "label3"
        $0.backgroundColor = .systemBlue
    }
    
}

 

2. addItem으로 구성요소를 추가

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        // rootContainer 추가
        view.addSubview(rootFlexContainer)
        
        // 요소를 추가해줌. StackView의 addArrangedSubView()와 같은 역할
        rootFlexContainer.flex.direction(.column).define { flex in
            flex.addItem(label1)
            flex.addItem(label2)
            flex.addItem(label3)
        }
    }

 

3. flexContainer의 pinlayout 잡고 children의 레이아웃을 잡아준다.

flexContainer의 위치를 잡아준다.

* viewDidLayoutSubviews나 layoutSubview같은 곳에서 pin을 가지고 flexContainer의 레이아웃을 고정한다.

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        
        // pin으로 Container의 layout을 잡아준다.
        rootFlexContainer.pin.all(view.pin.safeArea)
        
        // Container의 children의 레이아웃을 잡아준다.
        rootFlexContainer.flex.layout()
    }

 

결과 

 

 

FlexLayout의 활용

direction(방향설정)

• StackView의 axis와 같은 의미
• 디폴트는 column

 

rootFlexContainer.flex.direction(.column).define { flex in
            flex.addItem(label1)
            flex.addItem(label2)
            flex.addItem(label3)
        }

 

 

padding

• Container와 안에 들어갈 contentView들 사이의 inset값을 의미한다.
• padding(15)는 top, left, bottom, right 모두 15를 넣은것과 동일하다.
• 각각 따로 지정하는 것도 가능하다.

        rootFlexContainer.flex.padding(15).define { flex in
            flex.addItem(label1)
            flex.addItem(label2)
            flex.addItem(label3)
        }

 

 

addItem().width().height()

• 특정 뷰의 높이와 너비를 간편하게 설정가능

rootFlexContainer.flex.padding(15).define { flex in
            flex.addItem(label1).width(30)
            flex.addItem(label2).height(50)
            flex.addItem(label3).width(90)
        }

 

 

 

margin (여백)

• top() - 컨테이너기준, 이를 사용하면 하단 뷰가 쌓이지 않고 덮어 씌워질 수 있다.
• marginTop() - 바로 위 뷰의 bottom
• paddingTop() - 내부 여백

 

 

정렬(alignItems, justifyContent)

alignItems

• 안에 들어가는 뷰들의 정렬
• alignItems를 사용하면 내부 Content의 frame크기가 intrinsicContentSize로 축소됨.
• 뷰들이 채워지는 방향과 반대로 정렬된다.

rootFlexContainer.flex.padding(15).alignItems(.center).define { flex in
            flex.addItem(label1)
            flex.addItem(label2)
            flex.addItem(label3)
        }

 

 

justifyContent

• 수평, 수직 정렬

        rootFlexContainer.flex.padding(15).justifyContent(.center).define { flex in
            flex.addItem(label1)
            flex.addItem(label2)
            flex.addItem(label3)
        }