Tweet
Tweet

Slide 1

Slide 1 text

SwiftUIで出てきた GeometryReaderって何？ Hiromu Tsuruta

Slide 2

Slide 2 text

About me 〈Company〉 - every, inc. / DELISH KITCHEN 〈Role〉 - iOS Developer 〈Account〉 - Twitter: @hcrane14 - Qiita: H_Crane

Slide 3

Slide 3 text

SwiftUIで追加されたもの

Slide 4

Slide 4 text

Views and Layouts 1.Views and Controls Text, TextField, SecureField, Font, Image, Button, NavigationLink, MenuButton, EditButton, PasteButton, Toggle, Picker, DatePicker, Slider, Stepper, SegmentedControl

Slide 5

Slide 5 text

Views and Layouts 1.Views and Controls 2.View Layout and Presentation Text, TextField, SecureField, Font, Image, Button, NavigationLink, MenuButton, EditButton, PasteButton, Toggle, Picker, DatePicker, Slider, Stepper, SegmentedControl HStack, VStack, ZStack, List, ForEach, ScrollView, Form, Group, GroupBox, Section,Spacer, Divider, NavigationView, TappedView, HSplitView, VSplitView, Alert, ActionSheet, EmptyView, EquatableView, AnyView, TuppleView

Slide 6

Slide 6 text

Views and Layouts 1.Views and Controls 2.View Layout and Presentation Text, TextField, SecureField, Font, Image, Button, NavigationLink, MenuButton, EditButton, PasteButton, Toggle, Picker, DatePicker, Slider, Stepper, SegmentedControl HStack, VStack, ZStack, List, ForEach, ScrollView, Form, Group, GroupBox, Section,Spacer, Divider, NavigationView, TappedView, HSplitView, VSplitView, Alert, ActionSheet, EmptyView, EquatableView, AnyView, TuppleView → 名前から何となく想像がつく 　➡ UIKitにも似たようなのあったな

Slide 7

Slide 7 text

GeometryReader

Slide 8

Slide 8 text

What is GeometryReader ? 言葉の意味から考えてみる.... ① Geometry = 幾何学（図形や空間の分野） ② Reader＝読み手

Slide 9

Slide 9 text

What is GeometryReader ? 言葉の意味から考えてみる.... ① Geometry = 幾何学（図形や空間の分野） ② Reader＝読み手 つまり... GeometryReader = 図形や空間の読み手

Slide 10

Slide 10 text

About GeometryReader A container view that defines its content as a function of its own size and coordinate space. Overview：This view returns a flexible preferred size to its parent layout. @frozen struct GeometryReader where Content : View

Slide 11

Slide 11 text

About GeometryReader A container view that defines its content as a function of its own size and coordinate space. Overview：This view returns a flexible preferred size to its parent layout. コンテンツ自身のサイズと座標空間を定義している 概要：適切なサイズを親のレイアウトに返す @frozen struct GeometryReader where Content : View

Slide 12

Slide 12 text

具体例を見てみよう！

Slide 13

Slide 13 text

Example 1. Size *Quote of screenshot is Sketch *Quote of screenshot is Qiita

Slide 14

Slide 14 text

Example 1. Size *Quote of screenshot is Sketch *Quote of screenshot is Qiita geometry.size.height geometry.size.width

Slide 15

Slide 15 text

Example 2. Coordinate geometry.size.height geometry.size.width *Quote of screenshot is Qiita

Slide 16

Slide 16 text

Example 2. Coordinate geometry.size.height geometry.size.width *Quote of screenshot is Qiita ① geometry.frame(in: .global) ② geometry.frame(in: .local) *Quote of screenshot is Qiita ① ② UIView / frame UIView / bounds

Slide 17

Slide 17 text

Example 3. Animation *Quote of screenshot is Sketch *Quote of screenshot is Qiita

Slide 18

Slide 18 text

Example 3. Animation *Quote of screenshot is Sketch *Quote of screenshot is Qiita 引用： チュートリアルから一歩踏み出したSwiftUIのCustom Viewの作り方ーその １https://qiita.com/takaf51/items/a67db8bbc42a4c82b1f0 ex

Slide 19

Slide 19 text

Example 4. Scroll Offset - GeometryReaderを入れ子にして使用 - 現状ScrollViewのoffsetを取得できないがそ れを可能にしている ※第３者がYoutubeに上げたものを使用しており、当人とは関係ありません。

Slide 20

Slide 20 text

To end my presentation GeometryReaderを使うと - 親に対して座標と大きさを取得できる - 画面をリッチにできる

Slide 21

Slide 21 text

To end my presentation GeometryReaderを使うと - 親に対して座標と大きさを取得できる - 画面をリッチにできる ➡ UIKitでは対応していたものが、なくなっている？ものあるので、 それを補う意味でも、GeometryReaderを使って行くことになりそ う。

Slide 22

Slide 22 text

Thank you for listening