[iOS] 로딩 뷰 만들기

이번 스터디 시간에는 커스텀 로딩 뷰를 준비 해봤습니다.

 

동아리 프로젝트를 진행하면서 기존에 있던 캐릭터 이미지를 통해 로딩뷰를 만들면 좋겠다는 생각을 가지고 로딩뷰를 만들어보았습니다.

 

구현 방법은 민소네 님의 블로그를 보고 클론 코딩 했습니다.

 

블로그에서 나오는 것처럼 팝업은 언제나 뷰 최상위에 있어야함으로 UIApplication의 첫번째 Scene에 view를 붙여야합니다.

 

그리고 싱글톤 디자인 패턴을 사용하는 이유는 생성을 한 이후 위에 생성된 뷰를 지워야함으로 싱글톤 패턴을 사용했습니다.

 

• 생성한 뷰

	private static let sharedInstance = LoadingHUD()  
	
    private var backgroundView: UIView?
    private var popupView: UIImageView?

 

• show()

    class func show() {
        let backgroundView = UIView() // 백그라운드 뷰 생성
        
        let popupView = UIImageView() // 이미지 뷰 생성
        popupView.contentMode = .topRight // 사진의 크기, 그리고 위치에 따라서 다르게 설정해주시면 됩니다.
      																		// 자세한 설명은 하단에서~
        popupView.animationImages = LoadingHUD.getAnimationImageArray() // imageView에 이미지 Array를 추가해줍니다.
        popupView.animationDuration = 3 // 로딩이 이 timeInterval 값에 따라서 시간의 값이 달라집니다 원하는 반복 시간을 설정해주세요
        popupView.animationRepeatCount = 0 // 반복 될 횟수를 입력 default는 0이고 default인 경우에는 무한 반복
        
        
        if let window = UIApplication.shared.connectedScenes	// 위 설명에서 작성한것처럼 최상단에 넣기 위한 코드
        .filter({$0.activationState == .foregroundActive})
        .map({$0 as? UIWindowScene})
        .compactMap({$0})
        .first?.windows
        .filter({$0.isKeyWindow}).first {
            window.addSubview(backgroundView)
            window.addSubview(popupView)
            
            backgroundView.frame = CGRect(x: 0, y: 0, width: window.frame.maxX, height: window.frame.maxY)	// 윈도우의 크기에 맞춰 설정
            backgroundView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.2) // 백그라운드를 투명하게 처리하기 위한 설정
            
            popupView.frame = CGRect(x: 0, y: 0,width: window.frame.maxX, height: window.frame.maxY)	// 이미지의 위치와 크기에 따라 원하는데로 설정해주시면 됩니다.
            popupView.startAnimating() 
                        
            sharedInstance.backgroundView?.removeFromSuperview()
            sharedInstance.popupView?.removeFromSuperview()
            sharedInstance.backgroundView = backgroundView
            sharedInstance.popupView = popupView
        }
    }

 

• hide()

    class func hide() {
        if let popupView = sharedInstance.popupView, // 설정해준 팝업뷰와 백그라운드 뷰
        let backgroundView = sharedInstance.backgroundView {
            popupView.stopAnimating()								  
            backgroundView.removeFromSuperview()
            popupView.removeFromSuperview()
        }
    }

 

• image Array

    public class func getAnimationImageArray() -> [UIImage] {
        var animationArray: [UIImage] = []
        animationArray.append(UIImage(named: "nuteeLoading_00")!)
        animationArray.append(UIImage(named: "nuteeLoading_01")!)
																		.
      															.
      															.
      											// 원하는 이미지를 원하는만큼 추가

        return animationArray
    }