将活动指示器放在合适的视图上

Question

我UITableView在故事板中放置了一个活动指示器.如何将其置于屏幕中间和桌面视图前面？

我试过了:

self.activityIndicator.center = self.tableView.center

但现在,活动指标位于视图的中上方!

Answer 1

要在a中加载数据时显示活动指示器UITableView,您可以创建UIView并将其添加到主视图(位于中心UITableView).如果要显示如下所示:

你可以做到这一点与fnuctions setLoadingScreen和removeLoadingScreen(如果你想看到一个示例项目,你可以去这里):

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

以下是步骤:遵循Chrissukhram的指示.

1. 拖动表视图顶部的视图
2. 将活动指示器拖到视图上

3. 将活动指示器与容器中的水平和垂直中心对齐

4. 为视图和活动指示器建立IBOutlet连接

5. 启动活动指标
6. 停下来隐藏: activityIndicatorLarge.hidesWhenStopped = true activityView.hidden = true

Answer 3

最简单的方法是在tableView backgroundView中添加UIActivityIndi​​catorView

    let spinner = UIActivityIndicatorView(activityIndicatorStyle: .gray)

    spinner.startAnimating()
    tableView.backgroundView = spinner

它默认居中.

Answer 4

如果您使用复杂视图：

 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
}