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

SwiftUI Layout

SwiftUI Layout

0863933c047ef45d283fe4e1d26bbddc?s=128

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෮शձʙ

  2. ࣗݾ঺հ Apurin Mikhail ΞϓϦϯɾϛϋΠϧ auramagi - ΏΊΈͷiOSΤϯδχΞ - WWDC։࠵͔Βͣͬͱன໷ٯసੜ׆Λ΋ͱʹ໭ͤͳ͍ -

    ͳΜͰͦΜͳʹॵ͍ͷʁʁ auramagi
  3. SwiftUIͷϨΠΞ΢τॲཧͷ͓͞Β͍ 1. ਌View͕ࢠViewʹαΠζΛఏҊ͢Δ 2. ࢠView͸ࣗ෼ͷαΠζΛܾΊΔ 3. ਌View͕ࢠViewΛ഑ஔ͢Δ 4. ϐΫηϧάϦουʹ߹ΘͤΔͨΊ࠲ඪ͕ ࢛ࣺޒೖ͞ΕΔ

    WWDC 2019 — Building Custom Views with SwiftUI
  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
  5. iOS 16·Ͱ ͜ͷϓϩηεʹϑοΫ͢Δ͜ͱ͕Ͱ͖ͳ͔ͬͨ - αΠζ.frameΛ࢖ͬͯࢦఆ͢Δ - ਌ViewͷαΠζ͔Βܭࢉ͍ͨ͠৔߹͸ɺ GeometryReaderΛ࢖͏ - ਌Viewʹࢠ

    View Λ஌Β͍ͤͨ৔߹͸ɺ GeometryReader + PreferenceΛ࢖͏
  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ʹͳΔ
  7. ShapeͷαΠζܭࢉ 🆕 CoreText + SwiftUI DEMO https://gist.github.com/auramagi/ 82a05d81146507180ed1f9111bc2e37a

  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)ʹಛԽͨ͠ܭࢉ΋࣮૷Ͱ͖Δ
  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Λ഑ஔ͢Δ
  10. Layoutϓϩτίϧ 🆕 Waterfall Layout DEMO https://gist.github.com/auramagi/ c4eb6f952d3432b71fc04c029567697a

  11. Layoutϓϩτίϧ 🆕 🥰 خ͍͠ϙΠϯτ - αΠζͷΩϟογϡػߏ͕࣮૷Մೳ - SubviewͰ೚ҙͷ஋ΛLayoutValueKeyͰࢦఆ͢Ε͹LayoutͰड͚औΔ͜ͱ͕Ͱ͖Δ - HStack

    / VStack͕Layoutϓϩτίϧʹ४ڌ - Ξχϝʔγϣϯ෇͖ͰϨΠΞ΢τΛಈతʹมߋͰ͖Δ 😔 ൵͍͠ϙΠϯτ - SubviewΛ௚઀ΞΫηεͰ͖ͳࣗ͘༝ʹมߋͰ͖ͳ͍ - LazyͷϨΠΞ΢τ͸αϙʔτ͞Ε͍ͯͳ͍ͷͰॲཧίετʹ஫ҙ
  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
  13. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠