How to Recreate Control Events in SwiftUI

Mark van Wijnen
17 min readMar 20, 2024
Photo from Handling touches in your view

Background

At WWDC 2018, Apple designers presented a talk titled “Designing Fluid Interfaces”, explaining the design reasoning behind the gestural interface you see in your phone today. If you haven’t seen the talk yet, I highly suggest you do.

For this story we will focus on the Designing a tap part at around 01:04:40 into the video. Here they demonstrate some best practices for tapping a button by looking at the stock Calculator-app.

Apple Designing Fluid Interfaces

The key points they address are the following:

  1. The button should highlight immediately when it is touched.
  2. Do not confirm the touch until the touch goes up.
  3. Create an extra margin around the tap area.
    This makes the touch more comfortable and avoids accidental cancellation if a touch is moved during the interaction.
  4. The user should be able to change its mind when the button is touched.
    If the user drags their finger outside the tap area and lifts it, the tap should be cancelled. The same way, if the user drags their finger back inside the tap area, the button should highlight again and

--

--

Mark van Wijnen

macOS/iPadOS/iOS/watchOS/visionOS developer and SwiftUI enthousiast. “Stay Hungry, Stay Foolish!” — Steve Jobs