From the blog

"New Features in SwiftUI (iOS15), Part One"

Hi, I am Anjali Aggarwal, an iOS developer at Rightpoint. Through this blog, I would like to share some of the new features introduced in SwiftUI for iOS 15. We will cover the below topics in the first part of this series:

1. Updates in search
2. AsyncImage
3. Adding Toolbars
4. Bordered Buttons
5. Submit Labels

Searching made easier

“searchable” is a new modifier added in SwiftUI for iOS15 and forms the foundation for search. It is available for all platforms. Using searchable, the search bar can be placed directly within NavigationView. The modifier takes care of the UI of the search bar.

To add a search bar in the navigation view, all you need to do is :

NavigationView {
List {
// List Content
}
.searchable($searchText)
}

And yes that’s it!! You will see a search bar at the top of the view. We can customize the placement of the search bar using the placement parameter as well:

.searchable(text: $searchText, placement: .navigationBarDrawer)

There are different options available for placement which can be chosen from as per the requirement.


Also, you can provide a search prompt to give insights to users what they can search for as below:

.searchable(text: $searchText, prompt: "Search a user")

To perform some specific action (example: API call) once the user updates the search text, we can use the onchange modifier as below:

 .searchable(text: $searchText)
 .onChange(of: searchText) { searchText in
      // perform required action
  }

AsyncImage

Let go of the third-party libraries which were earlier used to handle remote images. Now, SwiftUI has a dedicated component “AsyncImage” to display remote images.

To display an image coming from a remote URL all you now need to do is:

AsyncImage(url: URL(string:""))

AsyncImage has a completion block that can be used to specify a placeholder image and also resize/customize the incoming image.

AsyncImage(url: URL(string: "")) { image in
// resize the image as per requirement
} placeholder: {
// Placeholder can be provided here
}

Adding toolbars

Adding toolbars is now simplified using the toolbar modifier shown in the example. All the buttons or any other required items for the toolbar can be placed inside the ToolBarItem group.

TextField("", text: $bindingVariable)
       .toolbar {
           ToolbarItemGroup(placement: .keyboard) {
                Button("Done") {
            }
          }
 }

We can use the toolbars to place buttons in the navigation bar by using placement options like navigationBarLeading or navigationBarTrailing.

Bordered Buttons

SwiftUI for iOS15 has introduced some new button styles like .bordered, .borderedProminent to give the buttons a cool look which can be used as below:

Button.init("Title goes here") {
    // Action goes here
 }
.buttonStyle(.bordered)

We can also specify tintColor if we do not want the default colors for the buttons

 Button.init("Title goes here") {
    // Action goes here
 }
 .tint(Color.white.opacity(0.5))
 .buttonStyle(.borderedProminent)

Submit Labels

SwiftUI for iOS 15 gives us the option to customize the “return” button on the keyboard. For this, submitLabel modifier has been introduced. There are various options available from which we can choose like join, continue, done, next, and a few more. It can be used as below:

TextField("", text: $bindingText)
    .submitLabel(.next)

SubmitLabels not only work with TextFields but also SecureFields and TextViews.

These can be very helpful as they will give users more context of the action.

Leave a Reply

Your email address will not be published.