Adding a subview inside a view which is a subview of Window

Question

I am trying to create a custom IndicatorView using Lottie Animations. I have added the view in UIApplication.shared.keyWindow? and it's working fine. The problem occurs when I try to add another subview inside the IndicatorView .

Code is crashing in setupLoadingView() when I try to add constraints on loadingAnimation .

UPDATE: Thanks to @Raghav7890. There was a silly mistake which has been solved now. I have updated the answer for anyone who wants to create a custom Indicator View using Lottie Animations. Have fun.

Here is the code:

import Foundation
import UIKit
import Lottie

class IndicatorView : UIView {

static let shared = IndicatorView()

var loadingAnimation : AnimationView = {
    let lottieView = AnimationView()
    lottieView.translatesAutoresizingMaskIntoConstraints = false
    lottieView.layer.masksToBounds = true
    return lottieView
}()

override init(frame: CGRect) {
    super.init(frame: frame)
    translatesAutoresizingMaskIntoConstraints = false
    setupLoadingView()

}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

public func show() {
    self.alpha = 0
    UIView.animate(withDuration: 0.5, animations: {
        self.isHidden = false
        self.alpha = 1
    }, completion: nil)
    applyLottieAnimation()
}

public func hide() {
    removeLoadingView()
}

func applyLottieAnimation() {

    let animationToShow = Animation.named("loading")
    loadingAnimation.animation = animationToShow
    loadingAnimation.animationSpeed = 1.0
    loadingAnimation.loopMode = .loop
    loadingAnimation.contentMode = .scaleAspectFill
    loadingAnimation.play()

}

private func setupLoadingView() {

    UIApplication.shared.keyWindow?.addSubview(self)
    self.backgroundColor = UIColor.darkGray.withAlphaComponent(0.5)
    guard let activeWindow = UIApplication.shared.keyWindow?.layoutMarginsGuide else {return}
    self.heightAnchor.constraint(equalToConstant: UIScreen.main.bounds.size.height + 100).isActive = true
    self.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.size.width).isActive = true
    self.centerXAnchor.constraint(equalTo: activeWindow.centerXAnchor).isActive = true
    self.centerYAnchor.constraint(equalTo: activeWindow.centerYAnchor).isActive = true
    self.addSubview(loadingAnimation)

    loadingAnimation.heightAnchor.constraint(equalToConstant: 100).isActive = true
    loadingAnimation.widthAnchor.constraint(equalToConstant: 100).isActive = true
    loadingAnimation.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
    loadingAnimation.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
    loadingAnimation.backgroundColor = UIColor(red: 48/255, green: 72/255, blue: 96/255, alpha: 1.0)
    loadingAnimation.applyCornerRadius()
    loadingAnimation.clipsToBounds = true


    self.setNeedsLayout()
    self.reloadInputViews()
}

func removeLoadingView() {
    self.alpha = 1
    UIView.animate(withDuration: 0.5, animations: {
        self.alpha = 0
        self.loadingAnimation.stop()
    }, completion: { _ in
        self.isHidden = true
    })
}
}

Answer 1

try using your property like this

var loadingAnimation : AnimationView = {
 let lottieView = AnimationView()
 lottieView.translatesAutoresizingMaskIntoConstraints = false
 //   lottieView.contentMode = .scaleAspectFit
 lottieView.layer.masksToBounds = true
 return lottieView
}()

var loadingLabel : UILabel = {
 let label = UILabel()
 label.text = loadingText
 label.textColor = .white
 label.translatesAutoresizingMaskIntoConstraints = false
 label.font = UIFont(name: "SegoeUI", size: 12)
 return label
}()

Since your approach will generate a new object every time you access