iOS Swift 라이브러리 Activity Indicator 사용하기

안녕하세요 Gons 입니다.

오늘은 Activity Indicator 를 사용해보겠습니다.

액티비티 인디케이터는 Xcode 기본 라이브러리로 있긴 있는데요

Xcode Basic Activity Indicator

이렇게 생겼습니다.

모양도 너무 기본으로 안예쁘고 "로딩중..." 이라는 글씨라도 넣으려면 디자인하기 머리가 복잡해지죠.

그래서 제가 소개해드릴 라이브러리는 다양한 디자인도 있고 글씨 넣기도 좋고 사용하기 편리합니다.

그럼 시작하겠습니다.

 

 

 

 

 

 

 

1. github 에 접속해주세요.

https://github.com/

↑↑ 주소입니다.

 

 

 

 

 

 

 

 

2. indicator 를 검색해주세요.

Github 에서 indicator 검색

 

 

 

 

 

 

3. 검색결과에서 swift 만 필터해주세요.

Languages 에 Swift 만 선택

 

 

 

 

 

4. 우리가 사용할 라이브러리로 들어가주세요.

사람들이 많이 사용하는 라이브러리 접속

빨간색 박스를 그려놓은 NVActivityIndicatorView 가 오늘 우리가 사용할 라이브러리입니다.

https://github.com/ninjaprox/NVActivityIndicatorView

↑↑ 주소는 여기입니다.

 

 

 

 

 

 

 

5. 사용하기

 

라이브러리를 설치해주세요.

pod 'NVActivityIndicatorView'

※ 아직 podfile 또는 코코아팟이 없다면 이전 포스팅 코코아팟 설치 방법을 보고 podfile 을 생성해주세요.

 

 

 

 

깃허브 페이지 안에 사용법과 예제 코드가 나와있습니다.

 

직접 Xcode에서 한번 사용해보겠습니다.

 

 

 

 

사용할 곳에서 import를 하고

import NVActivityIndicatorView

※ 여기서 import 에 안뜨시는분은 커맨드⌘ + B 를 눌러서 한번 빌드하신 후에 진행해주세요.

 

 

 

 

이런식으로 만들어주세요.

let indicator = NVActivityIndicatorView(frame: CGRect(x: 162, y: 100, width: 50, height: 50),
                                        type: .circleStrokeSpin,
                                        color: .black,
                                        padding: 0)

 

frame 에 원하는 크기, 원하는 위치로 설정을 하고

type 은 원하는 모양으로 고르시고

color 도 지정하면 됩니다.

 

 

 

 

 

 

뷰에다가 넣고 

self.view.addSubview(indicator)

 

 

원하는 타이밍에 실행시켜주면 됩니다.

indicator.startAnimating()

 

 

로딩이 끝났을 때 정지시켜주면 되고요.

indicator.stopAnimating()

 

 

현재 애니메이션 상태인지 true, false 값으로 확인할 수도 있고요.

indicator.isAnimating

 

 

 

타입 32. circleStrokeSpin

저는 기본모양으로 이렇게 한번 만들어봤습니다.

 

 

 

 

 

 

 

타입옵션은 32가지가 있습니다. 마음에 드는 모양으로 입력하시면 됩니다.

1. ballPulse	2. ballGridPulse	3. ballClipRotate	4. squareSpin
5. ballClipRotatePulse	6. ballClipRotateMultiple	7. ballPulseRise	8. ballRotate
9. cubeTransition	10. ballZigZag	11. ballZigZagDeflect	12. ballTrianglePath
13. ballScale	14. lineScale	15. lineScaleParty	16. ballScaleMultiple
17. ballPulseSync	18. ballBeat	19. lineScalePulseOut	20. lineScalePulseOutRapid
21. ballScaleRipple	22. ballScaleRippleMultiple	23. ballSpinFadeLoader	24. lineSpinFadeLoader
25. triangleSkewSpin	26. pacman	27. ballGridBeat	28. semiCircleSpin
29. ballRotateChase	30. orbit	31. audioEqualizer	32. circleStrokeSpin

 

 

 

인디케이터 하단에 message 도 한번 넣어볼까요?

class ViewController: UIViewController, NVActivityIndicatorViewable {

먼저 ViewController 에 NVActivityIndicatorViewable 프로토콜을 상속받고

 

 

 

 

 

이런식으로 메시지를 넣어 실행해주세요.

startAnimating(CGSize(width: 100, height: 100),
                       message: "로딩중...",
                       type: .ballRotateChase,
                       color: .white)

 

 

 

 

 

 

타입 29.  ballRotateChase + 글씨

이렇게 글씨 포함해서 나온답니다.

 

 

 

 

 

 

애니메이션 중간에 메시지도 변경할 수 있습니다. 이렇게요.

NVActivityIndicatorPresenter.sharedInstance.setMessage("완료중...")

실제 로딩 상태가 변하는 부분에 넣으면 좋겠죠?

 

 

 

 

 

 

끝.

블로그도 처음해보고 글도 많이 써보질 않아서

읽으면서 좀 이상한 부분이 있기도 할 것 같은데요

양해 부탁드리겠습니다.

다음에는 더 도움되는 내용으로 찾아오겠습니다.

감사합니다.