7$/$ ӣթഅ 9DPEF1SFWJFXT ఋ׮о*#ܳߡܽ੉ਬ

7$/$ ӣթഅ 9DPEF1SFWJFXT ఋ׮о*#ܳߡܽ੉ਬ*#হ੉ѐߊೞӝ

Xcode Previews Xcode Previews in UIKit Problems with Storyboard, XIB UI programming using Xcode Previews $POUFOUT

Xcode Previews

• Xcode 11 • MacOS Catalina 9DPEF1SFWJFXT

#BDLHSPVOE ` Mastering Xcode Previews @WWDC 2019

#BDLHSPVOE Mastering Xcode Previews @WWDC 2019

#BDLHSPVOE Mastering Xcode Previews @WWDC 2019

• Configuring • Building • Running • Navigating • Getting to the state #BDLHSPVOE

#BDLHSPVOE Mastering Xcode Previews @WWDC 2019

#BDLHSPVOE Mastering Xcode Previews @WWDC 2019

#BDLHSPVOE Mastering Xcode Previews @WWDC 2019

Time consuming

9DPEF1SFWJFXT Mastering Xcode Previews @WWDC 2019

struct PriceView_Preview: PreviewProvider { static var previews: some View { PriceView(price:…) .previewLayout(.sizeThatFits) .environment(\.colorScheme, .dark) } }

4BNQMF

Demo

Previews ز੘ ਗܻ

• 2 Main Components • A preview build • Xcode extension ( live view ) 9DPEF1SFWJFXT

• Normal Build • Xcode scheme, build settings ਸ ٮܰח ੌ߈੸ੋ ࠽٘ • Preview Build • ୶о compile optionҗ ೣԋ normal buildܳ ഛ੢ೠ ߹ب੄ ࠽٘ 9DPEF1SFWJFXT

• Xcode build artifact ী normal ࠽٘৬ ೣԋ ઓ੤ • Object file, artifact ҕਬ • Additional Options • Interactive UI ࣻ੿ / dynamic behavior ೲਊ • ਗࠄ ౵ੌ ৻ ୶о੸ੋ ࣗझ ౵ੌ ࢤࢿ • ਗࠄ ࣗझ ௏٘ܳ ࠗ࠙੸ਵ۽ UIܳ ࣻ੿ೡ ࣻ ੓ח ௏٘۽ ߸҃ by method swizzling 1SFWJFX#VJME

1SFWJFX#VJME

struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } }

@_private(sourceFile: "ContentView.swift") import LetSwiftPreview import SwiftUI import SwiftUI extension ContentView_Previews { @_dynamicReplacement(for: previews) private static var __preview__previews: some View { #sourceLocation(file: "/Users/nate/Documents/samples/SwiftUI/ LetSwiftPreview/LetSwiftPreview/LetSwiftPreview/ContentView.swift", line: 19) AnyView(__designTimeSelection(ContentView(), "#40077.[2].[0].property.[0]. [0]")) #sourceLocation() } } typealias ContentView = LetSwiftPreview.ContentView typealias ContentView_Previews = LetSwiftPreview.ContentView_Previews

• Xcodeо пࢤࢿػ ౵ੌਸ ة݀੸ੋ dynamic library۽ ࠽٘ • library -> Preview applicationਵ۽ ۽٘ 9DPEF1SFWJFXT

Xcode Previews in UIKit

• UIViewController ب Previews ࢎਊ оמ • UIViewControllerRepresentable protocol 9DPEF1SFWJFXTJO6*,JU func makeUIViewController(context: Self.Context) -> Self.UIViewControllerType func updateUIViewController( _ uiViewController: Self.UIViewControllerType, context: Self.Context )

• UIView ب Previews ࢎਊ оמ • UIViewRepresentable protocol 9DPEF1SFWJFXTJO6*,JU func makeUIView(context: Self.Context) -> Self.UIViewType func updateUIView( _ uiView: Self.UIViewType, context: Self.Context )

• Previews ীࢲ ࢎਊೞӝ ਤೠ protocol • UIKit -> SwiftUI • SwiftUI ܳ ࢎਊೡ ࣻ ੓ח ജ҃ীࢲ݅ ੉ਊ оמ 6*7JFX3FQSFTFOUBCMF

• Debug ࠽٘ ࢸ੿ ߸҃ • iOS Deployment target : iOS13 • canImport, @available 9DPEF1SFWJFXTJ04

#if canImport(SwiftUI) && DEBUG import SwiftUI @available(iOS 13.0, *) struct PriceView_Preview: UIViewRepresentable, PreviewProvider { let price: Price func makeUIView(context: Self.Context) -> PriceView { PriceView().also { $0.price = price } } func updateUIView(_ view: PriceView, context: Self.Context) { … } static var previews: some View { PriceView_Preview(price: …) } } #endif

Demo

Problems with Storyboard, XIB

• XML • ੍Ѣա ࣻ੿ೡ ࣻ হח XML • ࣻ ߔ઴ ੉࢚੄ ௾ ౵ੌ 3FBEBCJMJUZ

3FBEBCJMJUZ

• XML • ੍Ѣա ࣻ੿ೡ ࣻ হח XML • ࣻ ߔ઴ ੉࢚੄ ௾ ౵ੌ • э਷ Viewܳ ࣻ੿ೞݶ? • PR 3FBEBCJMJUZ

No content

• ౵ੌ੉ ੼੼ ழ૗ • যו࢜ ࣻभ ѐ੄ झ௼ܽ੉ ೞա੄ ౵ੌী.. • Source control ߄Ե ٸ݃׮ 4UPSZCPBSET

• IBח Swift ௏٘ܳ ੜ ݽܴ(vice versa) • IBOutlet, IBAction ਸ ా೧ োѾ • IBীࢲ Viewܳ ૑ਕب ௏٘ח Ӓ؀۽… • Cell in TableView ীࢲ identifier۽ оઉয়ӝ (Typecast ೙ࣻ ) 4XJGU*OUFSGBDFCVJMEFS

• Color asset ਵ۽ ࢸ੿ೠ ࢝੉ viewDidLoad, viewWillAppear, awakeFromNib ࣻ੿ ࠛо • Callstack • viewDidLoad(viewWillAppear) -> traitCollectionDidChanged ->
 ੿੄ػ asset color۽ trait collection ੸ਊ *OUFSGBDFCVJMEFSCVHT

UI programming using Xcode Previews

• Visualization • Image > Text • Views, Constraints ҳઑ ౵ঈ 1SPHSBNNBUJDBMMZ6*

• Verbose • Complex • Difficult to read 1SPHSBNNBUJDBMMZ6*

header.translatesAutoresizingMaskIntoConstraints = false let cn1 = NSLayoutConstraint(item: header, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 20) let cn2 = NSLayoutConstraint(item: header, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: -20) let cn3 = NSLayoutConstraint(item: header, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 60) let cn4 = NSLayoutConstraint(item: header, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 20) view.addConstraints([cn1, cn2, cn3, cn4])

• Layout libraries • PureLayout, Cartogrphy, Snapkit … 1SPHSBNNBUJDBMMZ6*

header.snp.makeConstraints { maker in maker.leading.trailing.top.equalToSuperview().inset(20) maker.height.equalTo(60) }

• ૒ҙ੸ਵ۽ ചݶਸ ੉೧ೞӝ য۰਑ 1SPHSBNNBUJDBMMZ6*

blackView.snp.makeConstraints { make in make.center.equalTo(view) make.size.equalTo(CGSize(width: 100, height: 100)) } redView.snp.makeConstraints { make in make.top.equalTo(blackView.snp.bottom).offset(20.0) make.right.equalTo(blackView.snp.left).offset(-20.0) make.size.equalTo(CGSize(width: 100, height: 100)) } yellowView.snp.makeConstraints { make in make.top.equalTo(blackView.snp.bottom).offset(20.0) make.left.equalTo(blackView.snp.right).offset(20.0) make.size.equalTo(CGSize(width: 100, height: 100)) } blueView.snp.makeConstraints { make in make.bottom.equalTo(blackView.snp.top).offset(-20.0) make.left.equalTo(blackView.snp.right).offset(20.0) make.size.equalTo(CGSize(width: 100, height: 100)) } greenView.snp.makeConstraints { make in make.bottom.equalTo(blackView.snp.top).offset(-20.0) make.right.equalTo(blackView.snp.left).offset(-20.0) make.size.equalTo(CGSize(width: 100, height: 100))

• ૒ҙ੸ਵ۽ ചݶਸ ੉೧ೞӝ য۰਑ • View ҳઑܳ ౵ঈೞӝ ਤ೧ ੹୓ ௏٘ ౵ঈ ೙ਃ • View Hierarchy ↑ ➡ Time ↑ • Layout library੄ ೠ҅ 1SPHSBNNBUJDBMMZ6*

• makeConstraints: э਷ ࠗݽܳ ыח Views݅ оמ • addSubview / makeConstraints ௏٘ ܻ࠙ • Nested ҳઑੌ ٸ children ਸ ݢ੷ ੘ࢿ 4OBQ,JU

IBKit https://github.com/glwithu06/IBKit

• Visualization • ૒ҙ੸ੋ ௏٘ ੉೧ *#,JU

• Visualization -> Xcode Previews • ૒ҙ੸ੋ ௏٘ ੉೧ -> Declarative झఋੌ *#,JU

UIView() { UIView().identifier(“upper") .backgroundColor(.cyan) .makeConstraints { $0.top.left.right.equalToSuperview() $0.height.equalTo(30) } UIView().identifier("lower") .backgroundColor(.blue) .makeConstraints { $0.top.equalTo($0.views.upper.bottom) $0.bottom.left.right.equalToSuperview() $0.height.equalTo(30) } } .identifier(“yellow") .assign(to: \.container, on: self)

Demo

• UIViewRepresentable • UIViewControllerRepresentable • Preview(root:) 9DPEF1SFWJFXT

Preview sample

• @_functionBuilder • Swift5.1 private feature %FDMBSBUJWFTUZMF

@_functionBuilder struct ViewBulder { static func buildBlock() -> Builder { BuilderImpl(children: []) } static func buildEither(first: UIView) -> Builder { BuilderImpl(children: [first]) } static func buildEither(second: UIView) -> Builder { BuilderImpl(children: [second]) } static func buildIf(_ view: UIView?) -> Builder { BuilderImpl(children: view.map { [$0] } ?? []) } static func buildBlock(_ views: UIView...) -> Builder { BuilderImpl(children: views) } … }

• SnapKit ӝ߈ Layout
 • addSubview -> SnapKit.makeConstraints • Dynamic member lookup -BZPVU func makeConstraints(_ closure: @escaping (ConstraintMaker) -> Void) -> Self

.makeConstraints { $0.left.right.equalToSuperview().inset(50) $0.top.equalTo($0.views.description.bottom).offset(30) $0.height.equalTo(30).priority(ConstraintPriority.low) }

• KeyPath Binding "TTJHOWJFXT func assign( to keyPath: ReferenceWritableKeyPath, on object: Root ) -> Self

Wrap up

• PreviewProvider protocol • Group / ForEach • previewLayout / previewDevice / environment • Development Assets • Pinning 9DPEF1SFWJFXT

• Preview Build • Derived source code • Preview library 9DPEF1SFWJFXT

• UIViewControllerRepresentable • UIViewRepresentable • makeUIView / updateUIView • canImport(SwiftUI) 9DPEF1SFWJFXTJO6*,JU

• Readability • Maintenance (Storyboard) • Swift <-> Interface Builder • Interface Builder bugs 4UPSZ#PBSE 9*#

• Visualization • Intuitive • IBKit 1SPHSBNNBUJDBMMZ6*

8FsSFIJSJOH

No content