iOS UIActivicityIndicator Customizing (feat. Lottie)

iOS UIActivicityIndicator Customizing (feat. Lottie)

 

기본 Indicator를 변경해보고자 함.

 

Indicator는 UIRefreshControl에서도 사용되고, ActivityIndicator에서도 사용되는데, 우리 프로젝트에서는 Lottie를 사용해서 이 기능을 챙기고 있음.

 

인디케이터 영역을 커스텀해서 스크롤 오프셋 + 프레임 기반으로 새로고침 할 때 Lottie를 넣는 작업도 가능하다고 느끼는데, 생각보다 난이도가 높아서, 우선 Lottie를 통한 간단한 커스텀을 진행하는 방향으로 나아감.

샘플코드

    let loadingView: AnimationView = .init(name: StringSet.Lottie.loading)
    let indicatorView: AnimationView = .init(name: StringSet.Lottie.loading)

    let refreshControl = UIRefreshControl()
    
    private func setupAnimationViews() {
        // main loading
        view.addSubview(loadingView)
        loadingView.snp.makeConstraints {
            $0.width.height.equalTo(100)
            $0.center.equalToSuperview()
        }
        isLoading = true
        
        // refresh indicator
        refreshControl.addSubview(indicatorView)
        indicatorView.snp.makeConstraints {
            $0.width.height.equalTo(100)
            $0.center.equalToSuperview()
        }
        refreshControl.tintColor = .clear
    }

 

 

로딩 여부를 체크하는 변수를 만들어서 didSet을 활용하여 처리한다.

 

    var isLoading = false {
        didSet {
            if isLoading {
                if refreshControl.isRefreshing {
                    indicatorView.isHidden = false
                    indicatorView.loopMode = .loop
                    indicatorView.play()
                } else {
                    loadingView.isHidden = false
                    loadingView.loopMode = .loop
                    loadingView.play()
                }
            } else {
                loadingView.isHidden = true
                indicatorView.isHidden = true
                
                loadingView.stop()
                indicatorView.stop()
            }
        }
    }

좌측부터 refresh 로딩, 웹뷰 로딩, default 로딩