SwiftUI Changes in iOS 14

Apple announced many new features and cool things this year in its WWDC conference. Amongst them, some new additions to SwiftUI and the fact that Widgets must now be written with SwiftUI gave us all more reason to learn and start developing with it.

In this post, I’m going to give an overview of SwiftUI, explain it’s advantages as well as cover some of the latest additions to it.

What is SwiftUI

So back in Sept 2019 Apple released a new a toolkit/framework SwiftUI that would allow developers to create UI in a declarative way across all Apple platforms with the power of Swift.

Here are some benefits of SwiftUI. If you have worked with Flutter or React before, both use a declarative approach instead of an imperative one. So some of these benefits and the experience of working with SwiftUI should be similar.

• It’s easy to learn.
• It has declarative syntax. i.e you just declare what the desired end result is and then the framework can then work out how to get to that result. It’s easily readable, less prone to errors and can be re-used.
• It has live preview of each View that you create and you can see the results in real time. You don’t need to build the App every time.
• No interface builder and no IBOutlets association. This makes it easier to manage code and your App won’t crash due to updating of IBOutlets with variables.

Now to the fun part. Let’s look at each cool addition to SwiftUI in iOS 14. I have added screenshots of the code and simulator for each feature so it will make it easier to understand.

Let’s quickly scan through these then!

Views

TextEditor

We now have a TextEditor that supports multiple lines and it can be customised. i.e you can add custom fonts and colors to it.

ProgressViews

SwiftUI now has a progressView which can be used to show a task’s progress. It can be a progress bar or a spinning indicator.

Spinning Progress View

Progress Bar

Maps

SwiftUI now allows us to embed map views in our user interface. All you need to do is import MapKit and then define the region i.e the latitude and longitude and set it to our map.

Opening links

You can now create tappable links that will launch safari.

Lazy VGrid and HGrid

You can now make vertical and horizontal grids. And the content will be created as it comes into view. Hence the word Lazy

We can have 3 types of grid layouts:

Adaptive layout — here the grid will try to add as many items of the minimum size into each row in the grid based on the width of the grid.

Flexible layout — here you can specify the number of columns in the grid, and each of which takes equal spaces by default.

Fixed layout — here you can give a fixed width to a column

So let’s look at examples of each:

What we have done here is, we have created 500 items and we will display them based on the different layouts

Adaptive layout: In our code below the system will try and fit in as many columns and while keeping the grid item at a minimum size of 80.

Flexible layout: here we have 2 flexible items, which means that the system will distribute the grid into 2 equal columns

Fixed layout: In our code below we have fixed griditems at 60 and 150. So the system will create 2 columns of fixed widths 50 and 150

You can take all of this one step further and combine the different layouts and your grid will react to that accordingly.

Swiping through views with TabView

Swiping through different views can now be done in SwiftUI.

In the code below we are on the main swift file and we have wrapped our views (FirstContentView, SecondContentView and ThirdContentView) around a Tabview.

And we have given it a tabViewStyle of PageTabViewStyle. And that’s it. We now have a swipe-able paging view.

DatePicker

This DatePicker now has a nice calendarView for iOS 14. Very easy to implement and customize.

In the code below, the in:…Date() specifies the date range up to the current date. Therefore you see in the simulator the dates after the 15th of Aug (which was the current date at the time) are grayed out. Similarly if you were to enter in:Date()…, this would do the opposite i.e disable the dates before the current date.

ColorPicker

You can now pick colors from a native color picker. To use it you need to create a color property that can be changed using a @State. And then initialize the ColorPicker in your View.

Like this

ColorPicker(“Choose color”, selection: $bgColor)

Where bgColor is the binding state value.

Apart from these New Views that have been added. We also have new modifiers and property wrappers . Let’s go through these in brief.

Modifiers

onChange()

You can add this modifier to any view to detect changes in the program. In our code below we have added the onChange() modifier to our TextField with the binding variable text. You can see in the simulator that as the user types into the textfield the updated value for $text is printed in the debug console log.

redacted()

This modifier generates a placeholder for a view and grays out your content with the purpose of hiding it. In the code below we have added the redacted modifier to the dummy national insurance number. You can see in the simulator that the number is grayed out.

scrollTo()

If you want to scroll to a particular location of a scrollView, this is now possible by adding a scrollViewReader that has a scrollTo() method which can move to any location in the scrollview by providing its anchor and id of the item within the scrollview.

In the code below we have added 20 Text items through a loop in the scrollView. Each text item has a frame and Id. The Id will be used to scroll to that particular item. On tap of the button with value.scrollTo(9, anchor: .top) we are scrolling to the 9th item in the scrollView. The anchor:.top will make sure the item is scrolled to the top of the view.

appStoreOverlay()

This can be used to recommend other apps on the App Store. It will need a state to check if the App Store overlay is active or not, and a SKOverlay.AppConfiguration will show the recommended App. we will have to pass the app identifier to SKOverlay.AppConfiguration.

Property Wrappers

StateObject

We have previously used ObservedObject to create a reference type inside your views and use it. However the drawback of using the ObservedObject is that ObservedObject can accidentally release the object it was storing.

In iOS 14 we now have StateObject that will be used to create a reference type inside your views and makes sure it is not released and stays alive for use in that view and other views that use it.

ScaledMetric

This property wrapper can be used to automatically scale according to the user’s dynamic settings.

AppStorage

This can be used for reading and writing values to UserDefaults.

Conclusion

It’s worth noting that it would be nice to see these features like SearchController, SearchBar, ImagePickerController, RefreshControl that aren’t available yet in SwiftUI get added as well.

However I would like to say that SwiftUI in iOS 14 has a lot to offer. And definitely worth diving into it.

Hope this article has helped get an overview of some of the new features we have so far. Have fun playing with SwiftUI and happy coding!