Custom SwiftUI Components

At the end of each article, press the "Mark this article as read" button to have the site remember you've read it.

Creating a FilteringList to filter a list using text input

27:34

Creating a FilteringList to filter a list using text input

Many apps show lots of data in a list, and allow users to filter that list by typing in a text view. In this article we’re going to build that in SwiftUI, then pull it out into a reusable component you can apply anywhere.

Creating a ShapeView to render UIBezierPaths

10:03

Creating a ShapeView to render UIBezierPaths

Bezier paths let us draw all sorts of shapes efficiently and smoothly, and with a little work we can bring them into SwiftUI then animate them smooth, and in this article I’m going to walk you through making a very simple ShapeView struct to do just that.

Creating a WaveView to draw smooth waveforms

32:08

Creating a WaveView to draw smooth waveforms

In this article I’m going to walk you through building a WaveView with SwiftUI, allowing us to create beautiful waveform-like effects to bring your user interface to life.

Creating a LongPressButton to trigger after delay

16:02

Creating a LongPressButton to trigger after delay

In this article I’m going to walk you through building a LongPressButton with SwiftUI, which will requires users to press and hold for a second before it’s triggered.

Creating a FlipView to provide a card flip effect

14:11

Creating a FlipView to provide a card flip effect

If you’re looking for a simple and fun special effect to add to your code, I’ve got just the thing for you. In this article I’m going to walk you through building a FlipView with SwiftUI, which will encapsulate how to move between a front view and a back view using a 3D flip animation.

Creating an AccessibleStack that flips stack axis based on Dynamic Type

11:12

Creating an AccessibleStack that flips stack axis based on Dynamic Type

There are several times when you might want to flip between a HStack and VStack, but one useful option is to look at the Dynamic Type size. Apple uses this itself to switch list rows to a vertical layout when using larger fonts, and in this tutorial I’ll show you how it’s done.

Creating a StretchingHeader that sticks to the top of a view

18:35

Creating a StretchingHeader that sticks to the top of a view

When users scroll beyond the top of a scroll view the default behavior is to show some empty space, but many apps prefer to show a stretchy header area instead. In this article I’ll show you how to build that SwiftUI, making an image that stays fixed to the top no matter what.

Building a RadialMenu that shows many buttons around it

32:13

Building a RadialMenu that shows many buttons around it

Sometimes pressing a button needs to present more buttons, and although you can use an action sheet for this it’s not ideal because it appears in a different location. In this article I’ll show you how to build a radial menu, which solves the problem by presenting a ring of buttons close to the user’s touch.

Creating a RemoteImage to load images from the web

14:46

Creating a RemoteImage to load images from the web

Just like UIKit before it, SwiftUI doesn’t come with built-in support for loading remote images, which makes it hard to get data from the internet. In this article I’ll show you how you can build a custom view that can fetch image from the internet, while also showing other images for different states.