Search for a command to run...
A seasoned Senior iOS Engineer with more than 11 years of experience developing high-performance mobile applications. Committed to writing clean code, thorough testing, and following Agile practices. Skilled in leading teams and integrating advanced features. Familiar with leveraging cutting-edge Apple technologies to create user-centric and effective applications.
No comments yet. Be the first to comment.
In Swift, there are several options to execute multiple asynchronous tasks concurrently without blocking the calling thread. DispatchGroup, DispatchSemaphore, and async let are great for independent tasks that can fire and forget. However, if you hav...
Introduction Hi folks, today we're diving into the importance of modularization in Swift application development. Later in this post, I'll walk you through creating your own package using Swift Package Manager and how to integrate it into other Xcode...
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!
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)
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)
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)
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.
https://developer.apple.com/documentation/swiftui/contentunavailableview