[swift] Swift SkeletonView 예제

20 Nov 2023

swift

이번 예제에서는 Swift SkeletonView 라이브러리를 사용하여 스켈레톤 UI 효과를 구현하는 방법을 알아보겠습니다.

1. SkeletonView 설치

먼저, CocoaPods를 사용하여 Swift SkeletonView 라이브러리를 설치해야 합니다. Podfile에 다음과 같이 추가해주세요.

target 'YourTarget' do
  pod 'SkeletonView'
end

그런 다음 터미널에서 pod install 명령을 실행하여 라이브러리를 설치합니다.

2. SkeletonView 사용 예제

SkeletonView는 UIView 및 UITableViewCell, UICollectionViewCell 등과 같은 다양한 UI 요소에 적용할 수 있는 스켈레톤 효과를 제공합니다. 예제를 통해 사용법을 알아보겠습니다.

UIView에 SkeletonView 적용하기

import UIKit
import SkeletonView

class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        // 스켈레톤 효과를 적용할 대상을 선언합니다.
        label.isSkeletonable = true

        // 스켈레톤 효과를 설정합니다.
        label.showSkeleton(usingColor: .lightGray)

        // 스켈레톤 효과를 제거합니다.
        label.hideSkeleton()
    }
}

UITableViewCell에 SkeletonView 적용하기

import UIKit
import SkeletonView

class MyTableViewCell: UITableViewCell {

    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
        // 스켈레톤 효과를 적용할 대상을 선언합니다.
        titleLabel.isSkeletonable = true
        descriptionLabel.isSkeletonable = true
    }

    func showSkeleton() {
        // 스켈레톤 효과를 설정합니다.
        titleLabel.showSkeleton(usingColor: .lightGray)
        descriptionLabel.showSkeleton(usingColor: .lightGray)
    }

    func hideSkeleton() {
        // 스켈레톤 효과를 제거합니다.
        titleLabel.hideSkeleton()
        descriptionLabel.hideSkeleton()
    }
}

위의 예제 코드에서는 자신의 ViewController 또는 UITableViewCell에서 SkeletonView를 import한 다음, 스켈레톤 효과를 적용할 대상을 지정하고 설정하는 방법을 알 수 있습니다.

3. 추가적인 설정

SkeletonView를 더욱 다양하게 사용하기 위해 다양한 설정을 사용할 수 있습니다. 자세한 사용법 및 추가 설정에 대해서는 공식 GitHub 저장소를 참고해주세요.

이상으로 Swift SkeletonView를 사용하여 스켈레톤 UI 효과를 구현하는 방법에 대해 알아보았습니다. 이제 자신의 프로젝트에 적용하여 보다 멋진 UI를 구현할 수 있을 것입니다.