SwiftUI Layout

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠