[iOS] SkeletonView에 대해서 알아보자. ☠️

✅이번 시간에는 SkeletonView에 대해서 알아볼 예정이야.

 

✅목차

1️⃣ SkeletonView란 무엇일까?

2️⃣ 설치하는 방법

3️⃣ 간단한 예시를 코드와 함께 알아보자.

 

 

✅1. SkeletonView란 무엇일까?

우선 SkeletonView란 무엇인가 하면은...!

 

🟠네트워크 비동기 통신에서 데이터를 다 받아오기 전에 이렇게 알려주는 것을 의미해!

아래 이미지를 봐보자...!
(레이아웃은 연습이라서 대...충...)

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

 

✅2️⃣2. 설치하는 방법

 

 

👉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

 

🟠설치하는 방법은... (구찮아..) 

해당 프로젝트 파일에서

1. pod init

2. vi Podfile

3. Podfile안에 아래의 코드 작성 후 :wq

pod 'SkeletonView'

4. pod install

그럼 끝

import SkeletonView를 하여서 사용할 수 있습니다:)

 

아마 SkeletonView까지 알아보는 개발자라면 Pod으로 설치하는 것에 있어서는 큰 어려움이 없을 것이라고 생각하기에 이 부분은 간략하게 패스하도록 할게

 

✅ 3. 간단한 예시를 코드와 함께 알아보자.

스토리보드

🟠 1.  스토리보드에 컬렉션 뷰 하나를 오토레이아웃 잡아서 만들어준다

 

🟠 2. 코드부분

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

import Foundation
import UIKit
import SnapKit
import Then
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)
            }
            print("DispatchQueue")
            self.skeletonCollectionView.hideSkeleton(reloadDataAfter: true) // 스켈레톤 뷰 숨기고 데이터 리로드
            
        }
        
        
        print("data array \(data)")
    }
}

// 스켈레톤 뷰 코드
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!
}

 

🟠 코드 부분을 보면 알겠지만 상당히 쉬운 모습을 확인할 수 있었어.

다양한 메소드는 깃허브 들어가서 보면 되니까, 일단 기본적인 것만 알아보자~!

여러분 그럼 모두 휼룡한 개발자로 성장하는 그날까지 화이팅!