[오픈소스 라이브러리] JGProgressHUD 사용하기

 

1. 배경 

이전 포스팅에 이어서 Tinder 클론 앱을 제작 중, 

컨텐츠를 서버(Firebase)로부터 불러오는 동안 띄울 loading progress indicator가 필요했다.

 

 

애플의 HIG에 따르면, progress indicator는 많은 이점을 가져다준다.

 

  1. indicator를 계속 움직이게 해서 사용자가 앱이 멈췄다고 오해하지 않고, 무언가 로딩 중이라는 것을 인지하도록 도울 수 있음

  2. 데이터를 다운받는 도중 사용자의 액션에 의해 취소되면 사이드이펙트가 생기는 경우, indicator + 얼럿을 추가로 띄우면 방지 가능

  3. 자세하고 정확한 내용은 하단의 HIG - Progress Indicator 링크 참고

 

Progress indicators - Status - Components - Human Interface Guidelines - Design - Apple Developer

 

 

어차피 이미지를 불러오는 것이기도 하고,

이전글에서 포스팅한 SDWebImage는 async하게 이미지 데이터를 받기 때문에 spinnig progress indicator로 선택! 

 

 

 

 

애플에서 기본으로 제공해주는 NSProgressIndicatorStyleSpinnig도 존재하지만,

오픈소스 라이브러리 사용에 좀 더 친숙해지기 위해 JGProgressingHUD를 사용해보기로 했다.

 

 

 

 

 

2. JGProgressingHUD 란?

  Swift / Obj-C 에서 사용할 수 있는  Loading Progress Indicator 라이브러리이다. 

 

  JGProgressingHUD 장점:

   1. loading progress indicator가 띄워진 동안, 뒤에 있는 view들을 선택할 수 없어서 안-전 하다.

   2. loading progress indicator의 위치를 중앙으로 자동 배치해준다.

 

GitHub - JonasGessner/JGProgressHUD: An elegant and simple progress HUD for iOS and tvOS, compatible with Swift and ObjC.

둘 중, 난 왼쪽의 로딩뷰를 사용할 것이다.

 

 

3. 사용법

 

 1. 원하는 프로젝트의 podfile에 JGProgressingHUD 받고 install 하기

 

 2. import JGProgressingHUD

 

3. 사용할 HUD 스타일 설정 및 세팅하기

 

  1. 이미지를 업로드 하는 작업이 완료될 동안 HUD 띄우기

  2. 이미지 업로드가 끝나면, HUD dismiss하기   (@escaping 클로저인, 컴플리션 핸들러에 호출)

 

        let hud = JGProgressHUD(style: .dark)     // 원하는 스타일로 HUD 생성
        hud.textLabel.text = "Saving Your Data"   // HUD 상에 표시될 text 설정
        hud.show(in: view)                        // HUD를 띄울 view 선택하여 띄우기

 

 

 

4. 확인하기

 

 

 

5. 결론

loading progress indicator는 처음인데, 오픈 소스 덕에 매우 간편하게 만든 것 같다... 재밌다.. 맛있ㄷ ㅏ..!!