SwiftUI in iOS 16
At WWDC22 Apple introduced a lot of cool new features. The ones that stood out to me were; the ability to add a more personal touch to the lock screen, Live Activities which allow you to stay up to date on what’s happening in real time, and Notifications which now appear at the bottom of the screen, and are more organised.
Today though, I will be focusing on the new updates to SwiftUI, which was one of the main topics of the conference.
In this article we will look specifically at some of the new Swift UI features for iOS 16. See list below:
- Navigation Stack
- Table
- Grids
- BottomSheets
- MultidatePicker
- ShareLink
- Anylayout
- ViewThatFits Container
- scrollDismissesKeyboard modifier
- SF Symbols
- Text animation
- Swift Charts
Looks like we have quite a bit to get through, so let’s get straight into it.
Navigation Stack
SwiftUI provides the new data-driven Navigation API. The old NavigationView has been deprecated. We now have the NavigationStack and the updatedNavigationLink.
The NavigationLink type adds new data-driven capabilities. A new initializer allows you to create a link bound to some value.
Let’s look at an example: We have a struct Item with title and price.
The ContentView which will have our list of items, and the ProductDetailView which will show the details of that item when tapped.
In the ContenView we define an array of Items of type [Item]. It has 2 values in it.
The NavigationStack is the root of our view hierarchy. We then have a list of items and each item should navigate to the item details screen.
We are using the new value-based NavigationLink to take the user to the next screen. Notice how we associate every item on the list with a particular value. Here the value is our item object. (Line 9)
We then define a destination view (Next Screen) using the navigationDestination view modifier.
Table
Up until iOS 16 we only had List which are used to enable scrolling through an extensive data set arranged in a single column.
iOS 16 and iPadOS 16 introduces Table. A table presents rows of data arranged in multiple columns.
iPad simulator:
Note that Table will not work as expected on iOS. If you try running the same code on iOS you will see only the first column. There is little more work to do on the iOS side.
iPhone:
According to Apple:
macOS and iPadOS support SwiftUI tables. On iOS, and in other situations with a compact horizontal size class, tables don’t show headers and collapse all columns after the first. If you present a table on iOS, you can customize the table’s appearance by implementing compact-specific logic in the first column.
What this means is that we need to use the horizontalSizeClass which tells us the value tells us about the amount of space available to your views in a given direction. This class can return a regular value meaning we have lots of space available, so for example iPad, or it can return compact value when the space is limited.
For iPhones, compact will be returned.
Let’s look at how we can implement this in the code snippet below.
In the first TableColumn (lines 19,20) we check if it’s a compact size , if so then in that TableColumn we load the TableRowView class which contains the givenName, familyName and emailAddress in a Horizontal stack.
The output will look like this:
Grids
Grid view allows you to create a static grid of views, with control over what goes into each row and column. A Grid view arranges child views in rows and columns. And this table-like structure makes a layout that is hard to do in vertical and horizontal stacks become easier.
A Grid is populated with a GridRow and each GridRow represents each cell/column in a Grid view. Lets look at an example:
You might be wondering what’s the difference between doing it this way and using a HStack and VStack. Let’s take a look at the code for the HStack and VStack:
You will get the below result:
The difference being that each cell/column of the HStack isn’t related to the other rows. A horizontal stack layout its components without considering other rows while a Grid handles row and column creation as a single operation. Which is why each column in a Grid will take the same space across the row. Grid width and height grow according to its child view.
There’s a lot you can do with this and definitely worth playing around.
Bottom sheets
The new presentationDetents() modifier allows you to create a sheet that can slide up from the bottom. And we can set how much of the screen we would want it to occupy.
Here we set the presentationDetents to medium and large. This will allow the user to adjust the size of the sheet to medium i.e half screen and large i.e full screen.
You can also provide a fraction as to how much of the screen the sheet should occupy like this: .presentationDetents([.fraction(0.15)]). In this case the sheet would take up 15% percent of the screen.
MultiDatePicker
Just as the name suggest , the MultiDatePicker now allows you to select multiple dates at once.
ShareLink
We now have a new way of showing the share sheet through ShareLink. ShareLink takes in an item that can be a string, URL, basically anything that conforms to Transferable.
AnyLayout
This new struct will allow the user to switch between HStack and VStack based on the environment context.
Example if we wanted to align a group of images horizontally when we’re in a regular horizontal size class, or vertically otherwise.
When the phone is in portrait mode we should see the images displayed vertically.
And when we switch to landscape , we should see the images horizontally.
ViewThatFits Container
This new container allows us to provide multiple views and the system will then automatically pick the first one which fits into available space. This is very useful when building adaptive layouts.
Example:
Here we have an array of textValues. The first text is a short one and the next text is a very long one.
What we want to achieve is for the short text we want to show the text as it is, but for the longer text values we want to show a more button at the side of it which can be used to show the whole text.
In the code above, the ViewThatFits container has a Text View and a HStack with a Text View and More Button.
For the first item, the ViewThatFits container checks if the text in the Text view fits into its parent container and since it does , it stops there.
For the second item, the text does not fit into the first Text View , so ViewThatFits uses the next view i.e the HStack with the Text and Button.
scrollDismissesKeyboard()
This modifier allows the user to control how the keyboard should dismiss when the user scrolls around.
This modifier takes in 4 values:
.automatic — lets the system decide what’s the best thing to do based on the context of the scroll.
.immediately — dismisses the keyboards as soon as the scroll happens.
.interactively — dismiss keyboard inline with the user’s gesture
.never — the keyboard will always be present.
Example of the interactively value:
The result: You can see that the keyboard is being dismissed as the user scrolls down.
SF Symbols
More than 700 new symbols have been added in SF Symbols 4. This will help our apps look more native. One of the really cool features this year for SF symbols is the variable color.
This means that colors can now be dynamically applied to system and custom symbols using a percentage value to convey strength or progress over time.
Let’s look at an example:
What we have done here is the value assigned to the icons can change as we slide the slider. The value is binded to the slider. This will cause the images to reflect color change.
Text animation
You can animate all text characteristics by using just withAnimation.
Let’s look at an example:
Here we are switching between 2 font weights and colors. Adding the withAnimation will add a nice animation between the 2 states.
Swift Charts
Converting your data into line charts, bar charts and scatter plots has never been easier.
The new swift UI charts allows you to create charts with very little code. When you create a chart using this framework, it automatically generates scales and axes that fit your data.
Example:
The first thing you need to do is define your datasource. Also make sure you import Charts.
Here we have a struct of an energy bill.
Next we import Charts and create an array of energy bills and then in the body we create a Chart with individual BarMark giving it a x for month, and y value for the amount. The results looks like this:
You can change the BarMark to PointMark and that will give you a point on the chart.
Conclusion
It’s nice to see there’s so much being done on the SwiftUI side and there is still so much more to learn from this year’s iteration.
During Platforms State of the Union talks this year Apple said “the best way to build an app is with Swift and SwiftUI.”
Which of these new additions did you like the most?
Thank you so much for taking the time to read and I really hope you enjoyed the article.
