Upload File

building custom views in swiftui - apple inc. · layout procedure 1. parent proposes a size for...

  • Home
  • Documents
  • Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate
189
#WWDC19 © 2019 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple. Dave Abrahams John Harper • Building Custom Views in SwiftUI • Graphic effects and layout

Upload: others

Post on 13-Nov-2020

5 views

Category:

Documents


0 download

Report

TRANSCRIPT

Page 1: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

#WWDC19

© 2019 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

Dave Abrahams John Harper

•Building Custom Views in SwiftUI •Graphic effects and layout

Page 2: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Basics

struct ContentView : View { var body: some View { Text("Hello World") } }

Hello World

Page 3: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Basics

struct ContentView : View { var body: some View { Text("Hello World") } }

Page 4: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Basics

struct ContentView : View { var body: some View { Text("Hello World") } } Hello World

Text

Page 5: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Basics

struct ContentView : View { var body: some View { Text("Hello World") } } Hello World

Text

ContentView

Page 6: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Basics

struct ContentView : View { var body: some View { Text("Hello World") } } Hello World

Text

ContentView

Root View

Page 7: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Basics

struct ContentView : View { var body: some View { Text("Hello World") } } Hello World

Text

ContentView

Root View

Page 8: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Basics

struct ContentView : View { var body: some View { Text("Hello World") .edgesIgnoringSafeArea(.all) } }

Hello World

Text

ContentView

Root View

Page 9: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Basics

struct ContentView : View { var body: some View { Text("Hello World") } }

ContentView

Text

Root View

Hello World

Page 10: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Basics

struct ContentView : View { var body: some View { Text("Hello World") } }

ContentView

Text

Root View

Hello World

Page 11: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Basics

struct ContentView : View { var body: some View { Text("Hello World") } }

ContentViewText

Root View

Hello World

Page 12: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

1. Parent Proposes Size for Child

struct ContentView : View { var body: some View { Text("Hello World") } }

ContentViewText

Root View

Page 13: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Hello World

2. Child Chooses Its Own Size

struct ContentView : View { var body: some View { Text("Hello World") } }

ContentViewText

Root View

Page 14: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

3. Parent Places Child in Parent’s Coordinate Space

struct ContentView : View { var body: some View { Text("Hello World") } }

ContentViewText

Root View

Hello World

Page 15: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Procedure

1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate space

Page 16: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Procedure

1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate space

Page 17: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Procedure

1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate space

struct TrippyBadge : View { var body: some View { Image("ColorWash") .frame(width: 50, height: 10) } }

Child chooses its own size

Resizable Image

Frame

10

50

Page 18: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Procedure

1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate space

struct TrippyBadge : View { var body: some View { Image("ColorWash") .frame(width: 50, height: 10) } }

Child chooses its own size

Resizable Image

Frame

10

50

Page 19: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Procedure

1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate space

struct WedgeChart : View { var body: some View { Image("Wedges") .aspectRatio(1) } }

Child chooses its own size

Resizable Image

Aspect Ratio View

Page 20: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Procedure

1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate space

struct WedgeChart : View { var body: some View { Image("Wedges") .aspectRatio(1) } }

Child chooses its own size

Resizable Image

Aspect Ratio View

Page 21: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Procedure

1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate space

struct ContentView : View { var body: some View { Text("Hello World") } }

Child chooses its own size

Text

Root View

Hello World

Page 22: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Procedure

1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate space 4. SwiftUI rounds coordinates to nearest pixel

Page 23: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Procedure

1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate space 4. SwiftUI rounds coordinates to nearest pixel

Page 24: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Hello World

struct ContentView : View { var body: some View { Text("Hello World") } } Hello World

Text

Root View

Page 25: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") } } Avocado Toast

Text

Root View

Page 26: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .background(Color.green) } }

Avocado Toast

Text

Root View

Background

Page 27: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .background(Color.green) } }

Avocado Toast

Text

Root View

Background

Page 28: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .background(Color.green) } }

Avocado Toast

ColorText

Root View

Background

Page 29: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

Avocado Toast

Padding ColorText

Root View

Background

struct Toast : View { var body: some View { Text("Avocado Toast") .padding() .background(Color.green) } }

Page 30: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .padding() .background(Color.green) } }

Avocado Toast

Padding Color

Text

Root View

Background

Page 31: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .padding([.leading, .trailing]) .background(Color.green) } }

Avocado Toast

Padding Color

Text

Root View

Background

Page 32: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .padding(10) .background(Color.green) } }

Avocado Toast

Padding Color

Text

Root View

Background

Page 33: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .padding(10) .background(Color.green) } }

Avocado Toast

Padding Color

Text

Root View

Background

Page 34: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .padding(10) .background(Color.green) } }

Padding Color

Text

Root View

Background

Avocado Toast

Page 35: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .padding(10) .background(Color.green) } }

Padding Color

Text

Root View

Background

Avocado Toast

Page 36: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .padding(10) .background(Color.green) } }

Padding Color

Text

Root View

Background

Avocado Toast

10

10

10

10

Page 37: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .padding(10) .background(Color.green) } }

Padding Color

Text

Root View

Background

Avocado Toast

10

10

10

10

Page 38: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .padding(10) .background(Color.green) } }

Padding Color

Text

Root View

Background

Avocado Toast

Page 39: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .padding(10) .background(Color.green) } }

Padding Color

Text

Root View

Background

Avocado Toast

10

10 10

Page 40: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .padding(10) .background(Color.green) } }

Padding Color

Text

Root View

Background

Avocado Toast

Page 41: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .padding(10) .background(Color.green) } }

Padding Color

Text

Root View

Background

Avocado Toast

Page 42: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .padding(10) .background(Color.green) } }

Padding Color

Text

Root View

Background

Avocado Toast

Page 43: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Delicious Avocado Toast

struct Toast : View { var body: some View { Text("Avocado Toast") .padding(10) .background(Color.green) } }

Padding Color

Text

Root View

Background

Avocado Toast

Page 44: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Scrumptious Avocado

struct Avocado : View { var body: some View { Image("20x20_avocado") } } 20

20

Image

Root View

Page 45: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Scrumptious Avocado

struct Avocado : View { var body: some View { Image("20x20_avocado") } } 20

20

Frame Image

Root View

Page 46: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Scrumptious Avocado

struct Avocado : View { var body: some View { Image("20x20_avocado") .frame(width: 30, height: 30) } }

Frame

Image

Root View20

20

Page 47: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Scrumptious Avocado

struct Avocado : View { var body: some View { Image("20x20_avocado") .frame(width: 30, height: 30) } }

Frame

Image

Root View30

30

Page 48: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

•This Is as It Should Be There’s no wrong way to do it

Page 49: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack and VStack

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 50: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 51: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Page 52: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 53: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

5 stars

★★★★★

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast

Page 54: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 55: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 56: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 57: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Page 58: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 59: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast 🥑 5 stars

★★★★★

Page 60: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast 🥑 5 stars

★★★★★

Page 61: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…5 stars

★★★★★ Avocado Toast

Page 62: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…5 stars

★★★★★

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) {

Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Avocado Toast

Page 63: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast

5 stars

★★★★★

Page 64: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast

5 stars

★★★★★

Page 65: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast

5 stars

★★★★★

Page 66: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast

5 stars

★★★★★

Page 67: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast

HStack and VStack

5 stars

★★★★★

Page 68: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast

HStack and VStack

5 stars

★★★★★

Page 69: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack and VStack

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 70: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack and VStack

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 71: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack and VStack

VStack { ListCell() Toggle(isOn: $on) { ... } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 72: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack and VStack

VStack { ListCell() Toggle(isOn: $on) { ... } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 73: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack and VStack

VStack(spacing: 4) { ListCell() Toggle(isOn: $on) { ... } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 74: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack and VStack

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 75: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack and VStack

خبزة محمصة معنجوم 5

★★★★★

المكونات: أفوكادو، زبدة لوز، خبر، رقائق فلفل أحمر

Page 76: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

Delicious Avocado Toast

Parent

HStack

Text TextImage

Page 77: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

Delicious Avocado Toast

Parent

HStack

Text TextImage

Page 78: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1) Parent

HStack

Text TextImage

Delicious Avocado Toast

Page 79: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1) Parent

HStack

Text TextImage

Deli… Avocado…

Page 80: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

Delicious Avocado Toast

Parent

HStack

Text TextImage

Page 81: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

Delicious Avocado ToastS₀ S₁

Parent

HStack

Text TextImage

Page 82: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

Delicious Avocado Toast

S₀ + S₁

Parent

HStack

Text TextImage

Page 83: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

Delicious Avocado Toast

Parent

HStack

Text TextImage

Page 84: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

Delicious Avocado Toast

Parent

HStack

Text TextImage

Page 85: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

Delicious Avocado Toast

Parent

HStack

Text TextImage

Page 86: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1) Parent

HStack

Text TextImage

How Stacks Work

Delicious Avocado Toast

Page 87: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1) Parent

HStack

Text TextImage

How Stacks Work

Delicious Avocado Toast

w

Page 88: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1) Parent

HStack

Text TextImage

Delicious Avocado Toast

w

Page 89: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1) Parent

HStack

Text TextImage

Delicious Avocado Toast

Page 90: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

Delicious Avocado Toast

Parent

HStack

Text TextImage

Page 91: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

Delicious Avocado Toast

Parent

HStack

Text TextImage

Page 92: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

Delicious Avocado Toastw

Parent

HStack

Text TextImage

Page 93: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1) Parent

HStack

Text TextImage

How Stacks Work

Delicious Avocado Toast

w

Page 94: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1) Parent

HStack

Text TextImage

How Stacks Work

Delicious Avocado Toast

Page 95: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

How Stacks Work

Parent

HStack

Text TextImage

Delicious Avocado Toast

Page 96: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Parent

HStack

Text TextImage

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

Delicious Avocado Toast

Page 97: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Parent

HStack

Text TextImage

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

S₀ S₁

Delicious Avocado Toast

Page 98: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Parent

HStack

Text TextImage

How Stacks Work

HStack(alignment: .center) { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

Delicious Avocado Toast

Page 99: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Parent

HStack

Text TextImage

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

Delicious Avocado Toast

Page 100: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

How Stacks Work

Delicious Avocado T…

Page 101: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

How Stacks Work

Delicious Avocado T…

Page 102: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

Deli… Avocado…

Page 103: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

How Stacks Work

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast") } .lineLimit(1)

… Avocado Toast

Page 104: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Priority

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast").layoutPriority(1) } .lineLimit(1)

… Avocado Toast

Page 105: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Layout Priority

HStack { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast").layoutPriority(1) } .lineLimit(1)

… Avocado Toast

w₀+w₁

w₀

w₁

Page 106: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Alignments

HStack(alignment: .center) { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast").layoutPriority(1) } .lineLimit(1)

Delicious Avocado Toast

Page 107: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Alignments

HStack(alignment: .bottom) { Text("Delicious") Image("20x20_avocado") Text("Avocado Toast").layoutPriority(1) } .lineLimit(1)

Delicious Avocado Toast

Page 108: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Alignments

HStack(alignment: .bottom) { Text("Delicious").font(.caption) Image("20x20_avocado") Text("Avocado Toast").layoutPriority(1) } .lineLimit(1)

Avocado ToastDelicious

Page 109: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .bottom) { Text("Delicious").font(.caption) Image("20x20_avocado") Text("Avocado Toast").layoutPriority(1) } .lineLimit(1)

Alignments

Avocado ToastDelicious

Page 110: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .bottom) { Text("Delicious").font(.caption) Image("20x20_avocado") Text("Avocado Toast").layoutPriority(1) } .lineLimit(1)

Alignments

Avocado ToastDelicious

Page 111: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .bottom) { Text("Delicious").font(.caption) Image("20x20_avocado") Text("Avocado Toast").layoutPriority(1) } .lineLimit(1)

Alignments

Avocado ToastDelicious

Page 112: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .bottom) { Text("Delicious").font(.caption) Image("20x20_avocado") Text("Avocado Toast").layoutPriority(1) } .lineLimit(1)

Alignments

Avocado ToastDelicious

Page 113: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .bottom) { Text("Delicious").font(.caption) Image("20x20_avocado") Text("Avocado Toast").layoutPriority(1) } .lineLimit(1)

Alignments

Avocado ToastDelicious

Page 114: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .bottom) { Text("Delicious").font(.caption) Image("20x20_avocado") Text("Avocado Toast").layoutPriority(1) } .lineLimit(1)

Alignments

Avocado ToastDelicious

Page 115: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .lastTextBaseline) { Text("Delicious").font(.caption) Image("20x20_avocado") Text("Avocado Toast").layoutPriority(1) } .lineLimit(1)

Alignments

Avocado ToastDelicious

Page 116: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .lastTextBaseline) { Text("Delicious").font(.caption) Image("20x20_avocado") Text("Avocado Toast").layoutPriority(1) } .lineLimit(1)

Alignments

Avocado ToastDelicious

Page 117: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .lastTextBaseline) { Text("Delicious").font(.caption) Image("20x20_avocado") Text("Avocado Toast").layoutPriority(1) } .lineLimit(1)

Alignments

Avocado ToastDelicious

87.4%

Page 118: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .lastTextBaseline) { Text("Delicious").font(.caption) Image("20x20_avocado").alignmentGuide(.lastTextBaseline) { d in d[.bottom] * 0.927 } Text("Avocado Toast").layoutPriority(1) } .lineLimit(1)

Alignments

Avocado ToastDelicious

87.4%

Page 119: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .lastTextBaseline) { Text("Delicious").font(.caption) Image("20x20_avocado").alignmentGuide(.lastTextBaseline) { d in d[.bottom] * 0.927 } Text("Avocado Toast").layoutPriority(1) } .lineLimit(1)

Alignments

Avocado ToastDelicious

87.4%

Page 120: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Alignments

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 121: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Alignments

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 122: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Alignments

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 123: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Alignments

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 124: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 125: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .center) { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 126: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

extension VerticalAlignment { private enum MidStarAndTitle : AlignmentID { static func defaultValue(in d: ViewDimensions) -> Length { return d[.bottom] } } static let midStarAndTitle = VerticalAlignment(MidStarAndTitle.self) }

Defining a New Vertical Alignment

Page 127: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

extension VerticalAlignment { private enum MidStarAndTitle : AlignmentID { static func defaultValue(in d: ViewDimensions) -> Length { return d[.bottom] } } static let midStarAndTitle = VerticalAlignment(MidStarAndTitle.self) }

Defining a New Vertical Alignment

Page 128: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

extension VerticalAlignment { private enum MidStarAndTitle : AlignmentID { static func defaultValue(in d: ViewDimensions) -> Length { return d[.bottom] } } static let midStarAndTitle = VerticalAlignment(MidStarAndTitle.self) }

Defining a New Vertical Alignment

Page 129: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

extension VerticalAlignment { private enum MidStarAndTitle : AlignmentID { static func defaultValue(in d: ViewDimensions) -> Length { return d[.bottom] } } static let midStarAndTitle = VerticalAlignment(MidStarAndTitle.self) }

Defining a New Vertical Alignment

Page 130: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

extension VerticalAlignment { private enum MidStarAndTitle : AlignmentID { static func defaultValue(in d: ViewDimensions) -> Length { return d[.bottom] } } static let midStarAndTitle = VerticalAlignment(MidStarAndTitle.self) }

Defining a New Vertical Alignment

Page 131: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

extension VerticalAlignment { private enum MidStarAndTitle : AlignmentID { static func defaultValue(in d: ViewDimensions) -> Length { return d[.bottom] } } static let midStarAndTitle = VerticalAlignment(MidStarAndTitle.self) }

Defining a New Vertical Alignment

Page 132: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .midStarAndTitle) { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 133: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .midStarAndTitle) { VStack { Text("★★★★★") Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 134: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .midStarAndTitle) { VStack { Text("★★★★★") .alignmentGuide(.midStarAndTitle) { d in d[.bottom] / 2 } Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 135: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .midStarAndTitle) { VStack { Text("★★★★★") .alignmentGuide(.midStarAndTitle) { d in d[.bottom] / 2 } Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) Spacer() Image("20x20_avocado") }

Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 136: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .midStarAndTitle) { VStack { Text("★★★★★") .alignmentGuide(.midStarAndTitle) { d in d[.bottom] / 2 } Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) .alignmentGuide(.midStarAndTitle) { d in d[.bottom] / 2 } Spacer() Image("20x20_avocado") } Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 137: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .midStarAndTitle) { VStack { Text("★★★★★") .alignmentGuide(.midStarAndTitle) { d in d[.bottom] / 2 } Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) .alignmentGuide(.midStarAndTitle) { d in d[.bottom] / 2 } Spacer() Image("20x20_avocado") } Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 138: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

HStack(alignment: .midStarAndTitle) { VStack { Text("★★★★★") .alignmentGuide(.midStarAndTitle) { d in d[.bottom] / 2 } Text("5 stars") }.font(.caption)

VStack(alignment: .leading) { HStack { Text("Avocado Toast").font(.title) .alignmentGuide(.midStarAndTitle) { d in d[.bottom] / 2 } Spacer() Image("20x20_avocado") } Text("Ingredients: Avocado, Almond Butter, Bread, Red Pepper Flakes") .font(.caption).lineLimit(1) } }

Ingredients: Avocado, Almond Butter, Bread, Red Pep…

Avocado Toast5 stars

★★★★★

Page 139: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

John Harper

•Graphics in SwiftUI

Page 140: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate
Page 141: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct RedCircle: View { var body: some View {

} }

First Steps

Page 142: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct RedCircle: View { var body: some View { // return a filled circle. Circle().fill(Color.red) } }

First Steps

Page 143: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct RedCircle: View { var body: some View { // return a filled circle. Circle().fill(Color.red) } }

First Steps

Page 144: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Drawing ↔ Views

Page 145: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Drawing Model

shape.op(style) → view

Circle() Capsule() Ellipse()

Page 146: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Drawing Model

shape.op(style) → view

Circle().fill(red) Capsule() Ellipse()

Page 147: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Drawing Model

shape.op(style) → view

Circle().fill(…) Capsule().stroke(red, lineWidth: 20) Ellipse()

Page 148: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Drawing Model

shape.op(style) → view

Circle().fill(…) Capsule().stroke(…) Ellipse().strokeBorder(red, style: …)

Page 149: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Shape Styles

Styles are ways of making a view from a shape • Colors • Tiled images • Gradients: Linear, radial, angular (conic)

Page 150: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Gradients

struct GradientView: View { var body: some View { let spectrum = Gradient(colors: [ .red, .yellow, .green, .cyan, .blue, .purple, .red ])

} }

0 1

Page 151: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Gradients

struct GradientView: View { var body: some View { let spectrum = Gradient(colors: [ .red, .yellow, .green, .cyan, .blue, .purple, .red ])

let conic = AngularGradient(gradient: spectrum, center: .center, angle: .degrees(-90))

} }

01

-90°

Page 152: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Gradients

struct GradientView: View { var body: some View { let spectrum = Gradient(colors: [ .red, .yellow, .green, .cyan, .blue, .purple, .red ])

let conic = AngularGradient(gradient: spectrum, center: .center, angle: .degrees(-90))

return Circle().fill(conic) } }

Page 153: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Gradients

struct GradientView: View { var body: some View { let spectrum = Gradient(colors: [ .red, .yellow, .green, .cyan, .blue, .purple, .red ])

let conic = AngularGradient(gradient: spectrum, center: .center, angle: .degrees(-90))

return Circle().strokeBorder(conic, lineWidth: 50) } }

Page 154: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Sample Control

Page 155: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Sample Control

Page 156: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Sample Control

width

depth

// Data model. class Ring { struct Wedge { var width: Double var depth: Double var hue: Double }

var wedges: [Int: Wedge] var wedgeIDs: [Int] }

Page 157: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Sample Control

Page 158: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Sample Control

Page 159: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Sample Control

Page 160: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct WedgeShape: Shape { var wedge: Ring.Wedge

func path(in rect: CGRect) -> Path { var p = Path()

return p } }

Page 161: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct WedgeShape: Shape { var wedge: Ring.Wedge

func path(in rect: CGRect) -> Path { var p = Path() let g = WedgeGeometry(wedge, in: rect)

return p } }

cena0°

a1°

r0

r1

0°

Page 162: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct WedgeShape: Shape { var wedge: Ring.Wedge

func path(in rect: CGRect) -> Path { var p = Path() let g = WedgeGeometry(wedge, in: rect) p.addArc(center: g.cen, radius: g.r0, startAngle: g.a0, endAngle: g.a1, clockwise: false)

return p } }

Page 163: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct WedgeShape: Shape { var wedge: Ring.Wedge

func path(in rect: CGRect) -> Path { var p = Path() let g = WedgeGeometry(wedge, in: rect) p.addArc(center: g.cen, radius: g.r0, startAngle: g.a0, endAngle: g.a1, clockwise: false)

return p } }

Page 164: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct WedgeShape: Shape { var wedge: Ring.Wedge

func path(in rect: CGRect) -> Path { var p = Path() let g = WedgeGeometry(wedge, in: rect) p.addArc(center: g.cen, radius: g.r0, startAngle: g.a0, endAngle: g.a1, clockwise: false) p.addLine(to: g.topRight)

return p } }

Page 165: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct WedgeShape: Shape { var wedge: Ring.Wedge

func path(in rect: CGRect) -> Path { var p = Path() let g = WedgeGeometry(wedge, in: rect) p.addArc(center: g.cen, radius: g.r0, startAngle: g.a0, endAngle: g.a1, clockwise: false) p.addLine(to: g.topRight)

return p } }

Page 166: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct WedgeShape: Shape { var wedge: Ring.Wedge

func path(in rect: CGRect) -> Path { var p = Path() let g = WedgeGeometry(wedge, in: rect) p.addArc(center: g.cen, radius: g.r0, startAngle: g.a0, endAngle: g.a1, clockwise: false) p.addLine(to: g.topRight) p.addArc(center: g.cen, radius: g.r1, startAngle: g.a1, endAngle: g.a0, clockwise: true)

return p } }

Page 167: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct WedgeShape: Shape { var wedge: Ring.Wedge

func path(in rect: CGRect) -> Path { var p = Path() let g = WedgeGeometry(wedge, in: rect) p.addArc(center: g.cen, radius: g.r0, startAngle: g.a0, endAngle: g.a1, clockwise: false) p.addLine(to: g.topRight) p.addArc(center: g.cen, radius: g.r1, startAngle: g.a1, endAngle: g.a0, clockwise: true)

return p } }

Page 168: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct WedgeShape: Shape { var wedge: Ring.Wedge

func path(in rect: CGRect) -> Path { var p = Path() let g = WedgeGeometry(wedge, in: rect) p.addArc(center: g.cen, radius: g.r0, startAngle: g.a0, endAngle: g.a1, clockwise: false) p.addLine(to: g.topRight) p.addArc(center: g.cen, radius: g.r1, startAngle: g.a1, endAngle: g.a0, clockwise: true) p.closeSubpath() return p } }

Page 169: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct WedgeShape: Shape { var wedge: Ring.Wedge

func path(in rect: CGRect) -> Path { var p = Path() let g = WedgeGeometry(wedge, in: rect) p.addArc(center: g.cen, radius: g.r0, startAngle: g.a0, endAngle: g.a1, clockwise: false) p.addLine(to: g.topRight) p.addArc(center: g.cen, radius: g.r1, startAngle: g.a1, endAngle: g.a0, clockwise: true) p.closeSubpath() return p } }

Page 170: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct WedgeShape: Shape { var wedge: Ring.Wedge

func path(in rect: CGRect) -> Path { … }

var animatableData: … {

} }

Page 171: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct WedgeShape: Shape { var wedge: Ring.Wedge

func path(in rect: CGRect) -> Path { … }

var animatableData: Ring.Wedge.AnimatableData { get { return wedge.animatableData } set { wedge.animatableData = newValue } } }

Page 172: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Multi-Part Drawing

Page 173: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Multi-Part Drawing

Page 174: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Multi-Part Drawing

Page 175: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct RingView: View { @EnvironmentObject var ring: Ring

var body: some View { ZStack {

} } }

Page 176: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct RingView: View { @EnvironmentObject var ring: Ring

var body: some View { ZStack { ForEach(ring.wedgeIDs) { id in WedgeView(self.ring.wedges[id]!)

} } } }

Page 177: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct RingView: View { @EnvironmentObject var ring: Ring

var body: some View { ZStack { ForEach(ring.wedgeIDs) { id in WedgeView(self.ring.wedges[id]!) .tapAction { withAnimation { self.ring.deleteWedge(id: id) } }

} } } }

Page 178: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct RingView: View { @EnvironmentObject var ring: Ring

var body: some View { ZStack { ForEach(ring.wedgeIDs) { id in WedgeView(self.ring.wedges[id]!) .tapAction { withAnimation { self.ring.deleteWedge(id: id) } } .transition(scaleAndFade) } } } }

Page 179: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Custom Transitions

View Inserted

View Removed

View Idle

Page 180: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Custom Transitions

Animation

Animation

View Inserted

View Removed

View Idle

Page 181: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Custom Transitions

isActive: true

isActive: false

Page 182: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct ScaleAndFade: ViewModifier { var isActive: Bool

func body(content: Content) -> some View { return content

} }

isActive: true

isActive: false

Page 183: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct ScaleAndFade: ViewModifier { var isActive: Bool

func body(content: Content) -> some View { return content .scaleEffect(isActive ? 0.1 : 1) // scale: 10% or 100% .opacity(isActive ? 0 : 1) // opacity: 0% or 100% } }

isActive: true

isActive: false

Page 184: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

struct ScaleAndFade: ViewModifier { var isActive: Bool

func body(content: Content) -> some View { … } }

let scaleAndFade = AnyTransition.modifier( active: ScaleAndFade(isActive: true), identity: ScaleAndFade(isActive: false))

isActive: true

isActive: false

Page 185: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

•Demo

Page 186: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Graphic Effects

Opacity

Geometry (scales, rotations, etc.)

Color effects (contrast, brightness, hue rotate, monochrome, etc.)

Blur effect

Drop shadow effect

Clipping, masking

Compositing, groups, blend modes

Page 187: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

SwiftUI’s Unified Model

All customization centers on View • Layout • Graphics • Animation and transitions • Interaction

Combine these to produce delightful results!

Page 188: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

More Informationdeveloper.apple.com/wwdc19/237

SwiftUI Lab Friday, 11:00

Page 189: Building Custom Views in SwiftUI - Apple Inc. · Layout Procedure 1. Parent proposes a size for child 2. Child chooses its own size 3. Parent places child in parent’s coordinate

Updating Parent-Child Collection Plans_SPD

Parent & Child Themes

Parent-child relationships in hamlet

Facebook Parent-Child Functionality

Parent Child Alterity Dialogue

Child Care Parent Handbook

Parent and Child Relationships

parent and child

Parent Child Press Catalog

Unit 4: Parent-Child relationships

Parent-Child Relationships at the Transition to Adulthood ...€¦ · Parent-Child Relationships by Nativity and Race/Ethnicity Parent-Child Relationships at the Transition to Adulthood:

Parent-Child Rating Scale (PCRS): A parent-reported ... · Parent-Child Rating Scale (PCRS): A parent-reported questionnaire to assess social and emotional functioning in children

Data Flow Through SwiftUI - devstreaming-cdn.apple.com · Redistribution or public display not permitted without written permission from Apple. Luca Bernardi, SwiftUI Engineer Raj

17th Annual Conference on Parent-Child Interaction … · Parent-Child Interaction Therapy for Traumatized Children ... Español, Elizabeth Mota ... Annual Conference on Parent-Child

Parent child relationship

Parent and Child Interactive Treatment ServicesCelebrate The Spectrum Parent and Child Services: crs provides cost-effective, evidence-based parent education and child interactive

Building Apps with SwiftUI - CMSC 436

Parent-Child Quality Time

Defining Parent-Child Collection Plans_SPD

Parent and child themes

Parent child relationships

Parent–childrelationshipqualityandfamilytransmissionofparent ......symptoms as a function of child and parent emotion regula-tory processes, and whether the quality of parent–child

THE FLAC METHOD PARENT PARENT-CHILD

Parent child classes Tumble Bugs

Parent-child feeding interactions:

Dyadic Parent-Child Interaction Coding System for ......The Dyadic Parent -Child Interaction Coding System (DPICS) is designed to assess parent-child social interactions, providing

Child to Parent Abuse

Less than Family: Surrogate Birth and Legal Parent-Child ... · Surrogate Birth and Legal Parent-Child Relationships in Japan ... Assumptions Underlying Legal Parent-Child Relationships

From  Parent to Child

Definition: Accessing child class methods through a parent object Example: Child class overrides default parent class methods Example: Child class

Implementing Child, Parent-Child and Parent Interventions ...puckett.org/presentations/Implementing Child Parent...Parenting Styles and Instructional Practices Child Learning Opportunities

Parent & Child Brochure 2017

Between Parent and Child

JAKUB KORNATOWSKI SWIFTUI, CZYLI ZNOWU WSZYSTKO OD … · WYKORZYSTAĆ POTENCJAŁ: SWIFTUI & SWIFT 5 SwiftUI to framework w pełni wykorzystujący możliwości Swift 5, zbudowany,

Resilient Parent, Resilient Child