Place activity indicator over uitable view
If you use complex view:
func setupSpinner(){
spinner = UIActivityIndicatorView(frame: CGRect(x: 0, y: 0, width: 40, height:40))
spinner.color = UIColor(Colors.Accent)
self.spinner.center = CGPoint(x:UIScreen.main.bounds.size.width / 2, y:UIScreen.main.bounds.size.height / 2)
self.view.addSubview(spinner)
spinner.hidesWhenStopped = true
}
To display an activity indicator while data is loading in a UITableView, you can create a UIView and add it to the main view (in the center of the UITableView). If you want to display it as shown bellow:
You can do that with the fnuctions setLoadingScreen and removeLoadingScreen (if you want to see a sample project you can go here):
class TableViewController: UITableViewController {
// MARK: Properties
/// Data source of the tableView
var rows: [String] = []
/// View which contains the loading text and the spinner
let loadingView = UIView()
/// Spinner shown during load the TableView
let spinner = UIActivityIndicatorView()
/// Text shown during load the TableView
let loadingLabel = UILabel()
// MARK: Methods
override func viewDidLoad() {
super.viewDidLoad()
setLoadingScreen()
loadData()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
// MARK: - Table view data source
override func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return rows.count
}
override func tableView(tableView: UITableView, cellForRowAt indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath)!
cell.textLabel!.text = rows[indexPath.row]
return cell
}
// MARK: Private methods
// Load data in the tableView
private func loadData() {
// Simulate a delay of some operations as a HTTP Request
DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(20)) {
self.rows = ["Row 1", "Row 2", "Row 3", "Row 4", "Row 5"]
self.tableView.reloadData()
self.tableView.separatorStyle = .singleLine
self.removeLoadingScreen()
}
}
// Set the activity indicator into the main view
private func setLoadingScreen() {
// Sets the view which contains the loading text and the spinner
let width: CGFloat = 120
let height: CGFloat = 30
let x = (tableView.frame.width / 2) - (width / 2)
let y = (tableView.frame.height / 2) - (height / 2) - (navigationController?.navigationBar.frame.height)!
loadingView.frame = CGRect(x: x, y: y, width: width, height: height)
// Sets loading text
loadingLabel.textColor = .gray
loadingLabel.textAlignment = .center
loadingLabel.text = "Loading..."
loadingLabel.frame = CGRect(x: 0, y: 0, width: 140, height: 30)
// Sets spinner
spinner.activityIndicatorViewStyle = .gray
spinner.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
spinner.startAnimating()
// Adds text and spinner to the view
loadingView.addSubview(spinner)
loadingView.addSubview(loadingLabel)
tableView.addSubview(loadingView)
}
// Remove the activity indicator from the main view
private func removeLoadingScreen() {
// Hides and stops the text and the spinner
spinner.stopAnimating()
spinner.isHidden = true
loadingLabel.isHidden = true
}
}
The easiest way is to add a UIActivityIndicatorView in your tableView backgroundView
let spinner = UIActivityIndicatorView(activityIndicatorStyle: .gray)
spinner.startAnimating()
tableView.backgroundView = spinner
it will be centered by default.
Here's the steps: Followed Chrissukhram instructions.
- drag a view on top of table view Step
- drag activity indicator on to the view
Align the activity indicator to horizontal and vertical centre in container
make IBOutlet connection for both view and activity indicator
- start the activity indicator
- stop and hide :
activityIndicatorLarge.hidesWhenStopped = true activityView.hidden = true