<Swift>Skeleton 사용하기

skeleton

앱을 사용하다보면 위와 같은 로딩 뷰를 본적이 있을텐데
오늘은 위와 같은 로딩 뷰 skeleton 사용법을 알아보자!

 

프로젝트를 새로 생성 후

해당 경로에 pod init 후에  

podfile에 아래 명령어를 삽입해서 Skeleton을 설치 합니다.

pod 'SkeletonView'

사용할 ViewController에 가서 "import SkeletonView"를 상단에 넣어 줍니다.

그리고 이제 storyboard를 만들어 줄껀데.

main storyboard

저는 다음과 같이 만들었습니다 4개 view 다른 효과를 줄 껍니다. ( 뒷 배경은 위 캡쳐화면을 위해서 잠시 검정색으로 해서 4개 view가 잘 보이게 작성했습니다.)

그리고 각 뷰마다 설정을 해주어야 하는데.

 

먼저 스토리 보드를 이용하면 

위와 같이 뷰를 선택하여 Attributes를 변경하는 방법이 있고,

코드로 작성하면 아래와 같이 작성해 주면 된다.

view.isSkeletonable = true

 

자 이제 각 뷰마다 skeletonView효과를 주면

코드

이런식으로 주면 아래와 같은 결과가 나온다.

결과 화면

이제 각 뷰마다 스토리 보드에 라벨을 아래와 같이 추가해서

라벨 추가

skeletonView의 로딩이 끝나면 라벨이 보이게 만들어 보겠습니다.

코드

로딩 시간은 5초이며 5초후 skeleton을 숨겨 줍니다 그러면 다음과 같은 결과 화면이 나옵니다.

결과화면

위와 같이 skeletonview를 활용하면 자연스럽고 부드러운 화면 노출과 로딩이 가능합니다.

 

 

 

아래를 참고하시면 더 많은 정보를 확인 할 수 있습니다.

 

https://github.com/Juanpe/SkeletonView

GitHub - Juanpe/SkeletonView: ☠️ An elegant way to show users that something is happening and also prepare them to which con