Place activity indicator over uitable view - swift

Question

I've placed an Activity indicator in a UITableView within the storyboard.
How can I center it in the middle of the screen and in front of the table view?
I've tried:
self.activityIndicator.center = self.tableView.center
But now, the activity indicator is in the top-middle of the view!

Answer 1

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
}
}

Answer 2

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

Answer 3

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.

Answer 4

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
}

Answer 5

If this activity indicator is for loading information into the UITableView you should create a separate loading UIView that is the same size as the UITableView and place the Activity Indicator in the center of that view, not the UITableView itself.
Then add the loading UIView to your main view (above the table view) and set it to hidden or visible depending on the status of the loading.

Answer 6

I think you used directly UITableView in your storyboard. This is why you can't drag uiview top of the main view(tableview). Delete UItableview controller and drag a UIViewController into the storyboard, instead. Then drag a tableview into it. then drag another view over tableview for activity indicator. don't forget to handle UItableviewdelegate and datasourse methods in your UIViewController.

Answer 7

In the viewDidLayoutSubviews method of your tableViewController try this:
override func viewDidLayoutSubviews() {
let screenSize = UIScreen.main.bounds
activityIndicator.frame = CGRect(x: screenSize.width / 2, y: screenSize.height / 2, width: 5, height: 5)
activityIndicator.color = .white
activityIndicator.hidesWhenStopped = true
if let baseView = view.superview {
baseView.addSubview(activityIndicator)
}
}
activityIndicator is a stored property of my TableViewController class.