[swift] Swift SkeletonView 적용하기
SkeletonView는 앱 개발시 로딩 상태를 시각적으로 나타내는 라이브러리입니다. 이를 사용하면 데이터가 로딩되기 전에 일시적으로 사용자에게 로딩 중임을 알려주는 효과를 줄 수 있습니다.
이번 포스트에서는 SkeletonView를 Swift 프로젝트에 적용하는 방법에 대해 알아보겠습니다.
설치하기
SkeletonView를 사용하기 위해 먼저 CocoaPods를 사용하여 프로젝트에 추가해야 합니다. 프로젝트의 Podfile에 다음과 같은 내용을 추가합니다.
pod 'SkeletonView'
그리고 터미널에서 다음 명령어를 실행하여 pod를 설치합니다.
$ pod install
사용하기
UIViewController에서 SkeletonView를 사용하기 위해SkeletonViewDelegate를 상속받도록 설정합니다.
class ViewController: UIViewController, SkeletonViewDelegate {
//...
}
- 스켈레톤 효과를 주고 싶은 뷰를 선택하고
isSkeletonable속성을 true로 설정합니다.
class ViewController: UIViewController, SkeletonViewDelegate {
@IBOutlet weak var titleLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
titleLabel.isSkeletonable = true
}
}
- 로딩 중인 상태에서 보여질 스켈레톤 효과를 설정합니다.
class ViewController: UIViewController, SkeletonViewDelegate {
@IBOutlet weak var titleLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
titleLabel.isSkeletonable = true
titleLabel.skeletonCornerRadius = 8
titleLabel.linesCornerRadius = 4
titleLabel.linesWidth = 1
titleLabel.linesSpacing = 4
titleLabel.linesHeight = 18
}
}
- 스켈레톤 효과를 활성화하고 비활성화하는 메서드를 호출합니다.
class ViewController: UIViewController, SkeletonViewDelegate {
@IBOutlet weak var titleLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
titleLabel.isSkeletonable = true
titleLabel.skeletonCornerRadius = 8
titleLabel.linesCornerRadius = 4
titleLabel.linesWidth = 1
titleLabel.linesSpacing = 4
titleLabel.linesHeight = 18
// 활성화
titleLabel.showSkeleton()
// 비활성화
titleLabel.hideSkeleton()
}
}
마치며
SkeletonView를 사용하면 앱에 로딩 상태를 시각적으로 표현할 수 있습니다. 위에서 설명한 방법을 따라서 구현하면 간편하게 SkeletonView를 사용할 수 있습니다.
더 자세한 정보는 SkeletonView GitHub 페이지를 참고해주세요.