[실전] Swift Adding ActivityIndicator 로딩화면 띄우기

Activity Indicator 추가 및 사용법 from material-components-github

 

컬렉션뷰에서 셀 터치 후 Storage로부터 파일을 다운받는동안 AcivityIndicator 돌아가게 만들기.

 

1. pod file에 pod 'MaterialComponents' 설치 후 import해주기

import MaterialComponents.MaterialActivityIndicator

 

2. 컬렉션 뷰 컨트롤러 클라스에서 새로운 uiview instance와 activityIndicator 생성해주기

let overlayView = UIView()
let activityIndicator = MDCActivityIndicator()

 

3. setupView() 에서 overlayView 및 activityIndicator를 view에 추가해주고, 크기와 색을 설정

func setupViews() {

    overlayView.backgroundColor = UIColor(white: 0, alpha: 0.8) //색 생성
    overlayView.frame = view.bounds //화면 크기에 맞춰 크기 설정
    //view 위에 overlayView를 추가해주고 화면에서 숨긴다. 
    view.addSubview(overlayView) 
    self.overlayView.isHidden = true
    //view 위에 activityIndicator를 추가해주고 화면에서 숨긴다.
    view.addSubview(activityIndicator)
    activityIndicator.isHidden = true
    activityIndicator.sizeToFit()
    activityIndicator.cycleColors = [.magenta]
    activityIndicator.strokeWidth = 5
    activityIndicator.radius = 40
        
}

 

4. setupConstraints() 에서 activityIndicator의 constraints 추가

func setupConstraints() {
    activityIndicator.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        activityIndicator.centerXAnchor.constraint(equalTo: view.centerXAnchor), 
        activityIndicator.centerYAnchor.constraint(equalTo: view.centerYAnchor), 
        activityIndicator.widthAnchor.constraint(equalToConstant: 144), 
        activityIndicator.heightAnchor.constraint(equalToConstant: 144)
    ])
}

 

5. collectionView의 cell touch 이벤트 메서드 내에서 overlayView와 activityIndicator를 화면에 띄우고 실행시켜준다. 

override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
	//... 셀 터치 시 Storage 내 해당 폴더 속 파일들 리스트 받아오기.
    
    // overlayView와 activityIndicator를 화면에 띄우고 작동시키기. 
    self.overlayView.isHidden = false
    self.activityIndicator.isHidden = false
    self.activityIndicator.indicatorMode = .indeterminate    
    self.activityIndicator.startAnimating()
    
    //...파일 다운로드 진행
    
    // 파일 다운로드 완료 시 activityIndicator 멈추고 overlayView 다시 숨기기. 
    self.overlayView.isHidden = true
    self.activityIndicator.stopAnimating()
    
}