LoginSignup
5
4

More than 5 years have passed since last update.

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

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