[Swift] 여러 이미지를 이용해 Custom Loading 화면 만들기

Custom Loading 화면 만들기

 

Record
작성일	2019. 06. 01 (토)
Swift 버전	Swift 5
Xcode 버전	10.2.1

 

custom Loading 화면

 

안녕하세요 :]
이번에는 gif 파일에서 추출한 여러 장의 이미지를 이용하여

Custom Loading 화면을 만들어 보도록 하겠습니다.

 

이번 공부는 "민소네" 님의 블로그를 참고하여 공부하였습니다.

http://minsone.github.io/mac/ios/easy-make-loading-animation-popup-view-in-swift

1. 로딩 화면 구현

로딩 화면을 보여줄 때는 항상 제일 위에 보여야 합니다.

그렇기 때문에 UIApplication의 keyWindow에 view를 addSubView 해야 합니다.

 

keyWindow 설명

그리고 로딩 화면을 관리하기 위해 Singleton을 생성합니다.

 

 

다음으로, 로딩 화면을 띄울 때 호출할 Type Method show()를 작성합니다.

show() 메서드에서 로딩 화면이 나타날 때 뒷 배경을 흐릿하게 하기 위한 bacgroundView,

애니메이션 동작을 하게 될 popupView,

"Loading..."이라는 문자를 띄울 loadingLabel의 설정을 하고 window에 addSubView를 합니다.

 

 

위의 코드에서 popupView의 animationImages에 이미지 배열을 넣어주고 있습니다.

그 코드는 아래와 같습니다.

 

 

다음으로, 로딩 화면을 끝낼때 호출할 Type Method hide()를 작성합니다.

hide() 메서드는 비교적 간단합니다.

애니메이션을 중지시키고, show()에서 띄어줬던 것들을 전부 제거합니다.

 

 

2. 메인 화면 구현

 

자, 로딩 화면을 띄울 준비는 끝났습니다.

이제 로딩 화면이 필요한 곳에서 show()를 호출해 주면 됩니다.

다음은 로딩 화면을 띄우는 ViewController 코드입니다.

 

TapGesture를 view에 달아주고 화면이 눌리면 taped 메서드를 실행합니다.

그러면 로딩 화면이 나타나고, 3초 뒤에 로딩 화면이 사라지는 코드입니다.

 

 

위에 예제 코드는 git을 통해서 확인해주세요~

https://github.com/furydeveloper/SwiftPractice/tree/master/LoadingExample

 

감사합니다 :]