Exploring the New UIContentUnavailableView by Apple

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:

1. No Data Available: This occurs when no data is displayed based on the user's selection or search criteria.

2. 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:

1. 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