The default Pickers in SwiftUI don’t leave you much opportunity for styling or customization. Today I’ll walk through creating a custom dropdown picker that you can use in your next iOS project.
Start off by creating a new SwiftUI View named
DropdownPicker. Like the built-in iOS picker we'll need to keep track of a few things. First the
title of the picker, the available
options the user may select, and finally the user's…
This week’s SwiftUI tutorial is focusing on a popular running and cycling app, Strava. In this tutorial, I’ll walk through how I recreated the activity history graph which is displayed inside the Strava app. As usual, I’ll break it down into bite-size chunks and explain along the way.
We’ll break this post up into a few different parts. …
Here’s an easy quick tip for this week. Have you ever wanted to customize the
TabView's TabBar in SwiftUI? Don't reinvent the component from scratch. The method I show below simply uses the native
TabView in SwiftUI and overlays your custom TabBar component on top. Your component will handle the user taps and selections by passing them on to the native
TabView via its
selection parameter. See below for how it's done!
Today, I decided to mess around with a SwiftUI view that allows me to easily create a sidebar menu for content inside my apps. After designing a few prototypes, I generalized it into a single custom view class called
SideBarStack, as shown below:
As you can see, the custom view utilizes the
@ViewBuilder property wrapper twice to allow you to pass in custom content for both the sidebar and actual view content.
SideBarStack also takes in two parameters:
showSidebar. The first allows the view to translate both the sidebar and main content correctly when the…
Welcome back! This week’s articles cover an assortment of SwiftUI micro-interactions that I’ve made for my apps. The benefits these interactions bring can really help make your app feel polished and simple to use.
Today’s micro-interaction tutorial is about creating a custom button for asynchronous tasks such as downloading, sending, or loading data.
Before we get programming, let’s explain the different states of
inactive— User has not started asynchronous task.
inProgress— Actively processing asynchronous task.
isComplete— Asynchronous task complete.
During each of these states, the
AsyncButton will show a different
View describing the asynchronous task:
Welcome back! This week’s posts cover an assortment of SwiftUI micro-interactions that I’ve made for my apps. The benefits these interactions bring can really help make your app feel polished and simple to use. Today’s micro-interactions are all based on my custom
These animations all start with one thing in common and that’s my custom SwiftUI Shape struct,
Wave. The way this shape works is by drawing a continuous wave from the…
For the next few posts, I’m going to cover a few micro-interactions that I’ve made for my apps. The benefits these interactions bring can really help make your app feel polished and simple to use. As we get started these examples should help get you thinking about what’s possible in your app. As we dive in, I encourage you to mess around with the code to really get a view for what’s possible and looks good.
My SwiftUI quick tip for this week covers custom
Toggle views! You can easily apply your own style to SwiftUI toggles by using the
ToggleStyle protocol. The best part is you don't need to worry about implementing any of the backing properties of the
Toggle. Simply toggle the
isOn property inside the
Configuration instance that's passed from the
Start off by creating a new struct, and make sure to inherit from the
ToggleStyle Protocol. Then, implement the
makeBody(configuration:) function. This is where you'll construct your custom
View to be shown in place of the default switch.
The other day I started messing around with converting 2D designs into isometric views in Figma. I thought it might be neat to create a
ViewModifier in SwiftUI that does the same thing. After posting a screenshot of my work on twitter, I decided to write this tutorial.
I’ve broken the tutorial into two parts (both below):
Throughout this tutorial, you’re going to see my best…
One of the biggest things I’m missing with SwiftUI is the ability to snap to views as I scroll in a
ScrollView. Below is a technique I use to implement snapping on my
HStack with a custom
Instead of using a
ScrollView, this technique uses an
HStack with a dynamically changing x-offset to simulate scrolling. To change the offset I use a
DragGesture to calculate the scroll distance. You'll see below inside the