Indicator

tags: study

UIActivityIndicatorView

데이터를 불러오거나 로딩할 때 아무것도 없는 화면을 보여주기 보다는 현재 어떤 작업을 하고있음을 나타내주는 편이 좋다. 이를 위해 ios UIActivityIndicatorView를 제공하고 있다.

You control when an activity indicator animates by calling the startAnimating() and stopAnimating() methods. To automatically hide the activity indicator when animation stops, set the hidesWhenStopped property to true. You can set the color of the activity indicator by using the color property.

정리해보자면
1. startAnimating()으로 progress가 움직이게 할 수 있다.
2. stopAnimating()으로 현재 애니메이션중인 progress를 멈추게 할 수 있따.
3. hidesWhenStopped 속성을 사용하여 애니메이션이 나올 때만 보여지게 할 수도 있다.

간단하게 대충 구현해보았다. 기존에 출력이 된느 뷰(남보라 뷰)가 있고 이 위에 indicator를 출력시킬 것이다.

import UIKit
class ViewController: UIViewController {
    private lazy var activitiIndicator: UIActivityIndicatorView = {
        // 프로퍼티로 주입할 인스턴스 생성
        let activityIndicator = UIActivityIndicatorView()
        // 인디케이터의 영역 지정
        activityIndicator.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
        // 인디케이터의 중심점이 어디에 위치하게 할 것인지에 대해 지정, 여기서는 뷰의 센터
        activityIndicator.center = self.view.center
        // 인디케이터 색상 지정
        activityIndicator.color = UIColor.red
        // 애니메이션 중(빙글빙글 돌아가게)에만 보여지게 할 것인지
        activityIndicator.hidesWhenStopped = true
        // 인디케이터의 스타일에 관하여
        activityIndicator.style = UIActivityIndicatorView.Style.medium
        // hideWhenStopped를 지정 해주었기 때문에 stop으로 지정
        activityIndicator.stopAnimating()
        return activityIndicator
    }()
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.addSubview(activitiIndicator)
    }
    @IBAction func startButtonDidTapped(_ sender: UIButton) {
        activitiIndicator.startAnimating()
    }
    @IBAction func stopButtonDidTapped(_ sender: UIButton) {
        activitiIndicator.stopAnimating()
    }    
}

잘 나오는 것을 확인할 수 있었다...!
다만 인디케이터가 조금 작아서 이의 크기를 늘려주고자 했었다. 하지만 frame값을 키워줘도 프로그레스 바의 크기는 커지지 않았다.

아래처럼 우리가 눈으로 볼 수 있는 인디케이터의 크기가 커지는게 아니라 그냥 view의 영역이 커지는걸 확인할 수 있었다.
사진의 크기는 UIActivityIndicatorView.Style.medium 이었고 large 속성이 있어서 이를 바꿔보면 약간 커지는 것을 볼 수 있었따.

Indicator의 호출 시기?

프로젝트에서 네트워크 작업을 시작하면서 indicator를 start하고 data fetch 작업이 끝났을 때 이를 없애는 방향으로 하려고 했다.

DispatchQueue.main.async {
    self.collectionView.alpha = 0
    self.activitiIndicator.startAnimating()
}
fetchData()
DispatchQueue.main.async {
    self.collectionView.alpha = 1
    self.activitiIndicator.stopAnimating()
}

다만 데이터를 collectionView에서 apply 해주는 작업이 비동기로 이루어지기 때문에 stopAnimating해주는 부분이 fetch의 컴플리션 핸들러에 들어가야함을 망각해서 많이 해맸던것 같다.

func fetchData() {
        manager.dataTask { [weak self] productList in
            var snapshot = NSDiffableDataSourceSnapshot<Section, Product>()
            snapshot.appendSections([.main])
            snapshot.appendItems(productList)
            self?.dataSource?.apply(snapshot, animatingDifferences: false)
            DispatchQueue.main.async {
                self?.activitiIndicator.stopAnimating()
                self?.collectionView.alpha = 1
            }
        }
    }

fetch() 메서드가 끝나는 시점이아닌, fetchData의 컴플리션 해들러의 마지막 부분에서 UI를 업데이트 해주니 잘 작동하였따.