ios - 从 API 请求数据时显示和隐藏模态

Question

我对我的 API 有一些请求，在它发出请求时，我想显示一个全屏模式，中间有一个微调器，它会覆盖当前场景。

我在 Storyboard中设置了一个场景，并为该场景提供了一个 Controller :

class LoadingViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }
}

在我的另一个 Controller 中，我有以下内容:

class SignInViewController: UIViewController {

    // MARK: Properties

    @IBOutlet weak var submitButton: UIButton!

    // MARK: Actions

    @IBAction func onSubmit(_ sender: Any) {
        // How do I show LoadingViewController as a modal here?
        // Later, how do I hide it?
    }

    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

正如我在上面评论的那样，当用户单击“提交”按钮时，我想在该 Controller 上显示全屏模式。然后，当 API 返回数据时，我想隐藏模态。

如何显示和隐藏 LoadingViewController 作为 SignInViewController 的模态？

Answer 1

这是一个解决方案，它将在呈现的 View 之上创建一个简单的加载器 View ，

首先，我们需要创建一个类，负责添加/删除一个activityIndi​​cator

class AppLoaderView : UIView{

    fileprivate
    lazy var circularProgressIndicator : UIActivityIndicatorView = {
        let activityIndicator = UIActivityIndicatorView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
        activityIndicator.center = self.center
        activityIndicator.style = .gray
        activityIndicator.translatesAutoresizingMaskIntoConstraints = false
        activityIndicator.hidesWhenStopped = true
        self.addSubview(activityIndicator)
        return activityIndicator
    }()


    func showSpinning() {
        setupConstraints()
        circularProgressIndicator.startAnimating()
    }

    private
    func setupConstraints() {
        let xCenterConstraint = NSLayoutConstraint(item: self, attribute: .centerX,
                                                   relatedBy: .equal, toItem: circularProgressIndicator,
                                                   attribute: .centerX,
                                                   multiplier: 1,
                                                   constant: 0)
        self.addConstraint(xCenterConstraint)

        let yCenterConstraint = NSLayoutConstraint(item: self, attribute: .centerY,
                                                   relatedBy: .equal, toItem: circularProgressIndicator,
                                                   attribute: .centerY,
                                                   multiplier: 1,
                                                   constant: 0)
        self.addConstraint(yCenterConstraint)
    }


    func removeLoading() {
        circularProgressIndicator.stopAnimating()
    }

}

现在我们将在 viewController 上创建一个扩展，它有两种方法，一种用于显示 LoaderView，另一种用于删除它，

extension UIViewController{

    private var loaderView : AppLoaderView?{

        if let view =  self.view.subviews.first(where: { $0 is AppLoaderView}) as? AppLoaderView { return view }
        let view = AppLoaderView(frame: self.view.frame)
        view.backgroundColor = .white
        view.autoresizingMask = [.flexibleHeight, .flexibleWidth]
        view.isHidden = true
        return view
    }


    func showLoaderView(){
        if let view = loaderView  {

            self.view.addSubview(view)
            self.view.bringSubviewToFront(view)
            view.isHidden = false
            view.clipsToBounds = true
            view.layoutIfNeeded()
            view.showSpinning()

        }

    }

    func removeLoaderView(){
        if let view = loaderView{
            view.removeLoading()
            view.removeFromSuperview()
            self.view.layoutIfNeeded()
        }
    }
}

就是这样，现在通过您的示例，您可以在单击按钮时调用 self.showLoaderView()，一旦 API 调用返回，您将调用 self.removeLoaderView()。

将这些添加到项目中的某处，在任何 viewController 上，您都可以调用这些方法来显示/隐藏您的 loaderView。