SwiftUI Component Design & Animation in a Stock Market App

Name: SwiftUI Component Design & Animation in a Stock Market App
Rating: 5.0 (2 reviews)

Build scalable, reusable SwiftUI components using protocol-based styling and bring your stock app to life

Created byNorbert Grover

Last updated 8/2025

English

What you'll learn

Break SwiftUI views into reusable, modular components
Display live data using lists, grids, and stacks in SwiftUI
Build animations for charts and progress indicators
Handle async data with Swift Concurrency (async/await)
Create styled wrappers using @ViewBuilder and generics
Apply consistent design using protocol-based view styles
Build flexible UIs using computed properties and extensions
Use @StateObject and @ObservedObject correctly in MVVM
Animate UI updates to reflect changing stock data
Develop polished, production-ready interfaces with SwiftUI

Course content

2 sections • 20 lectures • 2h 39m total length

Introduction4:03
This lesson describes the course.
Describing the first project2:00
This is a simple introduction to the StockPrices app that we will be working on.
Coding the Models and the 'RadialProgressView'18:03
RadialProgressView is a custom SwiftUI component that displays a circular progress indicator. It visually represents a progress value (from 0.0 to 1.0) with an animated arc and a percentage label in the center.
@Binding var progress: Double
This allows the view to receive a binding to a progress value managed elsewhere.
The view does not own the data; instead, it reflects changes and updates from a parent view.
This supports dynamic interaction—any change to the bound value triggers a UI update.
body Content
ZStack {
...
}
.frame(width: 150, height: 150)

ZStack overlays the circular background, progress arc, and label.
The .frame modifier sets a fixed size for the entire view.
Background Circle
Circle()
.stroke(lineWidth: 12)
.opacity(0.3)
.foregroundColor(.blue)

This creates a static circular outline with reduced opacity to serve as the progress track.
It uses a blue color with no fill and a 12-point stroke width.
Progress Arc
Circle()
.trim(from: 0, to: progress)
.stroke(style: StrokeStyle(lineWidth: 12, lineCap: .round))
.rotationEffect(.degrees(-90))
.foregroundColor(.green)
.animation(.easeOut(duration: 0.5), value: progress)

trim(from: 0, to: progress) draws a partial circle based on the current progress value.
stroke(style:) applies rounded ends to the arc.
rotationEffect(.degrees(-90)) rotates the start of the progress arc to the top instead of the default right.
The .animation modifier animates changes to the progress value smoothly.
Center Label
Text("\(Int(progress * 100))%")
.font(.title)
.bold()

Displays the progress as a percentage in the center of the circle.
Uses a bold, large font to make the value prominent.
Summary
RadialProgressView is a visually clear and reusable component for displaying progress:
It uses SwiftUI’s declarative drawing tools.
It separates the background from the animated arc.
It includes a textual representation of the progress.
Coding the ViewModel: 'StockViewModel'.11:24
import Foundation
Imports the Foundation framework, which provides essential types like Task and @MainActor.
This file doesn’t need SwiftUI directly, as it’s only managing the model logic.
@MainActor
Ensures that all code inside the StockViewModel class runs on the main thread.
This is crucial because UI-bound data (e.g., @Published properties) must be updated on the main thread to prevent race conditions or UI inconsistencies.
Without this, updating the UI from a background thread would crash or misbehave.
class StockViewModel: ObservableObject
Defines a view model class conforming to ObservableObject, which allows SwiftUI views to observe it.
When properties marked with @Published change, SwiftUI views using this view model will automatically update.
@Published var stocks: [Stock] = []
@Published makes this property observable.
An empty array of Stock objects that will be updated as new data streams in.
When the array changes, any SwiftUI view that uses this view model will re-render accordingly.
@Published var progress: Double = 0.0
Another observable property, representing a progress value from 0.0 to 1.0.
Used for tracking loading progress, often visualized in the UI (like with your RadialProgressView).
func loadStockStream()
This is an asynchronous function that starts loading a simulated stream of stock updates.
Task {
for await update in MockStockAPI.stockPricesStream() {
self.stocks = update.stocks
self.progress = update.progress
}
}

Breakdown:
Task { ... }: Launches a new concurrent task (runs asynchronously).
for await update in MockStockAPI.stockPricesStream(): Uses Swift’s asynchronous sequence pattern to receive periodic updates from a mocked API.
stockPricesStream() is expected to be an async sequence yielding update values over time.
Inside the loop:
self.stocks = update.stocks: Replaces the current list with the new stock data.
self.progress = update.progress: Updates the progress indicator.
Each iteration represents a new batch of data from the stream, updating both the stock list and the UI’s progress in real time.
Coding the DashboardView20:33
In this video we will be coding the 'DashboardView'
Coding and Repairing the DashboardView3:21
I am taking the student, step by step, through debugging and repairing errors in the 'DashboadView' code.

Different Types of Components1:08
This lecture explains creating reusable components along with the pros and cons of creating different types of reusable components.
Custom View structs -- Fully reusable UI components
Computed view properties -- Structuring code inside a single view
View extensions -- Reusable styling modifiers
ViewBuilder functions -- Lightweight dynamic views
Generic views -- Flexible layouts with custom content
Protocol-based styling -- Consistent style patterns across views
Explaining a Custom View in SwiftUI0:50
A custom view is ideal when you have a UI element that repeats across your app or encapsulates specific styling, layout, or behavior. Creating a custom view improves code reuse, readability, and maintainability.
Coding the Custom View38:06
In this SwiftUI tutorial, you'll learn how to build a clean, modular stock list interface using the MVVM (Model-View-ViewModel) architecture. We'll walk through creating reusable views, separating business logic with a view model, and introducing a simple service layer to simulate data fetching.
What you’ll learn in this video:
How to define a Stock model
Building a reusable StockRowView component
Creating a StockService to fetch stock data asynchronously
Implementing StockViewModel using @Published and @MainActor
Connecting the view model to the UI with @StateObject
Best practices for SwiftUI data flow and reusability
By the end, you'll have a well-structured SwiftUI app that's clean, testable, and easy to extend.
Explaining using a Computed Property for a Component0:56
Creating a SwiftUI component using a computed property is a lightweight and practical way to modularize UI code within the same view—especially when the component doesn't need to be reused across multiple views.
Coding the Computed Property Component5:30
Creating a SwiftUI component using a computed property is a lightweight and practical way to modularize UI code within the same view—especially when the component doesn't need to be reused across multiple views.
Explaining the use of View Extensions0:49
Implementing a view extension in SwiftUI means adding reusable modifiers or helper methods to the View protocol using Swift’s extension mechanism.
Coding the View Extension8:02
In this quick SwiftUI tutorial, learn how to create and use view extensions to simplify and standardize your UI styling. We'll walk through building a reusable modifier using Swift’s View protocol extension, and show how to apply it to keep your views clean, consistent, and easy to maintain. Perfect for reducing repeated code and improving readability in your SwiftUI projects.
Explaining the @ViewBuilder1:28
@ViewBuilder is a special Swift attribute that tells the compiler how to take multiple views inside a closure or function and combine them into one view.
Coding using the @ViewBuilder11:19
In this SwiftUI tutorial, you'll learn how to use @ViewBuilder to create flexible and reusable UI components. We'll walk through a hands-on example where we build a custom view that accepts multiple child views, just like VStack or HStack. You'll see how @ViewBuilder works, when to use it, and why it's essential for building declarative SwiftUI layouts. Perfect for beginners looking to write cleaner, more modular SwiftUI code.
What is a Generic View in SwiftUI?1:04
A generic view is a view that can hold any kind of content, but you don’t tell it what that content is ahead of time. Instead, you let the person using the view decide what goes inside it.
Wrapper (CardWrapper), Main View (ContentView), and the (StockListContent)1:07
Coding The Generic View13:38
SwiftUI View Relationship Summary
CardWrapper is a reusable layout container that defines styling and visual structure. It applies padding, background, corner radius, or any other consistent styles to whatever content is passed into its closure. It does not care what the content is—just how it looks.
StockListContent is responsible for presenting the data from the StockViewModel. It decides how to display the stock information—using a ForEach, List, or any other layout—based on what the model provides.
ContentView brings everything together. It owns the StockViewModel, passes it to StockListContent, and wraps that view in CardWrapper to apply consistent styling.
This structure separates layout, data display, and composition clearly, making your SwiftUI code easier to maintain and reuse.
Explaining Protocol-Based Styling in SwiftUI1:30
Using protocol-based styling in SwiftUI is a way to standardize and reuse styles across multiple views by defining a protocol that includes common styling logic. You then extend that protocol to provide default implementations using SwiftUI view modifiers.
This is helpful when:
You want consistent look and feel across components.
You don’t want to repeat the same .padding(), .background(), .cornerRadius(), etc.
You want flexibility without locking your views into a specific layout or container.
Coding Protocol Based Styling15:02
Protocol-based styling means you define a protocol and use an extension on that protocol to add reusable styling logic. You then conform your custom views to the protocol and use the styling methods from within those views.
This approach lets you:
Apply consistent layout and visual styles
Reuse styling logic across multiple views
Scope styling behavior to only the views you choose (opt-in)

Requirements

Basic understanding of the Swift programming language
Familiarity with Xcode and running SwiftUI previews
Access to a Mac computer with Xcode installed
Some experience building basic SwiftUI views
Interest in learning how to build modern iOS UIs
No advanced math or computer science background needed
No experience with Combine or UIKit required
Willingness to follow along with hands-on coding
iOS 15+ or macOS Monterey+ recommended for features used
Curiosity to explore SwiftUI patterns and techniques

Description

Learn how to build clean, scalable, and animated SwiftUI apps by mastering the art of component-based design and reusable architecture. In this course, you’ll develop a complete stock tracking interface while learning how to decompose views, implement protocol-based styling, and create smooth animated visualizations for real-time stock data.

We start with the foundation of SwiftUI’s declarative structure and walk through how to break a large view into smaller, focused components. You’ll learn multiple methods to structure your views:

Using computed properties to isolate static subviews
Creating custom view structs for reusable building blocks
Leveraging generic views to accept flexible, styled content
Using @ViewBuilder functions for lightweight layout wrappers
Applying view extensions and protocols for consistent style systems

You’ll implement protocol-based styling by creating view protocols with extension methods that encapsulate layout and visual rules. This lets your views apply consistent designs—like card layouts or themed backgrounds—without duplicating modifiers.

Later in the course, we integrate chart and progress view animations. You’ll build a radial progress indicator and animate it using @State, @Binding, and @Published properties tied to a ViewModel. This teaches you how to sync animations with live data updates.

Whether you're building stock apps or any data-driven UI, this course gives you a repeatable system for crafting modular, visually polished, and interactive SwiftUI apps.

Who this course is for:

iOS developers looking to improve their SwiftUI skills
Beginners transitioning from UIKit to SwiftUI
Developers building data-driven iOS apps
Swift programmers wanting to write cleaner, modular UIs
Students learning mobile app development with Swift
Engineers interested in UI animations and interactivity
Designers who want to understand SwiftUI implementation
Hobbyists creating personal iOS projects or dashboards
Junior developers aiming to polish production-level apps
Coders preparing for iOS development interviews or roles

SwiftUI Component Design & Animation in a Stock Market App

What you'll learn

Explore related topics

Course content

Introduction6 lectures • 59min

Organizing Code Into Reusable Components14 lectures • 1hr 40min

Requirements

Description

Who this course is for: