Section 1.1: Setting Up the Project

First, let’s launch Xcode 14 and initiate a new SwiftUI file named Data. In this file, we will incorporate the step count and movement metrics. We will utilize SF Symbols for our icons.

import SwiftUI

let data = [

DataItem(imageName: "drop.fill", imageColor: Color.blue, value: "0", unit: "Mile"),

DataItem(imageName: "flame.fill", imageColor: Color.orange, value: "0", unit: "Kcal"),

DataItem(imageName: "stopwatch.fill", imageColor: Color.green, value: "0u{1D0D}", unit: "Time")

]

struct DataItem {

let id = UUID()

let imageName: String

let imageColor: Color

var value: String

let unit: String

}

struct StepData {

var count: Int = 0

var mileCount: CGFloat = 0

var caloryCount: Int = 0

var minuteCount: Int = 0

var goal: Int

}

Section 1.2: Defining Custom Colors

Next, we'll define our color palette by creating a ColorConstants file. This will help us maintain a cohesive color scheme throughout our UI.

import SwiftUI

struct ColorConstants {

static let topColor1 = Color(red: 31/255, green: 15/255, blue: 119/255)

static let topColor2 = Color(red: 12/255, green: 39/255, blue: 186/255)

static let bottomColor1 = Color(red: 100/255, green: 24/255, blue: 131/255)

static let bottomColor2 = Color(red: 221/255, green: 19/255, blue: 130/255)

static let backgroundGradient = Gradient(

colors: [bottomColor1, bottomColor2, topColor1, topColor2])

}

Section 1.3: Creating the Top Bar

Now, we will implement a TopBarView that will be used later in our tutorial.

import SwiftUI

struct TopBarView: View {

var body: some View {

HStack {

Image(systemName: "line.horizontal.3")

Spacer()

Text("Today")

Spacer()

Image(systemName: "bell.badge.fill")

}

.foregroundColor(.white)

.font(.title)

.padding(.top, 20)

}

}

Section 1.4: Building the Main UI

Let’s proceed to develop the main UI in the ContentView using an AngularGradient.

What is AngularGradient in SwiftUI?

An angular gradient, also known as a "conic" gradient, applies color based on the angle relative to a center point. The gradient smoothly transitions between colors as the angle changes.

struct ContentView: View {

var body: some View {

ZStack {

AngularGradient(

gradient: ColorConstants.backgroundGradient,

center: .bottomTrailing,

startAngle: .degrees(170),

endAngle: .degrees(270))

.blur(radius: 70, opaque: true)

}

}

.edgesIgnoringSafeArea(.all)

}

Awesome! 🎉 After setting up the gradient, we will introduce a VStack to house all UI components, including the TopBarView.

struct ContentView: View {

var body: some View {

ZStack {

AngularGradient(

gradient: ColorConstants.backgroundGradient,

center: .bottomTrailing,

startAngle: .degrees(170),

endAngle: .degrees(270))

.blur(radius: 70, opaque: true)

VStack {

TopBarView()

.padding(.leading, 20)

.padding(.trailing, 20)

.padding(.top, 44)

}

}

.edgesIgnoringSafeArea(.all)

}

}

Next Steps: Creating Progress Views

Now, let’s create a new SwiftUI file called ProgressGoalView to display the progress. We will employ the @EnvironmentObject protocol for this functionality.

What is the @EnvironmentObject in SwiftUI?

An environment object allows a view to react to changes in an observable object. Declaring a property as an environment object requires setting up the corresponding model object in an ancestor view.

import SwiftUI

struct ProgressGoalView: View {

@EnvironmentObject var manager: StepCountManager

var body: some View {

// UI code for displaying progress will go here

}

}

Insert YouTube Video Here

Now, let's take a look at a related tutorial on creating a pedometer app:

Next Steps: Managing Step Count

We will now develop the StepCountManager class, which will utilize the @Published protocol.

What is @Published in SwiftUI?

This is a Combine framework type that publishes properties marked with this attribute.

import SwiftUI

class StepCountManager: ObservableObject {

@Published var stepData: StepData = StepData(goal: 6000)

// Other properties and methods for managing step count

}

Insert Second YouTube Video Here

For further insights, check out this video on counting steps using CMPedometer in SwiftUI:

Conclusion

Congratulations! 🎉 You have successfully completed the tutorial for designing a Step Counter UI in SwiftUI 4 and Xcode 14. You've learned to implement the @EnvironmentObject protocol and create animations. With this knowledge, you can now develop more sophisticated applications.

For the complete source code, visit our Patreon. If you enjoyed this tutorial, don't forget to subscribe to our YouTube channel for more exciting SwiftUI content and stay updated on upcoming tutorials via Instagram.

Thank you for reading!