UIKit에서 UICollectionView에 SkeletonView 간단하게 사용해보기

 

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

• 위 링크를 통해 Xcode SPM에 라이브러리 패키지 추가

 

• 사용할 뷰컨트롤러에 SkeletonView를 import

import SkeletonView

 

• collectionView에서 사용되는 cell의 View들(component?)의 속성에서 SkeletonView를 사용 가능하도록 변경

private func configureSkeleton() {
    isSkeletonable = true // cell 자체도 skeletonable에 true를 대입
    thumbnailImageView.isSkeletonable = true
    basketBackgroundView.isSkeletonable = true
    basketImageView.isSkeletonable = true
    basketForgroundView.isSkeletonable = true
    mallNameLabel.isSkeletonable = true
    productTitleLabel.isSkeletonable = true
    priceLabel.isSkeletonable = true
}

 

• SkeletonView 애니메이션을 보여줄 collectionView에도 SkeletonView를 사용 가능하도록 변경

searchResultCollectionView.isSkeletonable = true

 

• SkeletonView가 가지고 있는 protocol이 UITableView 및 UICollectionView의 protocol을 채택하고 있는데
• SkeletonView를 collectionView에 보여주기 위해서는 아래 메서드를 작성해줘야 한다.
  • 필요한 메서드만 작성해주면 됨.

public protocol SkeletonCollectionViewDataSource: UICollectionViewDataSource {
    func numSections(in collectionSkeletonView: UICollectionView) -> Int
    func collectionSkeletonView(_ skeletonView: UICollectionView, numberOfItemsInSection section: Int) -> Int
    func collectionSkeletonView(_ skeletonView: UICollectionView, cellIdentifierForItemAt indexPath: IndexPath) -> ReusableCellIdentifier
    func collectionSkeletonView(_ skeletonView: UICollectionView, supplementaryViewIdentifierOfKind: String, at indexPath: IndexPath) -> ReusableCellIdentifier?
    func collectionSkeletonView(_ skeletonView: UICollectionView, skeletonCellForItemAt indexPath: IndexPath) -> UICollectionViewCell?
    func collectionSkeletonView(_ skeletonView: UICollectionView, prepareCellForSkeleton cell: UICollectionViewCell, at indexPath: IndexPath)
    func collectionSkeletonView(_ skeletonView: UICollectionView, prepareViewForSkeleton view: UICollectionReusableView, at indexPath: IndexPath)
}

public protocol SkeletonCollectionViewDelegate: UICollectionViewDelegate { }

extension NVSSearchResultViewController: SkeletonCollectionViewDelegate,
                                         SkeletonCollectionViewDataSource {
    // SkeletonView의 애니메이션을 보여줄 ReusableCell의 identifier 값만 반환
    func collectionSkeletonView(_ skeletonView: UICollectionView, cellIdentifierForItemAt indexPath: IndexPath) -> SkeletonView.ReusableCellIdentifier {
        return SearchResultCollectionViewCell.identifier
    }
    
    // SkeletonView의 애니메이션을 보여줄 ReusableCell의 갯수
    func collectionSkeletonView(_ skeletonView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 30
    }
}

 

• SkeletonView 애니메이션을 보여주고 싶은 시점에 아래 메서드 호출
• SkeletonView의 애니메이션 종류가 많으니 사용하고 싶은 애니메이션 사용 및 설정도 가능

searchResultCollectionView.showGradientSkeleton()

 

• SkeletonView의 애니메이션을 멈추고 싶은 시점에서 아래 메서드 호출
• hideSkeleton() 메서드 안에서도 설정이 따로 가능

searchResultCollectionView.stopSkeletonAnimation()
searchResultCollectionView.hideSkeleton(reloadDataAfter: true, transition: .crossDissolve(0.25))