Jun 10, 2021
Whats new in SwiftUI 3.0
Most iOS developers have been tuning in to WWDC this week to catch all the latest updates and features being made available from Apple. Today we are going to do a run down on some of the awesome new features that are coming to SwiftUI 3.0 and what they do.
Refreshable
SwiftUI 3.0 brings the refreshable() modifier to developers. This modifier allows you to attach functionality to a List object in SwiftUI that occurs when the user drags the screen down far enough to trigger a refresh. We can take an example of the implementation of this modifier below:
struct SomeView: View {
var body: some View {
VStack {
List(1...10) { item in
Text("Item number \(item)")
}
.refreshable {
//enter code to execute during refresh here
}
}
}
}As you can see, we simply add the modifier at the end of a List and can then easily add code implementation that will execute when the user triggers the refresh. Awesome right?
Swipe Action
Swipe action is another new modifier for Lists within SwiftUI. What this modifier does is allows you to create a new action for cells within a List. This is a great new feature that will help us create even further functionality to our user interfaces within SwiftUI. You can see an example of this implementation below:
struct SomeView: View {
var body: some View {
List {
ForEach(1...10, id: \.self) { item in
Text("Item Number \(item)")
.swipeActions(edge: .leading) {
Button {
//enter button actions here
} label: {
Text("Action Here")
}
}
}
}
}What this code does, is for each cell that is displayed in our list, we are creating a swipeAction that allows the user to swipe from left to right on the cell to display the button we created. You can add more than one swipeAction to your cells and can also change the swipe from left to right or right to left by simply changing the edge from .leading to .trailing.
Searchable
This next modifier we are going to talk about today is something I am very excited to have included in SwiftUI. With SwiftUI 3.0 we finally have the searchable modifier that allows you to add a search field to lists. This also comes included with a search field suggestion modifier. You can see the implementation for the searchable modifier below:
struct Cars: Identifiable {
var id = UUID()
var name: String
}struct SomeView: View {
@State var searchText: String = ""
@State var cars: [Cars] = [Cars(name: "Nissan"), Cars(name: "Mercedes"), Cars(name: "BMW")] var body: some View {
NavigationView {
List($cars) { $car in
Text(car.name)
}
.searchable("Search cars", text: $searchText, placement: .automatic) {
Text("mer".searchCompletion("Mercedes")
}
}
}
var searchResults: [Cars] {
is searchText.isEmpty {
return cars
} else {
return cars.filter{$0.name.lowercase().contains(searchText.lowercased())}
}
}
}
In this example, we have created a struct for our Cars object that contains an ID and the car name. We then create an array of Cars in our view and populate it with three different cars. After we have created our list to display our cars, you can see that we have placed the searchable modifier to the list. The first text within the closure is the placeholder text to be displayed within the search bar. We then assign the text value being entered in the search bar to our searchText variable. Finally we have then can enter in search suggestions for our search bar.
To actually search the results, we then create a variable of the cars array we created and search for the item that matches with the text in the searchText field.
The searchable feature is a fantastic addition to SwiftUI that will make our lives as developers much easier when trying to create intuitive and usable interfaces for our applications.
Conclusion
There are many more features that have been introduced for SwiftUI 3.0 that we will be covering in later articles, including AsyncImage, the Focus API, materials, and many more. WWDC 2021 has provided us with a lot of new exciting features and I’m excited to cover all of them with you!
