Question

我正在做一个应用程序，该应用程序可能需要一些时间才能完成后台工作我想在那个时候展示装载机

我想要黑屏，并在其前面有一个简单的加载器并显示\隐藏它，当我在后台执行操作

我想用加载器圆做一个简单的半黑色正方形也会阻止按屏幕的压力

就像这张照片：

我该如何实现？

Answer 1

首先创建一个UIView，将其放置在LogIn视图的前面。然后将UIActivityIndicatorView添加到创建的UIView。

let loadingIndicatorView = UIView()
let activityIndicatorView = UIActivityIndicatorView(activityIndicatorStyle: .gray)

现在loadingIndicatorView应该具有与LogIN视图相同的帧大小。对于颜色，您也可以使用Alpha设置自己的颜色，因为您也想显示登录内容。最初将其隐藏，并在您希望显示时将其取消隐藏。

loadingIndicatorView.frame = view.frame
loadingIndicatorView.backgroundColor = .gray
loadingIndicatorView.isHidden = true

现在设置activityIndicatorView，它应该显示在中间

activityIndicatorView.center = CGPoint(
        x: UIScreen.main.bounds.size.width / 2,
        y: UIScreen.main.bounds.size.height / 2
)

您可以为指示器设置一些颜色，

activityIndicatorView.color = .white
activityIndicatorView.hidesWhenStopped = true

现在将这个activityIndicatorView添加到loadingIndicatorView并将loadingIndicatorView添加到LogIn View。

 loadingIndicatorView.addSubview(activityIndicatorView)
 view.addSubview(loadingIndicatorView)

最后一次展示，

loadingIndicator.startAnimating()
loadingIndicatorView.isHidden = false

为了隐藏，

loadingIndicator.stopAnimating()
loadingIndicatorView.isHidden = true

Answer 2

更新后的答案

因为OP需要一个示例代码。因此，更新后的答案。希望每个人都能从中学到一些东西。

首先，我创建了UIView的子类并将其命名为PSOverlaySpinner，如下所示：

import UIKit

class PSOverlaySpinner: UIView {

    //MARK: - Variables
    private var isSpinning: Bool = false

    private lazy var spinner : UIActivityIndicatorView = {
        var spinner = UIActivityIndicatorView(style: UIActivityIndicatorView.Style.white)
        spinner.translatesAutoresizingMaskIntoConstraints = false
        spinner.hidesWhenStopped = true
        return spinner
    }()

    // MARK: - View Lifecycle Functions
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    init() {
        super.init(frame: CGRect.zero)
        self.translatesAutoresizingMaskIntoConstraints = false
        self.backgroundColor = UIColor.init(white: 0.0, alpha: 0.8)
        self.isSpinning = false
        self.isHidden = true
        createSubviews()
    }

    deinit {
        self.removeFromSuperview()
    }

    func createSubviews() -> Void {
        self.addSubview(spinner)
        setupAutoLayout()
    }

    // MARK: - Private Methods
    private func setupAutoLayout() {
        if #available(iOS 11.0, *) {
            spinner.safeAreaLayoutGuide.centerXAnchor.constraint(equalTo: safeAreaLayoutGuide.centerXAnchor).isActive = true
            spinner.safeAreaLayoutGuide.centerYAnchor.constraint(equalTo: safeAreaLayoutGuide.centerYAnchor).isActive = true
        } else {
            // Fallback on earlier versions
            spinner.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
            spinner.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
        }
    }

    // MARK: - Public Methods
    public func show() -> Void {
        DispatchQueue.main.async {
            if !self.spinner.isAnimating {
                self.spinner.startAnimating()
            }
            self.isHidden = false
        }
        isSpinning = true
    }

    public func hide() -> Void {
        DispatchQueue.main.async {
            if self.spinner.isAnimating {
                self.spinner.stopAnimating()
            }
            self.isHidden = true
        }
        isSpinning = false
    }
}

现在移到要将此叠加视图添加到的ViewController。由于我以编程方式创建视图，因此我将展示如何以相同的方式进行操作，但是您可以通过情节提要或xibs轻松完成此操作。

第1步：初始化

public lazy var spinnerView : PSOverlaySpinner = {
    let loadingView : PSOverlaySpinner = PSOverlaySpinner()
    return loadingView
}()

第2步：添加为子视图

self.view.addSubview(spinnerView)

第3步：设置约束

spinnerView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
spinnerView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
spinnerView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
spinnerView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true

第4步：显示PSOverlaySpinner

spinnerView.show()

第5步：隐藏PSOverlaySpinner

spinnerView.hide()

就是这样！

如果需要，可以继续根据需要修改PSOverlaySpinner。例如，您可能想在微调器下方添加一个UILabel，以指示他所执行的操作的类型，等等。

之前

之后

旧答案

如果您希望手动进行操作，则创建一个UIView，其框架匹配self.view.bounds，具有0.5-0.7的alpha和黑色背景色。将UIActivityIndicator添加为受其中心限制的子视图。对于特定于图像的微调器，您将必须使用提供的开源微调器。可以here找到其中的几个。完成后，将此视图添加为self.view中最顶层的子视图。

Answer 3

您需要导入该库SVProgressHUD，然后设置一些属性，如下所示：

SVProgressHUD.setDefaultStyle(SVProgressHUDStyle.dark)
SVProgressHUD.setBackgroundColor(.clear)
SVProgressHUD.setForegroundColor(.white)
SVProgressHUD.setDefaultMaskType(.black)

SVProgressHUD.show()
//SVProgressHUD.show(withStatus: "Loading something, Loading something,Loading something ...")

这将产生您在OP中所需的相同UI输出。您可以在我的存储库（TestPreLoader）中找到正在运行的示例

如何使用圆形装载机创建块画面

3 个答案: