What’s new in SwiftUI for iOS 15?

Let’s take a look at amazing new features coming to SwiftUI 3.0 and what they do.

Apple announced SwiftUI 3.0 at WWDC 2021 with exciting new enhancements, features, and some deprecations for our own good.

Before we begin, it’s worth noting that for SwiftUI 3.0 you must be using Xcode 13 or higher versions. Also, your deployment target should be at least iOS 15.

In the next sections, We will look at the many improvements and features that come with SwiftUI 3.0 for iOS 15, including a new AsyncImage view for loading remote images, scroll actions for list rows, pull to refresh, and shorter, simpler APIs for general uses.

List Pull To Refresh

SwiftUI’s refreshable() modifier lets you attach functionality to a List to be triggered when the user drags down far enough. iOS will automatically show an activity indicator for as long as it takes for your code to finish running.

To get started, simply add a refreshable() modifier to your list where you do your work, like this:

Sample Code Here 👀

Pull to refresh was another missing feature. This forced us to use the UIViewRepresentable workaround. But you can integrate it in a few lines of code with the refreshable modifier with iOS 15 now.

Filter Your Data Using Search Bar

A search feature has been absent from SwiftUI lists in the previous two versions. Apple announced a searchable() modifier for lists with SwiftUI 3.0.

searchable() modifier lets us place a search bar directly into a NavigationView, which will either stay fixed for simple layouts or automatically appear and scroll when used with a list.

This is just a matter of adding searchable() to some view inside a NavigationView, like this:

Sample Code Here 👀

searchable() allows us to show a list of suggestions to our users, even adding extra completion information to save them typing so much. This is done by passing a function to searchable() that returns a view containing your suggestions, and if you want users to be able to tap to complete their search, use the searchCompletion() modifier for each suggestion.

Lists Swipe Actions

Swipe action is another new modifier for Lists within SwiftUI. What this modifier does is allow you to create a new action for cells within a List.

Let’s glance at the swipe action sample I prepared for you.

Sample Code Here 👀

Tips:

• By default, swipe actions appear from the trailing edge of the screen. But, you can also configure them to run from the leading side. For this, you need to use simply it as follows:

 .swipeActions(edge: .leading) -> Code Format

• For genuinely destructive buttons, you should use as follows rather than just assigning a red tint color.

 Button(role: .destructive) -> Code Format

• By default, the first of your swipe actions will be automatically triggered if the user swipes far enough. If you want to disable this, set allowsFullSwipe to false when creating your swipe actions.
• Swipe actions don’t work with Binding Array Lists for now.

Loading a Remote Image From a URL

One of the important stuff that comes with SwiftUI 3.0 is AsyncImage.

AsyncImage connects to the given URL and downloads the remote image asynchronously. It also automatically renders a placeholder in gray while the image is not yet ready for display. Once the image is completely downloaded, AsyncImage displays the image in its intrinsic size.

If you want to make the image smaller or larger, you can pass a scaling value to the scale parameter. Also, AsyncImage provides the resulting image for manipulation. We then apply the resizabel(), frame(), and scaledToFill() modifier to resize the image.

The simplest way to use AsyncImage is by specifying the image URL like this:

Sample Code Here 👀

AsyncImage uses the URLSession, So it provides out-of-box support for caching, and It does provide several other features that can help with the different loading states of an image. These states include, as seen in the sample:

• When the image is successfully loaded.
• When the image is being loaded.
• When the image failed to load.

@FocusState and Alternative Done Button

In practice, this is a great place to use something like @FocusState to move between input fields in your UI or to show and hide the keyboard altogether.

Instead of using the ‘Done’ button on the keyboard, we can add a custom button like ‘Search’, ‘Go’, etc.

Let’s glance at the following sample:

Sample Code Here 👀

Rendering Markdown Content in Text

Markdown is everywhere: on GitHub, on Stack Overflow… and now, SwiftUI 3.0 has this great markup language support.

Let’s glance at the following sample:

Also, to customize a range of characters in the string, there’s an all-new AttributeString API for SwiftUI.

let visitUrlString = try AttributedString(markdown:”**Visit** to [website](https://example.com)")

Here’s Markdown Usage:

• Italics *Italics*
• Bold **Bold**
• Strikethrough ~Strikethrough~
• Code `Code`
• Link [Link](https://apple.com)

Note: If you use Markdown, you cannot control the color.

New SwiftUI Material Struct

You can blend foreground elements with the background by adjusting translucency and vibrancy to the views of your material using the Material struct. From thinnest to thickest, they are:

.background(.ultraThinMaterial)
.background(.thinMaterial)
.background(.regularMaterial)
.background(.thickMaterial)
.background(.ultraThickMaterial)

Let’s glance at the following sample:

Sample Code Here 👀

As you can see, the Material Struct is a good alternative to visually blurring your SwiftUI views.

Badge Count on Tab Items

A badge can only be used in the TabView. It displays badge count on tab items. This is available in SwiftUI TabViews with iOS 15.

Let’s glance at the following sample:

Sample Code Here 👀

New Button Styles

We have new button roles and styling modifiers with SwiftUI 3.0

We can specify the button type (role) using ButtonRole. It can take the following values:

• cancel
• destructive
• none
• some()

Besides, we can change the style of the buttons using buttonStyle. We can use BorderedButtonStyle, BorderlessButtonStyle, PlainButtonStyle or DefaultButtonStyle options.

Let’s glance at the following sample:

Sample Code Here 👀

Conclusion

In this article, I’ve explained some major SwiftUI 3.0 features announced at WWDC 2021. For more information on the above items, please refer to the following link.

What's new in SwiftUI - WWDC21 - Videos - Apple Developer

That’s all for now. Thanks for reading.