Jean-Marc Boullianne
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.
If you found this tutorial helpful, please consider subscribing using this link, and if you aren’t reading this on TrailingClosure.com, please come check us out sometime!
Creating DropdownPicker
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…
Jean-Marc Boullianne
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.
If you found this tutorial helpful, please consider subscribing using this link, and if you aren’t reading this on TrailingClosure.com, please come check us out sometime!
Overview
We’ll break this post up into a few different parts. …
Easiest method for implementing a custom style TabBar in SwiftUI
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!
If you found this tutorial helpful, please consider subscribing using this link, and if you aren’t reading this on TrailingClosure.com, please come check us out sometime!
struct RootView…Build a useful sidebar for your users
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.
The custom SideBarStack also takes in two parameters: sidebarWidth and showSidebar. The first allows the view to translate both the sidebar and main content correctly when the…
A SwiftUI tutorial on creating asynchronous button micro-interaction for your app
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.
Creating AsyncButton
Before we get programming, let’s explain the different states of AsyncButton:
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:
Jean-Marc Boullianne
ScrollViewWelcome 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 Wave shape.
If you found this tip helpful, please consider subscribing using this link, and if you aren’t reading this on TrailingClosure.com, please come check us out sometime!
SwiftUI Wave Shape
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…
Create simple micro-interactions in SwiftUI to add polish and ease of use to your next app.
AlignmentControl with animationsFor 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.
If you found this tip helpful, please consider subscribing using this link, and if you aren’t reading this on TrailingClosure.com, …
Lose the default Toggle style in iOS. Create your own fresh toggles to suit your app’s UI
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 makeBody(configuration:) function.
Create a Custom ToggleStyle
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.
import SwiftUI…SwiftUI tutorial on converting 2D Views and Images into isometric views using custom View Modifiers.
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.
Overview
I’ve broken the tutorial into two parts (both below):
- Applying an Isometric Transformation to a View
- Extruding an Isometric View
Before getting started, please consider subscribing using this link, and if you aren’t reading this on TrailingClosure.com, please come check us out sometime!
Throughout this tutorial, you’re going to see my best…
Implement Snap to Item scrolling in SwiftUI using this custom ViewModifier technique. This quick tip shows how it can be implemented for horizontal stacks.
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 ViewModifier.
Before getting started, please consider subscribing using this link, and if you aren’t reading this on TrailingClosure.com, please come check us out sometime!
Overview
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 DragGesture onChanged()…
