[iOS/Swift] SkeletonView 사용법 - 기본 사용법 / 로딩 대기중 표현

이미지 출처 : “linear-gradient로 skeleton screen 만들어보기”은(는) 잠겨있습니다 linear-gradient로 skeleton screen 만들어보기 | WIT블로그 (nts-corp.com)

 위 사진과 같이 애플리케이션에서 로딩하는 순간에 미리 틀? 같은 것이 나와서 대기를 하는 것을 볼 수 있을 것이다. 딱히 이것에 대해서 깊게 생각해본 적은 없지만 저게 있으면서 로딩을 하고 있구나, 대기를 해야 하는구나 같은 느낌을 심어준다. Skeleton이라고 부르는데 iOS는 SkeletonView라고 부르기도 한다. 찾아보니 아주 유명한 라이브러리가 있다.

 

Juanpe/SkeletonView: ☠️ An elegant way to show users that something is happening and also prepare them to which contents they are awaiting (github.com)

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

 받은 Star 수를 확인하면 매우 믿음직스럽다. 사용법도 많~이 어렵지는 않았다. 기본적인 방법은 많이 간단해서 적용정도는 걱정이 없다.

 

pod 'SkeletonView'

CocoaPods을 이용해서 간단하게 설치 할 수 있다.

 

import SkeletonView

사용하는 위치에서 import는 필수

 

import를 완료했디면, 레이블 두 개를 생성하고 IBoutlet을 연결해준다.

label1.isSkeletonable = true
label2.isSkeletonable = true
        
label1.showSkeleton()
label2.showSkeleton()

우선 레이블이 Skeleton이 가능하게 만들어준다. 다음은 그 레이블에서 showSkeleton을 하는 것이다.

그럼 이런식으로 작동한다.

 

import UIKit
import SkeletonView

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        label1.isSkeletonable = true
        label2.isSkeletonable = true
        
        label1.showSkeleton()
        label2.showSkeleton()
    }
}

 

Solid (왼쪽 위) / Gradient (오른쪽 위) / Gradient Animated (왼쪽 아래) / Solid Animated (오른쪽 아래) 

 

 다음과 같이 레이아웃을 작성했다. 위에서 소개한 4가지를 비교하고 싶어서 버튼도 만들었다.

IBOutlet도 연결을 완료하고 코드를 작성한다.

 

imageView.isSkeletonable = true
nameLabel.isSkeletonable = true
ageLabel.isSkeletonable = true
detailLabel.isSkeletonable = true
detailContentLabel.isSkeletonable = true

self.view.isSkeletonable = true

이번에는 isSkeletonable을 “self.view” 즉 저 UI Object들을 담고 있는 superView까지 적용을 해준다.

 

@IBAction func resetBtn(_ sender: Any) {
	self.view.hideSkeleton()
}

@IBAction func solidBtn(_ sender: Any) {
	self.view.showSkeleton()
}
@IBAction func gradientBtn(_ sender: Any) {
	self.view.showGradientSkeleton()
}
@IBAction func solidAnimatedBtn(_ sender: Any) {
	self.view.showAnimatedSkeleton()
}
@IBAction func gradientAnimatedBtn(_ sender: Any) {
	self.view.showAnimatedGradientSkeleton()
}

 버튼마다. 위에서 보여준 4가지 방법들을 show 해주었는데 self.view만 한 이유는 superview를 상대로 show를 진행하면 하위 subview들 모두 작동하기 때문에 가능한 일이다.

 

self.view.hideSkeleton()

 이 코드를 작성하지 않고 단순 show로만 변화를 주면 적용이되지 않아서 hide를 해주고 show를 하는 방식으로 코드를 작성했다.