- December 17, 2024
- Mins Read
WLEmptyState is an iOS based component that lets you customize the message when the dataset of UITableView
or UICollectionView
is empty. We created a sample project with the WLEmptyState component to show how you can use it.
To run the Example
project:
Clone the repo with the following command:
git clone git@github.com:wizeline/WLEmptyState.git
Move to the Example
directory and run the following command:
pod install
WLEmptyState is available through CocoaPods. To install it, add the following command to your Podfile:
pod ‘WLEmptyState’
Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks. To integrate WLEmptyState into your Xcode project using Carthage, specify it in your Cartfile:
github “wizeline/WLEmptyState”
The WLEmptyState component uses Method Swizzling. Therefore, to configure WLEmptyState
, follow these steps:
Import the module in the AppDelegate
class by adding import WLEmptyState
.
Call the static method configure()
on application(_ application:, didFinishLaunchingWithOptions:)
method.
Your AppDelegate
class should look like this:
import WLEmptyState
…
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
WLEmptyState.configure()
return true
}
Once you have configured WLEmptyState
, you can use it for your UITableViewController
or UICollectionViewController
. You need to conform the WLEmptyStateDataSource
protocol. For example,
class YourTableViewController: UITableViewController, WLEmptyStateDataSource {
override func viewDidLoad() {
super.viewDidLoad()
tableView.emptyStateDataSource = self
}
}
After you run your project with an empty dataset for your entity, you’ll be able to see a default WLEmptyState
view.
Default Image
If you want to customize the text, description, or image, of the default component you need to implement the WLEmptyStateDataSource
function. You can find the code for customization in the following list:
func imageForEmptyDataSet() -> UIImage? {
return UIImage(named: “bubble_icon”)
}
func titleForEmptyDataSet() -> NSAttributedString {
let title = NSAttributedString(string: “No messages”, attributes: [NSAttributedString.Key.font: UIFont.preferredFont(forTextStyle: .headline)])
return title
}
func descriptionForEmptyDataSet() -> NSAttributedString {
let title = NSAttributedString(string: “There’s no messages to show.”, attributes: [NSAttributedString.Key.font: UIFont.preferredFont(forTextStyle: .caption1)])
return title
}
Customized Image
Using customViewForEmptyState()
allows you to provide your own implementation for Empty State.
func customViewForEmptyState() -> UIView? {
let activityIndicatorView = UIActivityIndicatorView()
activityIndicatorView.startAnimating()
activityIndicatorView.color = .purple
return activityIndicatorView
}
You can disable the scroll when the Empty State is showing. You only need to conform the WLEmptyStateDelegate
protocol and return false
in the enableScrollForEmptyState()
function:
// Conform the WLEmptyStateDelegate protocol
class YourTableViewController: UITableViewController, WLEmptyStateDataSource, WLEmptyStateDelegate {
override func viewDidLoad() {
super.viewDidLoad()
tableView.emptyStateDataSource = self
tableView.emptyStateDelegate = self // Set your delegate
}
func enableScrollForEmptyState() -> Bool {
// To enable/disable the scroll return true or false
return false
}
}
A vertical stackview which takes subviews with different widths and adds them to it's rows with paddings, spacings etc.
AudioManager is a Swift package that provides a modular and easy-to-use interface for implementing audio feedback in your applications. It ...