iOS SkeletonView 총 정리

iOS SkeletonView 총 정리

 

목차

• SkeletonView란 무엇일까?
• 설치하는 방법
• 사용하는 방법 (예시 및 코드)

 

SkeletonView란 무엇일까?

네트워크 상태에서 받아오기 전까지 placeholder처럼 나타나는 UI

이렇게 데이터가 나타나기 전에 미리 무언가 있다는 것을 알려주는 것!

 

✅ 설치하는 방법

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

cocoapod으로 파일 안에 스켈레톤 뷰 설치하면 된다.

pod 'SkeletonView'

 

요즘은 점점 spm이 트렌드인거 같은데, spm도 사용해도 된다

 

 

스토리보드 사용

• 코드 기반으로 할 경우에는 셀에서 별도 옵션 명시적 활성화 필요

스토리보드

 

코드예시

//
//  SkeletonViewTest.swift
//  kuring-uikit-ios
//
//  Created by Hamlit Jason on 2021/11/30.
//

import Then
import UIKit
import SnapKit
import SkeletonView

class SkeletonViewTest : UIViewController {
    
    @IBOutlet weak var skeletonCollectionView: UICollectionView!
    
    var data : [Int] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        skeletonCollectionView.showAnimatedGradientSkeleton() // 애니메이션 시작
        print("viewDidLoad")
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            for i in 0..<10 {
                self.data.append(i)
            }
            self.skeletonCollectionView.hideSkeleton(reloadDataAfter: true) // 스켈레톤 뷰 숨기고 데이터 리로드
        }
    }
}

// 스켈레톤 뷰 코드
extension SkeletonViewTest : SkeletonCollectionViewDelegate, SkeletonCollectionViewDataSource {
    
    // 스켈레톤 몇개 만들래?
    func collectionSkeletonView(_ skeletonView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    
    // 스켈레톤 뷰를 적용할 cell id는 뭐야? (이 부분은 그냥 컬렉션 뷰 cell id와 같게 해주면 된다.)
    func collectionSkeletonView(_ skeletonView: UICollectionView, cellIdentifierForItemAt indexPath: IndexPath) -> ReusableCellIdentifier {
        return "skeletonCell"
    }
    
    
}

// 일반 컬렉션 뷰 코드
extension SkeletonViewTest : UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return data.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = self.skeletonCollectionView.dequeueReusableCell(withReuseIdentifier: "skeletonCell", for: indexPath) as? skeletonCell else {
            return UICollectionViewCell()
        }
        
        if !data.isEmpty {
            cell.cellLabel.text = "\(indexPath.item) 번째 "
        }
        
        return cell
    }
}

class skeletonCell : UICollectionViewCell {
    
    @IBOutlet weak var cellLabel: UILabel!
}

 

 

상당히 쉬움 끝!