SwiftLayout을 소개합니다

선언형 문법으로 가독성 높은 UIKit 코드 작성하기 SwiftLayout을 소개합니다. 이희종
aiden.h, 최광훈 jay.choi 카카오 if(kakao)2022 Copyright 2022. Kakao Corp. All rights reserved. Redistribution or public display is not permitted without written permission from Kakao.

UIKit SwiftUI 아직까진 약방의 감초? 아직은 시기상조?

- Interface Builder - 유지보수가 어렵다. - Con fl ilct
발생시 해결이 쉽지 않다. - Code - 명령형 코드로 화면의 형태를 파악하기 어렵다. - 분기처리로 코드의 파편화가 심해질 수 있다. UIKit

선언적인 구문으로 UIKit을?

SwiftLayout A swifty way to use UIKit

View Thumbnail ContentView Title Description BottomView

@LayoutBuilder var layout: some Layout { view.sublayout { thumbnailImageView contentView.sublayout
{ titleLabel descriptionLabel menuDetailBottomView } } } View Thumbnail ContentView Title Description BottomView

@LayoutBuilder var layout: some Layout { view.sublayout { thumbnailImageView contentView.sublayout
{ titleLabel descriptionLabel menuDetailBottomView } } }

@LayoutBuilder var layout: some Layout { view.sublayout { thumbnailImageView.anchors {
... } contentView.sublayout { titleLabel descriptionLabel menuDetailBottomView } } }

Anchors.top.equalToSuper() } contentView.sublayout { titleLabel descriptionLabel menuDetailBottomView } } }

Anchors.top.equalToSuper(constant: 5) } contentView.sublayout { titleLabel descriptionLabel menuDetailBottomView } } }

Anchors.top.equalTo(view) } contentView.sublayout { titleLabel descriptionLabel menuDetailBottomView } } }

Anchors.top.equalTo(view.safeAreaLayoutGuide) } contentView.sublayout { titleLabel descriptionLabel menuDetailBottomView } } }

Anchors.bottom.equalTo(contentView, attribute: .top, constant: -20) } contentView.sublayout { titleLabel descriptionLabel menuDetailBottomView } } }

Anchors.height.equalTo(thumbnailImageView, attribute: .width) Anchors.cap(self.view.safeAreaLayoutGuide, offset: 20) } contentView.anchors { Anchors.top.equalTo(thumbnailImageView, attribute: .bottom, constant: 20) Anchors.shoe(self.view.safeAreaLayoutGuide, offset: 20) }.sublayout { titleLabel.anchors { Anchors.top Anchors.leading } descriptionLabel.anchors { Anchors.top.equalTo(titleLabel, attribute: .bottom, constant: 5) Anchors.horizontal() } menuDetailBottomView.anchors { Anchors.shoe() } } } }

Activate Layout

final class MenuDetailViewController: UIViewController { ... @LayoutBuilder var layout: some
Layout { ... } override func viewDidLoad() { super.viewDidLoad() // Activate Layout } ... }

Layout { ... } override func viewDidLoad() { super.viewDidLoad() // Activate Layout self.layout.finalActive() } ... }

Layout { ... } var activation: Activation? override func viewDidLoad() { super.viewDidLoad() // Activate Layout self.activation = self.layout.active() } ... }

Layout { ... } var activation: Activation? override func viewDidLoad() { super.viewDidLoad() // Activate Layout self.activation = self.layout.active() } func someMethod() { self.activation = self.layout.update(fromActivation: self.activation) } ... }

Layout { ... } var activation: Activation? override func viewDidLoad() { super.viewDidLoad() // Activate Layout self.activation = self.layout.active() } func someMethod() { self.activation?.deactive() } ... }

Layout { ... } var activation: Activation? override func viewDidLoad() { super.viewDidLoad() // Activate Layout self.activation = self.layout.active() } func someMethod() { self.activation = nil } ... }

sublayout(_ :) anchors(_ :) Activate Layout

@LayoutBuilder var layout: some Layout { self.sublayout { toppingTitleLabel.anchors {
... } showToppingButton .config { $0.setImage(.init(systemName: isShowTopping ? "chevron.down": "chevron.up"), for: .normal) } .anchors { ... } if isShowTopping { toppingStackView .anchors { ... } .sublayout { ... } } orderButton.anchors { if isShowTopping { Anchors.top.equalTo(toppingStackView, attribute: .bottom, constant: 15) } else { Anchors.top.equalTo(toppingTitleLabel, attribute: .bottom, constant: 15) } ... } } }

final class MenuDetailBottomView: UIView { ... var activation: Activation? @LayoutBuilder
var layout: some Layout { ... } var isShowTopping: Bool = false override init(frame: CGRect) { super.init(frame: frame) self.activation = self.layout.active() } ... }

final class MenuDetailBottomView: UIView { ... var activation: Activation? @LayoutBuilder
var layout: some Layout { ... } var isShowTopping: Bool = false { didSet { self.activation = self.layout.update(fromActivation: self.activation!) } } override init(frame: CGRect) { super.init(frame: frame) self.activation = self.layout.active() } ... }

final class MenuDetailBottomView: UIView, Layoutable { ... var activation: Activation?
@LayoutBuilder var layout: some Layout { ... } var isShowTopping: Bool = false { didSet { self.activation = self.layout.update(fromActivation: self.activation!) } } override init(frame: CGRect) { super.init(frame: frame) self.activation = self.layout.active() } ... }

@LayoutBuilder var layout: some Layout { ... } var isShowTopping: Bool = false { didSet { self.sl.updateLayout() } } override init(frame: CGRect) { super.init(frame: frame) self.sl.updateLayout() } ... }

@LayoutBuilder var layout: some Layout { ... } @LayoutProperty var isShowTopping: Bool = false override init(frame: CGRect) { super.init(frame: frame) self.sl.updateLayout() } ... }

@LayoutBuilder var layout: some Layout { ... } @AnimatableLayoutProperty(duration: 0.5) var isShowTopping: Bool = false override init(frame: CGRect) { super.init(frame: frame) self.sl.updateLayout() } ... }

Control fl ow Layoutable LayoutProperty

SwiftLayout A swifty way to use UIKit

냄새 없는 코드 낮은 진입장벽 간결한 문법 라이브러리의 방향성

Pull Request Testing and Refactoring

- github https:/ /github.com/ioskrew/SwiftLayout - sample - source https:/ /github.com/ioskrew/SwiftLayout
- Sample SwiftLayout

SwiftLayout을 소개합니다

SwiftLayout을 소개합니다

More Decks by kakao

Other Decks in Programming

Featured

Transcript