Swift-骨架屏SkeletonView使用

UITableView 使用SkeletonView

Xcode 12, simulator iPhone12 pro iOS 14.5

SkeletonViewGit地址

Demo地址

image

1.以SkeletonTableViewDataSource代替UITableViewDataSource，并实现额外的代理方法

    //skelentonView
    func numSections(in collectionSkeletonView: UITableView) -> Int {
        return 1
    }
    
    func collectionSkeletonView(_ skeletonView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 3
    }
    
    func collectionSkeletonView(_ skeletonView: UITableView, cellIdentifierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier {
        return "secondCell"
    }

2.所有view设置isSkeletonable = true

//tableiview
tableView.isSkeletonable = true
//cell内控控件
func initSkeletonEnable() {
    isSkeletonable = true
    iconImageView.isSkeletonable = true
    firstLabel.isSkeletonable = true
    secondLabel.isSkeletonable = true
    bottomTool.isSkeletonable = true
}

3.显示及隐藏SkeletonView

tableiview.showAnimatedSkeleton()
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 1) {
    self.tableiview.hideSkeleton()
}

UICollectionView使用SkeletonView

image

1.以SkeletonCollectionViewDataSource代替UICollectionViewDataSource，并实现额外的代理方法

    //skeleton
    func collectionSkeletonView(_ skeletonView: UICollectionView, cellIdentifierForItemAt indexPath: IndexPath) -> ReusableCellIdentifier {
        return "secondCell"
    }
    
    func collectionSkeletonView(_ skeletonView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 20
    }

2.所有view设置isSkeletonable = true

collectionView.isSkeletonable = true
//collectionCell
func initSkeletonEnable() {
    isSkeletonable = true
    firstLabel.isSkeletonable = true
    secondLabel.isSkeletonable = true
}

3.显示及隐藏SkeletonView

collectionView.showAnimatedSkeleton()
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 1) {
    self.collectionView.hideSkeleton()
}