Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

iOS 16·Ͱ ͜ͷϓϩηεʹϑοΫ͢Δ͜ͱ͕Ͱ͖ͳ͔ͬͨ - αΠζ.frameΛ࢖ͬͯࢦఆ͢Δ - ਌ViewͷαΠζ͔Βܭࢉ͍ͨ͠৔߹͸ɺ GeometryReaderΛ࢖͏ - ਌Viewʹࢠ View Λ஌Β͍ͤͨ৔߹͸ɺ GeometryReader + PreferenceΛ࢖͏

Slide 6

Slide 6 text

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ʹͳΔ

Slide 7

Slide 7 text

ShapeͷαΠζܭࢉ 🆕 CoreText + SwiftUI DEMO https://gist.github.com/auramagi/ 82a05d81146507180ed1f9111bc2e37a

Slide 8

Slide 8 text

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)ʹಛԽͨ͠ܭࢉ΋࣮૷Ͱ͖Δ

Slide 9

Slide 9 text

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Λ഑ஔ͢Δ

Slide 10

Slide 10 text

Layoutϓϩτίϧ 🆕 Waterfall Layout DEMO https://gist.github.com/auramagi/ c4eb6f952d3432b71fc04c029567697a

Slide 11

Slide 11 text

Layoutϓϩτίϧ 🆕 🥰 خ͍͠ϙΠϯτ - αΠζͷΩϟογϡػߏ͕࣮૷Մೳ - SubviewͰ೚ҙͷ஋ΛLayoutValueKeyͰࢦఆ͢Ε͹LayoutͰड͚औΔ͜ͱ͕Ͱ͖Δ - HStack / VStack͕Layoutϓϩτίϧʹ४ڌ - Ξχϝʔγϣϯ෇͖ͰϨΠΞ΢τΛಈతʹมߋͰ͖Δ 😔 ൵͍͠ϙΠϯτ - SubviewΛ௚઀ΞΫηεͰ͖ͳࣗ͘༝ʹมߋͰ͖ͳ͍ - LazyͷϨΠΞ΢τ͸αϙʔτ͞Ε͍ͯͳ͍ͷͰॲཧίετʹ஫ҙ

Slide 12

Slide 12 text

ࢀߟ - 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

Slide 13

Slide 13 text

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