FlexLayout (1)

안녕하세요. 그린입니다🟢

이번 포스팅에서는 FlexLayout에 대해 학습해보려합니다!

이 주제는 어느정도 범위가 커서 조금 나눠서 해보려해요!

이번 포스팅에서는 어떤건지 소개와 왜 사용되는지 서론같은 느낌 그리고 나아가 기초적으로는 어떻게 사용되는지 해보겠습니다🙌

 

뷰 드로잉 방식으로 어떤걸 채택하시나요?

새로 앱을 만들때 뷰를 어떻게 그릴지에 대한 고민은 항상 있습니다.

SwiftUI를 쓸지 UIKit으로 사용할지 뭐 그런 당연한 고민..?

저는 기준을 미니멈 타겟이 어떻게 되느냐를 우선적으로 기준을 삼습니다.

SwiftUI를 써보면서 굉장히 선언형으로 직관적이여서 쓰기 편하고 추후 동료가 팔로업 하기에도 거의 러닝커브없이 이해하기 좋았어요.

다만 제가 판단하기로는 SwiftUI를 정말 무리없이 원하는 구현처럼 에러 없이 사용하려면 최소 iOS 14.5 이상의 타겟이 필요했습니다🥲

네비게이션 버그라던지 기본적으로 제공해주는 스텝퍼와 같은 내장 API들에 대해 정상적이지 않더라구요.

아마도 나온지 얼마 안되서 한창 발전하고 있어서일지 몰라요..!

무튼, 그래서 결국 미니멈 타겟이 낮다는 가정하에는 SwiftUI를 사용할 수 없잖아요?

그럴때 UIKit으로만 구현하기엔 오토레이아웃을 잡는것도 일이고 추후 동료가 팔로업할때 이해하기에 많은 노력이 필요합니다.

이에 찾아보다 FlexLayout이 하도 핫하다고 하길래 트라이...😁

 

FlexLayout?

FlexLayout은 SwiftUI처럼 간결하고 직관적이면서 연결 가능한 구문을 제공하는 고도로 최적화된 뷰 구현 방식이라고 합니다.

제가 학습하며 느껴졌던건 완전한 SwiftUI까지는 아니지만 UIKitPlus같은 느낌이 컸습니다!

 

FlexLayout의 장점

• Flexbox 레이아웃은 빠르고 단순합니다.
• 구문이 간결하고 체이닝을 해서 손쉽게 사용할 수 있습니다.
• 수동 레이아웃(UIStackView 등)보다 월등히 빠릅니다.
• 코드 구조가 flexbox 구조와 동일해 코드 자체를 이해하기 쉽고 수정이 용이합니다. (추후 사용법을 보면 이해가 가실거에요!)
• LTR / RTL 지원을 합니다.

FlexLayout 요구사항

• iOS 8.0+
• Xcode 8.0+ / Xcode 9.0+
• Swift 3.0+ / Swift 4.0

FlexLayout 설치

코코아팟, SPM, 카르타고 모두 가능합니다!

 

FlexLayout & PinLayout

FlexLayout의 소개를 보면 꼭 PinLayout의 소개도 같이해요.

그럼 두 라이브러리는 어떤 연관관계가 있는걸까요?🤔

이미지에서 왼쪽이 FlexLayout 오른쪽이 PinLayout입니다! (그림 귀엽..)

보통 대부분 두 라이브러리가 같이 사용됩니다.

PinLayout에서 더 간단하고 쉽게 사용되는 뷰를 위해서 FlexLayout이 나왔어요.

PinLayout은 CSS 절대 위치 지정 방식을 차용해 만든 레이아웃 프레임워크입니다.

그럼으로 더 세밀한 뷰 제어 및 애니메이션 구현에 탁월해요!

한번에 하나의 뷰를 레이아웃해 전체적 제어를 제공합니다.

물론 두가지 모두 뷰 레이아웃을 잡을 수 있습니다.

정리하자면 PinLayout으로 전부 다 레이아웃할 수 있지만 PinLayout은 정말 많은 뷰를 레이아웃 해줘야하기에

간단한 뷰에 대해서 레이아웃할때는 FlexLayout이 적절합니다.

PinLayout의 컨테니어 내부에 FlexLayout으로 레이아웃된 뷰를 저장할 수 도 있고 그 반대도 가능해요!

고로 적절한 방식을 택해 잘 사용하라고 하네요😁

 

FlexLayout 성능

FlexLayout은 UIKit에서 제공해주는 UIStackView보다 성능이 훨씬 좋습니다!

거의 수치를 보면 8~12배가 더 빠릅니다.

이렇게 빠른 이유를 추측해봤을때, UIStackView는 기본적으로 뷰를 그려주는 방식을 메인 스레드에서 해줍니다.

이렇게 되면 당연히 속도가 느리게 되니 PinLayout과 FlexLayout은 백그라운드에서 그려주도록 해줬기에 성능이 훨씬 뛰어납니다.

 

FlexLayout 사용하기

이번 포스팅에서는 서론에 말했듯 전체적인 메서드들을 사용해보는건 추후 포스팅으로 미뤄두고 기본적인 구조와 사용법을 익혀볼께요!

우선 FlexLayout에서 버튼, 라벨, 이미지 등과 같은 요소들은 Flexbox라고 칭합니다.

이 Flexbox들을 담을 Container를 지정해주고 레이아웃을 각자 잡아줍니다.

그럼 스텝별로 한번 보시죠!

 

1. 컨테이너 설정

flexbox가 담길 Container를 생성하고 flexbox 구조를 초기화 합니다. (추후 변경 가능)

fileprivate let rootFlexContainer = UIView()

init() {
 super.init(frame: .zero)
 addSubview(rootFlexContainer)

 rootFlexContainer.flex.direction(.column).padding(12).define { (flex) in
    flex.addItem().direction(.row).define { (flex) in
        flex.addItem(imageView).width(100).aspectRatio(of: imageView)
            
        flex.addItem().direction(.column).paddingLeft(12).grow(1).define { (flex) in
            flex.addItem(segmentedControl).marginBottom(12).grow(1)
            flex.addItem(label)
        }
    }
    flex.addItem().height(1).marginTop(12).backgroundColor(.lightGray)
    flex.addItem(bottomLabel).marginTop(12)
  }
}

(위 코드는 공식 깃헙 FlexLayout 리드미를 참고했습니다!)

위와 같이 rootFlexContainer라는 UIView 타입의 컨테이너를 만들어줍니다.

그리고 addSubview로 해당 컨테이너를 뷰에 올려줍니다.

그리고 바로 아래 코드들이 컨테이너 내 flexbox를 초기화하고 요소를 배치해주는 역할을 한다고 보면됩니다!

flex.define을 사용해 클로저 안에서 구조화 해서 만듭니다🙌

 

2. 컨테이너 레이아웃

컨테이너를 만들고 뷰에 올렸으면 이 컨테이너와 담긴 Flexbox들의 레이아웃을 잡아줘야합니다.

override func layoutSubviews() {
  super.layoutSubviews() 
  
  rootFlexContainer.pin.top().left().width(100%).marginTop(topLayoutGuide)
  rootFlexContainer.flex.layout(mode: .adjustHeight)
}

우리가 흔히 알고 있는 서브뷰를 올리는 방식인 layoutSubviews 메서드 혹은 viewDidLayoutSubviews 메서드를 이용해 

오버라이드해줍니다.

여기서 PinLayout이 사용되는데요!

pin을 이용해서 전체적 틀인 컨테이너의 레이아웃을 만들어줍니다.

그 다음에 flex의 layout 메서드를 사용해서 flexbox에 담긴 요소들의 레이아웃을 잡아주면 됩니다😀

 

마무리

정말 간단하게 이정도로 FlexLayout이 뭔지 소개와 왜 쓰는지 이유를 알아봤습니다.

그리고 더 간단하게 이렇게 쓰이는 구조다~ 이렇게 만들어준다~ 정말 찐으로 기본적인 사용법을 학습했습니다!

아직 갈길이 멉니다..!

FlexLayout(1)이라고 한것처럼 곧 2, 3을 통해 direction, padding등 뷰를 그려줄때의 옵션 요소들에 대해 하나씩 부셔볼께요😁

 

[참고자료]

https://github.com/layoutBox/FlexLayout#installation

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