5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

xibを使って簡易ローディングを作成する

5
Posted at

今回の成果物

こちらに置いてあります
negibouze/SimpleLoadingSample

1. LoadingView.xibを作成する

1. 背景を設定する

alphaで透過させるとsubviewも一緒に透過されてしまうので、opacityで透過させる。
1-1.png

2. Activity Indicatorを配置する

中心に来るようにする。
1-2.png

2. LoadingView.swiftを作成する

LoadingView
class LoadingView: UIView {
    
    @IBOutlet var contentView: UIView!
    @IBOutlet weak var indicator: UIActivityIndicatorView!

3. .xibと.swiftを紐づける

1. File's OwnerにLoadingView.swiftを設定する

3-1.png

2. 各要素を紐づける

3-2.png

4. LoadingViewを実装する

LoadingView(抜粋)
class LoadingView: UIView {

    private static let sharedInstance = LoadingView()
    private var isShow = false
    
    private override init(frame: CGRect) {
        super.init(frame: (UIApplication.sharedApplication().delegate?.window??.bounds)!)
        self.setup()
    }

    class func show(duration: Double = 0.5) {
        if sharedInstance.isShow {
            return
        }
        guard let win = UIApplication.sharedApplication().delegate?.window, let window = win else {
            return
        }
        sharedInstance.isShow = true
        sharedInstance.indicator.startAnimating()
        window.addSubview(sharedInstance)
        UIView.animateWithDuration(duration,
            animations: {
                sharedInstance.alpha = 1.0
            },
            completion: nil
        )
    }

    class func hide(duration: Double = 0.5) {
        if !sharedInstance.isShow {
            return
        }
        UIView.animateWithDuration(duration,
            animations: {
                sharedInstance.alpha = 0
            },
            completion: { b in
                sharedInstance.removeFromSuperview()
                sharedInstance.indicator.stopAnimating()
                sharedInstance.isShow = false
            }
        )
    }
5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?