SwiftUI Layout

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