Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SwiftUI Layout

SwiftUI Layout

Mike Apurin

June 27, 2022
Tweet

More Decks by Mike Apurin

Other Decks in Technology

Transcript

  1. SwiftUI Layout
    Apurin Mikhail @ YUMEMI.swift #15 ʙWWDC෮शձʙ

    View Slide

  2. ࣗݾ঺հ
    Apurin Mikhail ΞϓϦϯɾϛϋΠϧ
    auramagi
    - ΏΊΈͷiOSΤϯδχΞ

    - WWDC։࠵͔Βͣͬͱன໷ٯసੜ׆Λ΋ͱʹ໭ͤͳ͍

    - ͳΜͰͦΜͳʹॵ͍ͷʁʁ
    auramagi

    View Slide

  3. SwiftUIͷϨΠΞ΢τॲཧͷ͓͞Β͍
    1. ਌View͕ࢠViewʹαΠζΛఏҊ͢Δ

    2. ࢠView͸ࣗ෼ͷαΠζΛܾΊΔ

    3. ਌View͕ࢠViewΛ഑ஔ͢Δ

    4. ϐΫηϧάϦουʹ߹ΘͤΔͨΊ࠲ඪ͕
    ࢛ࣺޒೖ͞ΕΔ
    WWDC 2019 — Building Custom Views with SwiftUI

    View Slide

  4. Color.mint


    .frame(


    minWidth: 100, maxWidth: 200,


    minHeight: 100, maxHeight: 200


    )


    .frame(width: 300, height: 300)


    .border(.mint)
    SwiftUIͷϨΠΞ΢τॲཧ
    📱
    W: 390


    H: 763
    .frame(minWidth: 200, …)
    .frame(width: 300, height: 300)
    Color
    ఏҊαΠζ ࣮αΠζ
    W: 300


    H: 300
    W: 200


    H: 200
    W: 300


    H: 300
    W: 200


    H: 200
    W: 200


    H: 200

    View Slide

  5. iOS 16·Ͱ
    ͜ͷϓϩηεʹϑοΫ͢Δ͜ͱ͕Ͱ͖ͳ͔ͬͨ

    - αΠζ.frameΛ࢖ͬͯࢦఆ͢Δ

    - ਌ViewͷαΠζ͔Βܭࢉ͍ͨ͠৔߹͸ɺ
    GeometryReaderΛ࢖͏

    - ਌Viewʹࢠ View Λ஌Β͍ͤͨ৔߹͸ɺ
    GeometryReader + PreferenceΛ࢖͏

    View Slide

  6. ShapeͷαΠζܭࢉ 🆕
    protocol Shape {


    func sizeThatFits(_ proposal: ProposedViewSize) -> CGSize


    }
    struct ProposedViewSize : Equatable {


    public var width: CGFloat?


    public var height: CGFloat?


    }
    ఏҊαΠζ͔Βࣗ෼ͷαΠζΛܭࢉ͢Δ
    - ෯ɾߴ͞ͷఏҊαΠζ

    - nilͷ৔߹͸ɺ Viewࣗ਎ͷidealαΠζΛͱΔ

    - .
    fi
    xedSize͕ࢦఆ͞Εͨͱ͖ʹnilʹͳΔ

    View Slide

  7. ShapeͷαΠζܭࢉ 🆕
    CoreText + SwiftUI
    DEMO

    https://gist.github.com/auramagi/
    82a05d81146507180ed1f9111bc2e37a

    View Slide

  8. UIViewRepresentable / UIViewControllerRepresentableͷαΠζܭࢉ 🆕
    protocol UIViewControllerRepresentable {


    func sizeThatFits(


    _ proposal: ProposedViewSize,


    uiViewController: UIViewControllerType,


    context: Context


    ) -> CGSize?


    }


    protocol UIViewRepresentable {


    func sizeThatFits(


    _ proposal: ProposedViewSize,


    uiView: UIViewType,


    context: Context


    ) -> CGSize?


    }
    ಉ͘͡ɺఏҊαΠζ͔Βࣗ෼ͷαΠζΛܭࢉ͢Δ

    - UIViewͷsizeThatFits(_:)Λ࢖ͬͯ൚༻తͳαΠζܭࢉΛ࣮૷Ͱ͖Δ

    - ܕ৘ใ͕͋Δ͔Βɺ͜ͷUIView (UIViewController)ʹಛԽͨ͠ܭࢉ΋࣮૷Ͱ͖Δ

    View Slide

  9. Layoutϓϩτίϧ 🆕
    protocol Layout {


    func sizeThatFits(


    proposal: ProposedViewSize,


    subviews: Self.Subviews,


    cache: inout Self.Cache


    ) -> CGSize


    func placeSubviews(


    in bounds: CGRect,


    proposal: ProposedViewSize,


    subviews: Self.Subviews,


    cache: inout Self.Cache


    )


    }


    - 2ͭͷඞਢͷϝιου

    - ࣗ෼ͷαΠζΛܾΊΔ

    - ࢠViewΛ഑ஔ͢Δ

    View Slide

  10. Layoutϓϩτίϧ 🆕
    Waterfall Layout
    DEMO

    https://gist.github.com/auramagi/
    c4eb6f952d3432b71fc04c029567697a

    View Slide

  11. Layoutϓϩτίϧ 🆕
    🥰 خ͍͠ϙΠϯτ

    - αΠζͷΩϟογϡػߏ͕࣮૷Մೳ

    - SubviewͰ೚ҙͷ஋ΛLayoutValueKeyͰࢦఆ͢Ε͹LayoutͰड͚औΔ͜ͱ͕Ͱ͖Δ

    - HStack / VStack͕Layoutϓϩτίϧʹ४ڌ

    - Ξχϝʔγϣϯ෇͖ͰϨΠΞ΢τΛಈతʹมߋͰ͖Δ
    😔 ൵͍͠ϙΠϯτ

    - SubviewΛ௚઀ΞΫηεͰ͖ͳࣗ͘༝ʹมߋͰ͖ͳ͍

    - LazyͷϨΠΞ΢τ͸αϙʔτ͞Ε͍ͯͳ͍ͷͰॲཧίετʹ஫ҙ

    View Slide

  12. ࢀߟ
    - Compose custom layouts with SwiftUI

    - https://developer.apple.com/videos/play/wwdc2022/10056/

    - Food Truck App (ެࣜαϯϓϧίʔυ)

    - https://github.com/apple/sample-food-truck

    - DiagonalDonutStackLayout

    - FlowLayout

    View Slide

  13. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide