[Swift] Activity Indicator & Lottie

UIActivityIndicator

import UIKit

class ViewController: UIViewController {
    
    // lazy 를 사용하면 해당 클래스가 시작될 때 해당 변수가 초기화되지 않고,
    // 실제로 해당 변수가 사용될 때 초기값이 계산되는 형태
    // lazy 를 사용하면 self 형태로 접근 가능
    
    lazy var activityIndicator: UIActivityIndicatorView = {
        // 해당 클로저에서 나중에 indicator 를 반환해주기 위해 상수형태로 선언
        let activityIndicator = UIActivityIndicatorView()
        
        activityIndicator.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
        
        activityIndicator.center = self.view.center
        
        // 기타 옵션
        activityIndicator.color = .purple
        activityIndicator.hidesWhenStopped = true
        activityIndicator.style = .medium
        
        // stopAnimating을 걸어주는 이유는, 최초에 해당 indicator가 선언되었을 때, 멈춘 상태로 있기 위해서
        activityIndicator.stopAnimating()
        
        return activityIndicator
        
    }()
    // -> }() 해당 클로저에서 즉시 해당 인스턴스를 생성해서 lazy var activityIndicator 에 넣어줌
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.addSubview(activityIndicator)
        
    }
    @IBAction func startButtonClicked(_ sender: Any) {
        activityIndicator.startAnimating()
    }
    
    @IBAction func stopButtonClicked(_ sender: Any) {
        activityIndicator.stopAnimating()
    }
    
}

 

여기서 하나는 시작버튼, 하나는 멈춤버튼 이렇게 만들어서 구현했는데

직접 버튼을 눌러서 시작하기 보다는 네트워크 통신을 시작할 때 start를 걸고, 통신이 종료돼서 데이터를 받아와서

뷰를 그릴 시점에 stop을 걸어준다.

indicator를 부각하거나, 대기하는 동안 다른 행동을 하지말라고 UIView를 따로 걸어주기도 함.. 

 

 

 

 

 

 

 

 

Lottie

-> 에어비앤비에서 개발한 라이브러리로, Adobe After Effect 로 만든 애니메이션을 다른 플랫폼에서도 쉽게 사용 할 수 있도록 도와주는 라이브러리이다.

개발자가 따로 애니메이션에 대해 고민하지 않고, 디자이너가 뽑아주는 JSON 가지고 재생만 하면 되는 형태이다 !

 

import UIKit
import Lottie

class ViewController: UIViewController {

    lazy var lottieView : AnimationView = {
        let animationView = AnimationView(name: "7thSeminar_Lottie_sample")
        animationView.frame = CGRect(x: 0, y: 0,
                                     width: 100, height: 100)
        animationView.center = self.view.center
        animationView.contentMode = .scaleAspectFill
        animationView.stop()
        animationView.isHidden = true
    
        return animationView
    }()
   
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.addSubview(lottieView)
    }

    @IBAction func startButtonClicked(_ sender: Any) {
        lottieView.isHidden = false
        lottieView.play()
    }
    
    @IBAction func stopButtonClicked(_ sender: Any) {
        lottieView.isHidden = true
        lottieView.stop()
    }
}

Lottie 를 쓰기 전에

해당 프로젝트가 있는 경로로 터미널을 사용해서 이동 후

pod init

을 하고 Podfile을 만들어준 다음

pod 'lottie-ios'

을 적고

pod install

을 진행 !