[iOS] Indicator customizing (feat. Lottie)

lgvv 2022. 4. 30. 18:15

Indicator customizing

✅ 기본 Indicator를 변경해보자.

우선 UIRefreshControl에서도 사용되고, ActivityIndicator에서도 사용된다.

나는 더 예쁜 UI구성을 위해 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()
            }
        }
    }