Welcome to my tech blog! Today, I'll introduce you to a recently introduced feature by Apple: the UIContentUnavailableView
. This built-in view is designed to display when your app's content is unavailable. There are two common scenarios where this can be particularly useful:
No Data Available: This occurs when no data is displayed based on the user's selection or search criteria.
Errors: This happens when unexpected errors arise due to network issues.
With the new UIContentUnavailableView
, you can effortlessly present an empty view or an error view with just a few lines of code. Let's dive in and see how it's done!
Show An Empty View
To display an empty view with simple text, start by creating an empty UIContentUnavailableConfiguration
.
var viewConfig = UIContentUnavailableConfiguration.empty()
Next, set the text property with the message you want to display to the user.
viewConfig.text = "No data available"
Finally, create the UIContentUnavailableView
by passing in the configuration.
let emptyView = UIContentUnavailableView(configuration: viewConfig)
The complete code snippet will appear as follows:
var viewConfig = UIContentUnavailableConfiguration.empty()
viewConfig.text = "No data found"
let emptyView = UIContentUnavailableView(configuration: viewConfig)
With this setup, your screen will appear as shown below.
To enhance the screen, consider adding a description to provide more details.
var viewConfig = UIContentUnavailableConfiguration.empty()
viewConfig.text = "No data found"
viewConfig.secondaryText = "Try again later. More data will be available soon."
let emptyView = UIContentUnavailableView(configuration: viewConfig)
Showcasing the Error View
Let's now explore creating an error view with an image and a refresh button.
You can integrate an image into the UIContentUnavailableView
by assigning an image to the image
property within the UIContentUnavailableConfiguration
.
var viewConfig = UIContentUnavailableConfiguration.empty()
viewConfig.text = "Error occurred!"
viewConfig.secondaryText = "Could not reach to the server."
viewConfig.image = UIImage(systemName: "exclamationmark.triangle")
var errorView = UIContentUnavailableView(configuration: viewConfig)
To incorporate the refresh button, start by creating a UIButton.Configuration
and specifying the desired title for the button.
var buttonConfig = UIButton.Configuration.bordered()
buttonConfig.title = "Refresh"
viewConfig.button = buttonConfig
This button will serve as the primary action for the created view. Next, we can define the target action for the button as follows.
viewConfig.buttonProperties.primaryAction = UIAction(handler: { _ in
/// Implementation related to refresh
})
Designing of the error view is now complete, and the full code snippet will appear as follows:
var viewConfig = UIContentUnavailableConfiguration.empty()
viewConfig.text = "Error occurred!"
viewConfig.secondaryText = "Could not reach to the server."
viewConfig.image = UIImage(systemName: "exclamationmark.triangle")
var buttonConfig = UIButton.Configuration.bordered()
buttonConfig.title = "Refresh"
viewConfig.button = buttonConfig
viewConfig.buttonProperties.primaryAction = UIAction(handler: { _ in
/// Refresh implementation goes here
})
var errorView = UIContentUnavailableView(configuration: viewConfig)
Built-in Views with UIContentUnavailableView
As of the time of writing this article, UIContentUnavailableView
includes two built-in views:
Search
This view is intended for use when the user's search criteria do not yield any results.
var viewConfig = UIContentUnavailableConfiguration.search()
var searchView = UIContentUnavailableView(configuration: viewConfig)
Loading
This built-in loading view is useful when you need to present a loading screen.
var viewConfig = UIContentUnavailableConfiguration.loading()
var loadingView = UIContentUnavailableView(configuration: viewConfig)
Conclusion
UIContentUnavailableView
is an incredibly useful tool for creating error views or empty views with just a few simple steps. You can either use the built-in views or customize the view to suit your needs. Additionally, it's important to note that UIContentUnavailableView
is available starting from iOS 17.0 and up.
References
https://developer.apple.com/documentation/swiftui/contentunavailableview