WWDC 22 is passed so quick, isn’t it? SwiftUI is one of the most awaited subjects from developers in WWDC 22. Some of the developers are satisfied with the new features for SwiftUI, but some are not.
Here are the features that will be in SwiftUI 4.0, iOS 16.
<h2>Hide Home Button(Indicator)</h2>
<a href="https://developer.apple.com/documentation/swiftui/view/persistentsystemoverlays(_:)" target="_blank" rel="noopener nofollow">Apple’s Documentation</a>
Some screens are required a lot of taps and focus from the user. To achieve this goal, we can hide the bottom native indicator in SwiftUI not.
<pre data-label="HideHomeButton.swift"><code class="language-swift">var body: some View {
 EmptyView()
 .persistentSystemOverlays(.hidden)
}</code></pre>
<img class="alignnone wp-image-2860 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1ffO92-_IuEjKaDOc876xfw.gif" alt="Hide Home Button(Indicator)" width="296" height="640" />
<h2>Navigation Stack</h2>
<a href="https://developer.apple.com/documentation/swiftui/navigationstack" target="_blank" rel="noopener nofollow">Apple’s Documentation</a>
The new way to manage navigations instead of NavigationView.
With the new NavigationStack, we can define multiple destinations by the model.
<pre data-label="NavigationStack.swift"><code class="language-swift">let vehicles: [Vehicle] = [
 .init(name: &quot;Car&quot;, iconName: &quot;car&quot;),
 .init(name: &quot;Bus&quot;, iconName: &quot;bus&quot;),
 .init(name: &quot;Airplane&quot;, iconName: &quot;airplane&quot;)
]

var body: some View {
 NavigationStack {
 List(vehicles) { vehicle in
 NavigationLink(value: vehicle) {
 Label(vehicle.name, systemImage: vehicle.iconName)
 }
 }
 .navigationDestination(for: Vehicle.self) { vehicle in
 VehicleDetailView(vehicle: vehicle)
 }
 }
}</code></pre>
<img class="alignnone wp-image-2861 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1gZrmkuDN5S1DlY59uMdplA.gif" alt="Navigation Stack" width="296" height="640" />
<h2>Half Sheet</h2>
It is one of the features developers mostly demand. Finally, Apple is making it public for us!
All we need to do is call the presentationDetents function of the view we will show as the half sheet.
The function takes detents as the parameter to set the height of the sheet. We can also set a constant height by typing .height(200).
<pre data-label="HalfSheet.swift"><code class="language-swift">@State var isPresentedHalfSheet: Bool = false

var body: some View {
 Button {
 self.isPresentedHalfSheet.toggle()
 } label: {
 Text(&quot;Present half sheet&quot;)
 }
 .sheet(isPresented: $isPresentedHalfSheet) {
 HalfSheetView()
 .presentationDetents([.medium, .large])
 }
}</code></pre>
<img class="alignnone wp-image-2862 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/13h9HdpCstuhEW44gCElyAA.gif" alt="Half Sheet" width="296" height="640" />
<h2>Swift Charts</h2>
<a href="https://developer.apple.com/documentation/Charts/Chart" target="_blank" rel="noopener nofollow">Apple’s Documentation</a>
There are different chart styles we can use in the library.
BarMark, LineMark, AreaMark, PointMark, RectangleMark, RuleMark.
<img class="alignnone wp-image-2863 size-large" src="https://ac.appcircle.io/wp-content/uploads/2022/06/11rrZye26KjcOXZPpX4xGhw-1030x577.png" alt="Swift Charts" width="1030" height="577" srcset="https://ac.appcircle.io/wp-content/uploads/2022/06/11rrZye26KjcOXZPpX4xGhw-1030x577.png 1030w, https://ac.appcircle.io/wp-content/uploads/2022/06/11rrZye26KjcOXZPpX4xGhw-300x168.png 300w, https://ac.appcircle.io/wp-content/uploads/2022/06/11rrZye26KjcOXZPpX4xGhw-768x430.png 768w, https://ac.appcircle.io/wp-content/uploads/2022/06/11rrZye26KjcOXZPpX4xGhw-705x395.png 705w, https://ac.appcircle.io/wp-content/uploads/2022/06/11rrZye26KjcOXZPpX4xGhw.png 1400w" sizes="(max-width: 1030px) 100vw, 1030px" />
Here is an example of the bar chart.
<pre data-label="SwiftCharts.swift"><code class="language-swift">let chartData: [KeyValue] = [
 .init(key: &quot;A&quot;, value: 5),
 .init(key: &quot;B&quot;, value: 10),
 .init(key: &quot;C&quot;, value: 15)
]

var body: some View {
 Chart(chartData) {
 BarMark(x: .value(&quot;Key&quot;, $0.key),
 y: .value(&quot;Value&quot;, $0.value))
 }
}</code></pre>
<img class="alignnone wp-image-2864 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1pZqKojN2N8k5R_isgKHQpg.png" alt="Swift Charts" width="301" height="572" srcset="https://ac.appcircle.io/wp-content/uploads/2022/06/1pZqKojN2N8k5R_isgKHQpg.png 301w, https://ac.appcircle.io/wp-content/uploads/2022/06/1pZqKojN2N8k5R_isgKHQpg-158x300.png 158w" sizes="(max-width: 301px) 100vw, 301px" />
<h2>Multi Date Picker</h2>
<a href="https://developer.apple.com/documentation/swiftui/multidatepicker" target="_blank" rel="noopener ugc nofollow">Apple’s Documentation</a>
The component provides to choose multi dates through the native date picker.
<pre data-label="MultiDatePicker.swift"><code class="language-swift">@State var selectedDates: Set&lt;DateComponents&gt; = []

var body: some View {
 MultiDatePicker(&quot;Dates&quot;, selection: $selectedDates)
}</code></pre>
<img class="alignnone wp-image-2865 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1O-tPJM46I-HIdtS8nF3TJA.gif" alt="Multi Date Picker" width="296" height="640" />
<h2>Custom Layout</h2>
<a href="https://developer.apple.com/documentation/swiftui/anylayout" target="_blank" rel="noopener nofollow">Apple’s Documentation</a>
In case the layout style has to be changed by the user’s interaction, AnyLayoutprovides to achieve it.
<pre data-label="CustomLayout.swift"><code class="language-swift">@State var changeLayout: Bool = false

var body: some View {
 let layout = changeLayout ? AnyLayout(HStack()) : AnyLayout(VStack())

 VStack {
 layout {
 Text(&quot;First&quot;)
 Text(&quot;Second&quot;)
 }

 Button {
 self.changeLayout.toggle()
 } label: {
 Text(&quot;Change Layout&quot;)
 }
 }
}</code></pre>
<img class="alignnone wp-image-2866 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/12mvz3XBr-Gm3qkvvvglZFA.gif" alt="Custom Layout" width="296" height="640" />
<h2>Photos Picker</h2>
<a href="https://developer.apple.com/documentation/photokit/photospicker" target="_blank" rel="noopener nofollow">Apple’s Documentation</a>
It is used to choose multiple photos in the album.
<pre data-label="PhotosPicker.swift"><code class="language-swift">@State var selectedPhotos: [PhotosPickerItem] = []

var body: some View {
 PhotosPicker(selection: $selectedPhotos) {
 Text(&quot;Choose photos&quot;)
 }
}</code></pre>
<img class="alignnone wp-image-2867 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1bE3NP_FOlZoWiauytsewMw.gif" alt="Photos Picker" width="296" height="640" />
<h2>Shape Style Extensions</h2>
We can set foreground and background styles to views. These styles support set gradient colors and shadows.
<pre data-label="ShapeStyleExtensions.swift"><code class="language-swift">var body: some View {
 VStack {
 VStack {
 Image(systemName: &quot;person&quot;)
 }
 .background(in: Circle().inset(by: -20))
 .backgroundStyle(.orange.gradient)
 .foregroundStyle(.white.shadow(.drop(radius: 1)))

 VStack {
 Image(systemName: &quot;house&quot;)
 }
 .background(in: RoundedRectangle(cornerRadius: 16).inset(by: -20))
 .backgroundStyle(.orange.gradient)
 .foregroundStyle(.white.shadow(.inner(radius: 1)))
 }
}</code></pre>
<img class="alignnone wp-image-2868 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1o0AFRsK0Y0z2_DABQJMzVA.png" alt="Shape Style Extensions" width="301" height="572" srcset="https://ac.appcircle.io/wp-content/uploads/2022/06/1o0AFRsK0Y0z2_DABQJMzVA.png 301w, https://ac.appcircle.io/wp-content/uploads/2022/06/1o0AFRsK0Y0z2_DABQJMzVA-158x300.png 158w" sizes="(max-width: 301px) 100vw, 301px" />
<h2>ViewThatFits</h2>
<a href="https://developer.apple.com/documentation/swiftui/viewthatfits" target="_blank" rel="noopener ugc nofollow">Apple’s Documentation</a>
It decides which view will be fit to the screen and it will be the one only visible.
The longer text won’t fit in the portrait mode, therefore the shorter one will be visible. Since the longer one will be able to fit in the landscape mode, it will be visible.
<pre data-label="ViewThatFits.swift"><code class="language-swift">var body: some View {
 ViewThatFits {
 Text(&quot;Hello, I am the longer text and most probably I will be visible only in the landscape mode&quot;)
 .frame(width: 700, height: 300)
 Text(&quot;Hello, I am the shorter text&quot;)
 .frame(width: 300, height: 100)
 }
}</code></pre>
<img class="alignnone wp-image-2869 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/14TBm-Ux45CzuE42_TugCpA.gif" alt="ViewThatFits" width="296" height="640" />
<h2>Mixed-State Toggle</h2>
<a href="https://developer.apple.com/documentation/swiftui/disclosuregroup" target="_blank" rel="noopener ugc nofollow">Apple’s Documentation</a>
Sometimes we need a parent toggle states that are associated with its sub toggles. DisclosureGroup provides a structure for that.
<pre data-label="MixedStateToggle.swift"><code class="language-swift">@State var profileNotificationsIsOn: Bool = false
@State var campaignNotificationsIsOn: Bool = false
@State var emailNotificationsIsOn: Bool = false

var body: some View {
 DisclosureGroup {
 Toggle(&quot;Profile Notifications&quot;, isOn: $profileNotificationsIsOn)
 Toggle(&quot;Campaign Notifications&quot;, isOn: $campaignNotificationsIsOn)
 Toggle(&quot;E-Mail Notifications&quot;, isOn: $emailNotificationsIsOn)
 } label: {
 Toggle(&quot;Notifications&quot;, isOn: [
 $profileNotificationsIsOn,
 $campaignNotificationsIsOn,
 $emailNotificationsIsOn
 ])
 }
 }</code></pre>
<img class="alignnone wp-image-2870 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1JhzOWali7YNVPAUqPZb-5w.gif" alt="Mixed-State Toggle" width="296" height="640" />
<h2>Multiline TextField</h2>
<a href="https://developer.apple.com/documentation/swiftui/presentedwindowcontent/linelimit(_:)-2o5wq" target="_blank" rel="noopener nofollow">Apple’s Documentation</a>
In SwiftUI 4, we are able to define specific ranges of a textfield’s line count. Something like, from 1 to 2, from 5 to endless.
<pre data-label="MultilineTextField.swift"><code class="language-swift">@State var textFieldText: String = &quot;&quot;

var body: some View {
 TextField(&quot;I am just a text field&quot;, text: $textFieldText, axis: .vertical)
 .lineLimit(...2)
}</code></pre>
<img class="alignnone wp-image-2871 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/06/1vaaTNIKndX5mrB3RH3Et7Q.png" alt="Multiline TextField" width="301" height="572" srcset="https://ac.appcircle.io/wp-content/uploads/2022/06/1vaaTNIKndX5mrB3RH3Et7Q.png 301w, https://ac.appcircle.io/wp-content/uploads/2022/06/1vaaTNIKndX5mrB3RH3Et7Q-158x300.png 158w" sizes="(max-width: 301px) 100vw, 301px" />
We&#8217;ve tried to list some of the major improvements announced for SwiftUI at WWDC 2022 this year. Of course that&#8217;s not all! We&#8217;re still digging through the documentation and will add more as we find new additions.
Stick around our blog to find more WWDC 2022 articles.

Save time, reduce costs and increase developer productivity now.

WWDC22

Developing with Live Activities API in iOS 16

Swift Charts with SwiftUI – WWDC22

Using SwiftUI inside UICollectionView and UITableView

UIKit got a lot of cool new features at WWDC22. Here's the new features added to UIKit with iOS 16 and how to use them with code samples.

What is New in SwiftUI 4.0, WWDC 2022

Related Posts

Best Mobile Continuous Integration and Continuous Delivery (CI/CD) Tools

Unlisted App Distribution on the App Store

Streamlining Xcode Project Management with Tuist and Appcircle Integration

Accelerate iOS CI with Appcircle: Optimized Features and Workflow Benefits

What is New in SwiftUI 4.0, WWDC 2022

Related Posts

Subscribe to Appcircle Circle