Manually create a Seek Button using SwiftUI

Tram Ho

Introduce

In this article, we will step by step create a Seek Button using SwiftUI, with the design as shown below

This type of button often appears in music or video applications. For example, in the Netflix app, when the user clicks on this button the progress bar increases to 10 seconds.

The content of the article will focus on the following points:

  • Basic steps to build interfaces using SwiftUI
  • Use SwiftUI’s basic effects

Analysis of basic UI components

We can divide the Seek Button into 4 parts as follows:

  1. Rounded arrow view
  2. Background image of Rounded arrow view
  3. Duration Label
  4. Accumulation Label

Source code analysis

SeekButton.swift

We will create SeekButton struct to represent Seek Button object

In the SeekButton.swift file, we will add the action property which is the closure that contains the handle when the user clicks the Seek Button.

var action: (Int) -> Void

RoundArrow

The RoundArrow object is represented by the struct RoundArrow

RoundArrow simply draws an arc from angle 0 to angle 270 clockwise.

RoundArrowHead

The RoundArrowHead object is represented by the struct RoundArrowHead

We will proceed to draw 2 consecutive triangles right after the arc at an angle of 270 degrees

RoundedArrowBackground

Similar to the two objects above, we proceed to create a Shape struct RoundedArrowBackground

The object created by an arc is drawn from angle 0 to angle 360

ScalableText

ScalableText is used to display the number of seconds that will add up when the user clicks SeekButton. The size of the text will change based on the size of SeekButton, so we will need 2 properties:

  • string
  • fontWeight

Motion effect of RoundedArrow

According to the design, the arc and arrow will have a motion effect at an anti-clockwise 20 degree, combined with the blurring effect of the background. We will have the following program:

Effects for Duration Label

We will add a state durationLabelOpacity property to save the animation state of the Duration Label. Now the program will look like this:

Effects of Accumulation Label

The effect of this text will change according to the horizontal movement,

We will need to add the xOffset property, this value will also change based on the size of the Seek Button

Accessibility

We will need to add some Accessibility properties to Seek Button with the following code:

  • accessibility (label 🙂 will provide VoiceOver information describing Seek Button’s functionality
  • accessibility (addTraits 🙂 will initialize the .isButton property

So we have completed the steps to build a simple SeekButton using SwiftUI

Reference source

Share the news now

Source : Viblo