Chapters
Chapters

Chapters

Hide chapters

SwiftUI Apprentice

Third Edition · iOS 18 · Swift 5.9 · Xcode 16.2

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Your First App: HIITFit

Section 1: 12 chapters
Show chapters Hide chapters

Section II: Your Second App: Cards

Section 2: 9 chapters
Show chapters Hide chapters

Section III: Your Third App: TheMet

Section 3: 5 chapters
Show chapters Hide chapters

18. Paths & Custom Shapes
Written by Caroline Begbie

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In this chapter, you’ll become adept at creating custom shapes with which you’ll crop the photos. You’ll tap a photo on the card, which enables the Frames button. You can then choose a shape from a list of shapes in a modal view and clip the photo to that shape.

As well as creating shapes, you’ll learn some exciting advanced protocol usage and also how to create arrays of objects that are not of the same type.

The Starter Project

The starter project is the same as the challenge project from the previous chapter, with the exception of the preview data.

The starter project
The starter project

Shapes

Skills you’ll learn in this section: predefined shapes

#Preview {
  VStack {
    Rectangle()
    RoundedRectangle(cornerRadius: 25.0)
    Circle()
    Capsule()
    Ellipse()
  }
  .padding()
}
Five predefined shapes
Capo tsuvosuqem qxazek

Paths

Skills you’ll learn in this section: paths; lines; arcs; quadratic curves

Triangle
Pboonxsi

struct Triangle: Shape {
  func path(in rect: CGRect) -> Path {
    var path = Path()
    return path
  }
}

Lines

➤ Create a triangle with the same coordinates as in the diagram above. Add this to path(in:) before return path:

// 1
path.move(to: CGPoint(x: 20, y: 30))
// 2
path.addLine(to: CGPoint(x: 130, y: 70))
path.addLine(to: CGPoint(x: 60, y: 140))
// 3
path.closeSubpath()

#Preview {
  Triangle()
    .background(Color.yellow)
}
Triangle Shape
Xquolrya Lrelu

Fixed Triangle
Gesox Jwuajmfo

func path(in rect: CGRect) -> Path {
  let width = rect.width
  let height = rect.height
  var path = Path()
  path.addLines([
    CGPoint(x: width * 0.13, y: height * 0.2),
    CGPoint(x: width * 0.87, y: height * 0.47),
    CGPoint(x: width * 0.4, y: height * 0.93)
  ])
  path.closeSubpath()
  return path
}

#Preview(traits: .sizeThatFitsLayout) {
  Triangle()
    .aspectRatio(1, contentMode: .fit)
    .background(Color.yellow)
}
Resized preview
Vidajuw vmoxoec

Arcs

Another useful path component is an arc.

struct Cone: Shape {
  func path(in rect: CGRect) -> Path {
    var path = Path()
    // path code goes here
    return path
  }
}

let radius = min(rect.midX, rect.midY)
path.addArc(
  center: CGPoint(x: rect.midX, y: rect.midY),
  radius: radius,
  startAngle: Angle(degrees: 0),
  endAngle: Angle(degrees: 180),
  clockwise: true)
The arc
Qvi arh

Describe an arc
Kanjtonu ub onn

path.addLine(to: CGPoint(x: rect.midX, y: rect.height))
path.addLine(to: CGPoint(x: rect.midX + radius, y: rect.midY))
path.closeSubpath()
The completed cone
Tho pikrjofow maxa

Curves

As well as lines and arcs, you can add various other standard elements to a path, such as rectangles and ellipses. With curves, you can create any custom shape you want.

struct Lens: Shape {
  func path(in rect: CGRect) -> Path {
    var path = Path()
    // path code goes here
    return path
  }
}
dfacf teevr itg hoegf ceh goirk hufjwab piuds qev riiqw
Siojkiciz qoypo

path.move(to: CGPoint(x: 0, y: rect.midY))
path.addQuadCurve(
  to: CGPoint(x: rect.width, y: rect.midY),
  control: CGPoint(x: rect.midX, y: 0))
path.addQuadCurve(
  to: CGPoint(x: 0, y: rect.midY),
  control: CGPoint(x: rect.midX, y: rect.height))
path.closeSubpath()
Lens shape
Kewh zpaje

Strokes and Fills

Skills you’ll learn in this section: stroke; stroke style; fill

Stroke and fill
Mnfuda ikb jejg

.stroke(lineWidth: 5)
Stroke
Jyqabi

Stroke Style

When you define a stroke, instead of giving it a lineWidth, you can give it a StrokeStyle instance.

Lens()
  .stroke(style: StrokeStyle(dash: [30, 10]))
StrokeStyle with dash
GqsunuCznco feyz doxb

Line caps
Quca gegs

.stroke(
  Color.primary,
  style: StrokeStyle(lineWidth: 10, lineJoin: .round))
.padding()
Line join
Naye goib

Selecting an Element

Skills you’ll learn in this section: borders; clip shapes

@Published var selectedElement: CardElement?

.onTapGesture {
  store.selectedElement = element
}

.onTapGesture {
  store.selectedElement = nil
}

.onDisappear {
  store.selectedElement = nil
}

func isSelected(_ element: CardElement) -> Bool {
  store.selectedElement?.id == element.id
}

.border(
  Settings.borderColor,
  width: isSelected(element) ? Settings.borderWidth : 0)
Border selection
Qembud sukaygeaw

Clip Shapes Modal

Now that you can select an element, you’ll apply a clip shape selected from frames displayed on a modal view.

enum Shapes {
}

static let shapes: [Shape] = [Circle(), Rectangle()]

Use of protocol 'Shape' as a type must be written 'any Shape'

Associated Types

Skills you’ll learn in this section: protocols with associated types; type erasure

Swift Dive: Protocols With Associated Types

Protocols with associated types (PATs) are advanced black magic Swift and, if you haven’t done much programming with generics, the subject will take some time to learn and absorb. Apple APIs use them everywhere, so it’s useful to have an overview.

public protocol View {
    associatedtype Body : View
    @ViewBuilder var body: Self.Body { get }
}

struct ContentView: View {
  var body: some View {
    EmptyView()
  }
}

protocol CardElement {
  var id: UUID { get }
  var transform: Transform { get set }
}

protocol CardElement {
  associatedtype ID
  var id: ID { get }
  var transform: Transform { get set }
}

struct NewElement: CardElement {
  let id = Int.random(in: 0...1000)
  var transform = Transform()
}

static let shapes: [Shape] = [Circle(), Rectangle()]

Type Erasure

You are able to place different Views in an array by converting the View type to AnyView:

// does not compile
let views: [View] = [Text("Hi"), Image("giraffe")]
// does compile
let views: [AnyView] = [
  AnyView(Text("Hi")),
  AnyView(Image("giraffe"))
]

A Type Erased Array

➤ In Shapes.swift, add a new property to Shapes:

static let shapes: [AnyShape] = [
  AnyShape(Circle()), AnyShape(Rectangle()),
  AnyShape(Cone()), AnyShape(Lens())
]

Shape Selection Modal

Now that you have all your shapes in an array, you can create a selection modal, just as you did for your stickers.

struct FrameModal: View {
  @Environment(\.dismiss) var dismiss
  // 1
  @Binding var frameIndex: Int?
  private let columns = [
    GridItem(.adaptive(minimum: 120), spacing: 10)
  ]
  private let style = StrokeStyle(
    lineWidth: 5,
    lineJoin: .round)

  var body: some View {
    ScrollView {
      LazyVGrid(columns: columns) {
      // 2
        ForEach(0..<Shapes.shapes.count, id: \.self) { index in
          Shapes.shapes[index]
          // 3
            .stroke(Color.primary, style: style)
            // 4
            .fill(Color.secondary)
            .frame(width: 100, height: 120)
            .padding()
            // 5
            .onTapGesture {
              frameIndex = index
              dismiss()
            }
        }
      }
    }
    .padding(5)
  }
}

#Preview {
  FrameModal(frameIndex: .constant(nil))
}
Shapes Listing
Pvikez Xohqivw

Adding the Frame Picker Modal to the Card

Skills you’ll learn in this section: missing environment objects; conditional modifiers; disabling button

@EnvironmentObject var store: CardStore
@State private var frameIndex: Int?

.environmentObject(CardStore(defaultData: true))

case .frameModal:
  FrameModal(frameIndex: $frameIndex)
    .onDisappear {
      if let frameIndex {
        card.update(
          store.selectedElement,
          frameIndex: frameIndex)
      }
      frameIndex = nil
    }

Adding the Frame to the Card Element

➤ Open CardElement.swift in the Model folder and add a new property to ImageElement:

var frameIndex: Int?

mutating func update(_ element: CardElement?, frameIndex: Int) {
  guard element is ImageElement,
        let index = element?.index(in: elements),
        var imageElement = elements[index] as? ImageElement
    else { return }
  imageElement.frameIndex = frameIndex
  elements[index] = imageElement
 }

.clipShape(Shapes.shapes[0])
Clipped elements
Qjedkix ayuqufkf

Conditional Modifiers using @ViewBuilder

You applied .clipShape(_:) to all elements, but you only want to add it if the element is an ImageElement and if its frameIndex is not nil.

// 1
private extension ImageElementView {
  // 2
  @ViewBuilder
  func clip() -> some View {
    // 3
    if let frameIndex = element.frameIndex {
      // 4
      let shape = Shapes.shapes[frameIndex]
      self
        .clipShape(shape)
    } else { self }
  }
}

ImageElementView(element: element)
  .clip()
Referencing a missing environment object
Tuhekumcosd a lisrapy opyijevrarj intucr

.environmentObject(CardStore(defaultData: true))
Clipped giraffe
Jgukdip baqugpe

Tap area doesn't match shape
Wib aguu cuihp'j sadwn vnipi

.contentShape(shape)
Hit test on photo
Jil busj ej xdoti

.contentShape(Ellipse())

Disabling the Frames Button

It doesn’t make sense to show the list of clip frames unless you have selected an element ready for clipping. So, until you select an element, the Frames button should be disabled.

@EnvironmentObject var store: CardStore

.environmentObject(CardStore())

func defaultButton(_ selection: ToolbarSelection) -> some View {
  Button {
    modal = selection
  } label: {
    ToolbarButton(modal: selection)
  }
}

case .frameModal:
  defaultButton(selection)
    .disabled(
      store.selectedElement == nil
      || !(store.selectedElement is ImageElement))
default:
  defaultButton(selection)
Disabled Frames button
Yoyimdic Ypipep himqap

Button is still disabled when text is selected
Dubfah es fjulw bezachel qcem foxj ut xelextuz

Challenges

Challenge 1: Create new Shapes

Practice creating new shapes and place them in the frame picker modal. Here are some suggestions:

Try these shapes
Wkj wquxo fxuyoz

Challenge 2: Clip the Selection Border

Currently, when you tap an image, it gets a rectangular border around it. When the image has a frame, the border should be the shape of the frame and not rectangular. To overcome this, you’ll replace the border with the stroked frame in an overlay.

Clipped photos
Mxojpor lwaleb

Key Points

  • The Shape protocol provides an easy way to draw a 2D shape. There are some built-in shapes, such as Rectangle and Circle, but you can create custom shapes by providing a Path.
  • Paths are the outline of the 2D shape, made up of lines and curves.
  • A Shape fills by default with the primary color. You can override this with the fill(_:style:) modifier to fill with a color or gradient. Instead of filling the shape, you can stroke it with the stroke(_:lineWidth:) modifier to outline the shape with a color or gradient.
  • With the clipShape(_:style:) modifier, you can clip any view to a given shape.
  • Associated types in a protocol make a protocol generic, making the code reusable. Once a protocol has an associated type, the compiler can’t determine what type the protocol is until a structure, class or enumeration adopts it and provides the type for the protocol to use.
  • Using type erasure, you can hide the type of an object. This is useful for combining different shapes into an array or returning any kind of view from a method by using AnyView.
  • You can use the ViewBuilder attribute to create conditional modifiers when the modifier doesn’t allow a ternary condition.
17. Adding Photos to Your App
19. Saving Files
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2025 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now