Chapters
Chapters

Chapters

Hide chapters

SwiftUI Apprentice

First Edition · iOS 14 · Swift 5.4 · Xcode 12.5

Before You Begin

Section 0: 6 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: RWFreeView

Section 3: 6 chapters
Show chapters Hide chapters

14. Gestures
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

Gestures are the main interface between you and your app. You’ve already used the built-in gestures for tapping and swiping, but SwiftUI also provides various gesture types for customization.

When users are new to Apple devices, once they’ve spent a few minutes with iPhone, it becomes second nature to tap, pinch two fingers to zoom or make the element larger, or rotate an element with two fingers. Your app should use these standard gestures. In this chapter, you’ll explore how to drag, magnify and rotate elements with the provided gesture recognizers.

Back of the napkin design
Back of the napkin design

Looking at the single card view, you’re going to drag around and resize photo and text elements. That’s an opportunity to create a view or a view modifier which takes in any view content and allows the user to drag the view around the screen or pinch to scale and rotate the view. Throughout this chapter, you’ll work towards creating a resizable, reusable view modifier. You’ll be able to use this in any of your future apps.

Creating the resizable view

To start with, the resizable view will simply show a colored rectangle but, later on, you’ll change it to show any view content.

➤ Open the starter project, which is the same as the previous chapter’s challenge project with files separated into groups.

➤ Create a new SwiftUI View file named ResizableView.swift.

➤ Change ResizableView to show a red rounded rectangle instead of the “Hello, World!” Text:

struct ResizableView: View {
  // 1
  private let content = RoundedRectangle(cornerRadius: 30.0)
  private let color = Color.red

  var body: some View {
    // 2
    content
      .frame(width: 250, height: 180)
      .foregroundColor(color)
  }
}

Going through the code:

  1. Create a RoundedRectangle view property. You choose private access here as, for now, no other view should be able to reference these properties. Later on, you’ll change the access to allow any view that you choose to pass in.
  2. Use content as the required View in body and apply modifiers to it.

➤ Preview the view, and you’ll see your red rectangle with rounded corners.

Preview rounded rectangle
Preview rounded rectangle

Creating transforms

Skills you’ll learn in this section: transformation

import SwiftUI

struct Transform {
  var size = CGSize(width: 250, height: 180)
  var rotation: Angle = .zero
  var offset: CGSize = .zero
}

@State private var transform = Transform()

.frame(
  width: transform.size.width,
  height: transform.size.height)
Rounded rectangle with transform sizing
Heocvil nomlinzhu juzn pfozjwilz bihasz

Creating a drag gesture

Skills you’ll learn in this section: drag gesture; operator overloading

let dragGesture = DragGesture()
  .onChanged { value in
    transform.offset = value.translation
  }
Offset and translation
Ihdwed epz mwudvnajiib

.offset(transform.offset)
.gesture(dragGesture)
Dragging the view
Srawcovd yyo nouj

@State private var previousOffset: CGSize = .zero

let dragGesture = DragGesture()
  .onChanged { value in
    transform.offset = CGSize(
      width: value.translation.width + previousOffset.width,
      height: value.translation.height + previousOffset.height)
  }
  .onEnded { _ in
    previousOffset = transform.offset
  }

Operator overloading

Operator overloading is where you redefine what operators such as +, -, * and / do.

import SwiftUI

func + (left: CGSize, right: CGSize) -> CGSize {
  CGSize(
    width: left.width + right.width,
    height: left.height + right.height)
}

let dragGesture = DragGesture()
  .onChanged { value in
    transform.offset = value.translation + previousOffset
  }
  .onEnded { _ in
    previousOffset = transform.offset
  }

Creating a rotation gesture

Skills you’ll learn in this section: rotation gesture

@State private var previousRotation: Angle = .zero

let rotationGesture = RotationGesture()
  .onChanged { rotation in
    transform.rotation += rotation - previousRotation
    previousRotation = rotation
  }
  .onEnded { _ in
    previousRotation = .zero
  }

.rotationEffect(transform.rotation)
.gesture(dragGesture)
.gesture(rotationGesture)
Two fingers to rotate
Zlu wehfahq pi niqoze

Rotation
Pozigief

ResizableView()

Creating a scale gesture

Skills you’ll learn in this section: magnification gesture; simultaneous gestures

@State private var scale: CGFloat = 1.0

let scaleGesture = MagnificationGesture()
  .onChanged { scale in
    self.scale = scale
  }
  .onEnded { scale in
    transform.size.width *= scale
    transform.size.height *= scale
    self.scale = 1.0
  }

.scaleEffect(scale)

Creating a simultaneous gesture

Whereas the drag is a specific gesture with one finger, you can do rotation and scale at the same time with two fingers. To do this, change .gesture(rotationGesture) to:

.gesture(SimultaneousGesture(rotationGesture, scaleGesture))
Completed gestures
Belyredaz fisgocow

Creating custom view modifiers

Skills you’ll learn in this section: creating a ViewModifier; View extension; using a view modifier; advantages of a view modifier

struct ResizableView: ViewModifier {

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

private let content = RoundedRectangle(cornerRadius: 30.0)
private let color = Color.red

// ... define gesture variables here
content
  .frame(
    width: transform.size.width,
    height: transform.size.height)
  .rotationEffect(transform.rotation)
  .scaleEffect(scale)
  .offset(transform.offset)
  .gesture(dragGesture)
  .gesture(SimultaneousGesture(rotationGesture, scaleGesture))

struct ResizableView_Previews: PreviewProvider {
  static var previews: some View {
    RoundedRectangle(cornerRadius: 30.0)
      .foregroundColor(Color.red)
      .modifier(ResizableView())
  }
}

CardsView()
View Modifier preview
Fuig Hihuyaan tpiniod

Using your custom view modifier

In the preview, you used .modifier(ResizableView()). You can improve this by adding a “pass-through” method to View.

import SwiftUI

extension View {
  func resizableView() -> some View {
    return modifier(ResizableView())
  }
}

var content: some View {
  ZStack {
    Capsule()
      .foregroundColor(.yellow)
      .resizableView()
    Text("Resize Me!")
      .font(.largeTitle)
      .fontWeight(.bold)
      .resizableView()
    Circle()
      .resizableView()
      .offset(CGSize(width: 50, height: 200))
  }
}

content
Resize multiple views
Fojeho yowyivmo wuikf

.font(.system(size: 500))
.minimumScaleFactor(0.01)
.lineLimit(1)
Resize the text
Melufa mda beqr

View modifier advantage

One advantage of a view modifier over a custom view is that you can apply one modifier to multiple views. If you want the text and the capsule to be a single group, then you can resize them both at the same time.

Group {
  Capsule()
    .foregroundColor(.yellow)
  Text("Resize Me!")
    .fontWeight(.bold)
    .font(.system(size: 500))
    .minimumScaleFactor(0.01)
    .lineLimit(1)
}
.resizableView()
Grouped Views
Tsoomoy Vuekd

Other gestures

  • Tap gesture

Type properties

Skills you’ll learn in this section: type properties; type methods

var currentTheme = Color.red

Swift Dive: Stored property vs type property

To create a type property, rather than a stored property, you use the static keyword.

public struct CGPoint {
  public var x: CGFloat
  public var y: CGFloat
}

extension CGPoint {
  public static var zero: CGPoint { 
    CGPoint(x: 0, y: 0)
  }
}

var point = CGPoint(x: 10, y: 10)
point.x = 20

let pointZero = CGPoint.zero  // pointZero contains (x: 0, y: 0)
Type property storage
Zgku nfamoylt xxubedu

Creating global defaults for Cards

Skills you’ll learn in this section: type methods

import SwiftUI

struct Settings {
  static let thumbnailSize =
    CGSize(width: 150, height: 250)
  static let defaultElementSize =
    CGSize(width: 250, height: 180)
  static let borderColor: Color = .blue
  static let borderWidth: CGFloat = 5
}

let settings1 = Settings()
let settings2 = Settings()

enum Settings {

extension Settings {
  static let aNewSetting: Int = 0
}

.frame(
  width: Settings.thumbnailSize.width,
  height: Settings.thumbnailSize.height)

var size = CGSize(
  width: Settings.defaultElementSize.width,
  height: Settings.defaultElementSize.height)

Creating type methods

As well as static properties, you can also create static methods. To illustrate this, you’ll extend SwiftUI’s built-in Color type. You’ll probably get fairly tired of the gray list of card thumbnails, so you’ll create a method that will give you random colors each time the view refreshes.

import SwiftUI

extension Color {
  static let colors: [Color] = [
    .green, .red, .blue, .gray, .yellow, .pink, .orange, .purple
  ]
}

static func random() -> Color {
  colors.randomElement() ?? .black
}

.foregroundColor(.random())
Random color
Zekxam xiwib

Challenge

Challenge: Make a new view modifier

View modifiers are not just useful for reusing views, but they are also a great way to tidy up. You can combine modifiers into one custom modifier. Or, as with the toolbar modifier in CardDetailView, if a modifier has a lot of code in it, save yourself some code reading fatigue, and separate it out into its own file.

Key points

  • Custom gestures let you interact with your app in any way you choose. Make sure the gestures make sense. Pinch to scale is standard across the Apple ecosystem, so, even though you can, don’t use MagnificationGesture in non-standard ways.
  • You apply view modifiers to views, resulting in a different version of the view. If the modifier requires a change of state, create a structure that conforms to ViewModifier. If the modifier does not require a change of state, you can simply add a method in a View extension and use that to modify a view.
  • static or type properties and methods exist on the type. Stored properties exist per instance of the type. Self, with the initial capital letter, is the way to refer to the type inside itself. self refers to the instance of the type. Apple uses type properties and methods extensively. For example, Color.yellow is a type property.

Where to go from here?

By now you should be able to understand a lot of technical jargon. It’s time to check out Apple’s documentation and articles. At https://apple.co/3isFhBO, you’ll find an article called Adding Interactivity with Gestures. This article describes updating state during a gesture. Read this article and check your understanding of the topic so far.

13. Outlining a Photo Collage App
15. Structures, Classes & Protocols
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.
© 2024 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