iOS开发 SkeletonView

发表于 |

SkeletonView一种优雅的方式，向用户显示正在发生的事情，并为他们正在等待的内容做好准备

1.安装

pod "SkeletonView"

2.如何使用

2.1在适当的位置导入SkeletonView

import SkeletonView

2.2设置视图skeletonables

avatarImageView.isSkeletonable = true

2.3显示骨架

1
2
3
4
view.showSkeleton()                 // Solid
view.showGradientSkeleton()         // Gradient
view.showAnimatedSkeleton()         // Solid animated
view.showAnimatedGradientSkeleton() // Gradient animated

2.4更新骨架（如颜色，动画等）

1
2
3
4
view.updateSkeleton()                 // Solid
view.updateGradientSkeleton()         // Gradient
view.updateAnimatedSkeleton()         // Solid animated
view.updateAnimatedGradientSkeleton() // Gradient animated

2.5隐藏骨架

1
view.hideSkeleton()

3.UITableView

markdown

3.1遵守SkeletonTableViewDataSource协议，并实现协议方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
extension SearchMovieViewController: SkeletonTableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.models.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let model = self.models[indexPath.row]
        let cell = tableView.dequeueReusableCell(withIdentifier: "SearchMovieCell", for: indexPath) as! SearchMovieCell
        if model.vod_pic?.isEmpty == false {
            cell.movieImageView.kf.indicatorType = .activity
            cell.movieImageView.kf.setImage(with: ImageResource(downloadURL: URL(string: model.vod_pic!)!), placeholder: UIImage(named: "zanwutupian"))
        }
        cell.titleLabel.text = model.vod_name
        cell.detailsLabel.text = model.vod_blurb
        return cell
    }

    func collectionSkeletonView(_ skeletonView: UITableView, cellIdentifierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier {
        return "SearchMovieCell"
    }
}

3.2 设置视图skeletonables

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
class SearchMovieCell: DiaryBaseTableViewCell {

/// 图片
var movieImageView: UIImageView!

/// 标题
var titleLabel: UILabel!

/// 详情
var detailsLabel: LCZAlignTopLabel!


override func config() {
    self.isSkeletonable = true
    movieImageView = UIImageView()
    self.contentView.addSubview(movieImageView)
    movieImageView.snp.makeConstraints { (make) in
        make.left.equalToSuperview().offset(15)
        make.centerY.equalToSuperview()
        make.height.equalTo(100)
        make.width.equalTo(80)
    }
    movieImageView.layer.cornerRadius = 5
    movieImageView.clipsToBounds = true
    movieImageView.contentMode = .scaleAspectFill
    movieImageView.setContentHuggingPriority(.required, for: .horizontal)
    movieImageView.setContentCompressionResistancePriority(.required, for: .horizontal)
    movieImageView.isSkeletonable = true

    titleLabel = UILabel()
    self.contentView.addSubview(titleLabel)
    titleLabel.snp.makeConstraints { (make) in
        make.left.equalTo(movieImageView.snp.right).offset(5)
        make.top.equalTo(movieImageView.snp.top)
        make.right.equalToSuperview().offset(-15)
    }
    titleLabel.font = LCZBoldFontSize(size: 16)
    titleLabel.setContentHuggingPriority(.required, for: .vertical)
    titleLabel.setContentCompressionResistancePriority(.required, for: .vertical)
    titleLabel.text = "xxxxxxxxx"
    titleLabel.isSkeletonable = true
    titleLabel.textAlignment = .left

    detailsLabel = LCZAlignTopLabel()
    self.contentView.addSubview(detailsLabel)
    detailsLabel.snp.makeConstraints { (make) in
        make.left.equalTo(movieImageView.snp.right).offset(5)
        make.top.equalTo(titleLabel.snp.bottom).offset(5)
        make.right.equalToSuperview().offset(-15)
        make.bottom.equalTo(movieImageView.snp.bottom)
    }
    detailsLabel.font = LCZFontSize(size: 14)
    detailsLabel.numberOfLines = 0;
    detailsLabel.textColor = LCZRgbColor(160, 160, 160, 1)
    detailsLabel.isSkeletonable = true
    detailsLabel.textAlignment = .left
    }

}

3.3 显示骨架

1
self.searchMovieView.tableView.visibleCells.forEach { $0.showAnimatedGradientSkeleton(usingGradient: SkeletonGradient(baseColor: UIColor.clouds),animation: GradientDirection.topLeftBottomRight.slidingAnimation()) }

4.UICollectionView

markdown

4.1 遵守SkeletonCollectionViewDataSource协议，并实现协议方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
func collectionSkeletonView(_ skeletonView: UICollectionView, cellIdentifierForItemAt indexPath: IndexPath) -> ReusableCellIdentifier {
    return "MovieHomeCell"
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MovieHomeCell", for: indexPath) as! MovieHomeCell
    let model = self.models[indexPath.row]
    if model.vod_pic?.isEmpty == false {
        cell.imageView.kf.indicatorType = .activity
        cell.imageView.kf.setImage(with: ImageResource(downloadURL: URL(string: model.vod_pic!)!), placeholder: UIImage(named:"zanwutupian"))
    }
    cell.titleLabel.text = model.vod_name
    return cell
}
// 显示骨架cell的个数
func collectionSkeletonView(_ skeletonView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 12
}

4.2 设置视图skeletonables

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
class MovieHomeCell: DiaryBaseCollectionViewCell {

/// 图片
var imageView = UIImageView()

/// 标题
var titleLabel = UILabel()

override func config() {
    self.isSkeletonable = true
    self.contentView.layer.cornerRadius = 10
    self.layer.cornerRadius = 10
    self.contentView.clipsToBounds = true

    self.contentView.addSubview(self.titleLabel)
    self.titleLabel.font = LCZBoldFontSize(size: 16)
    self.titleLabel.snp.makeConstraints({ (make) in
        make.bottom.equalToSuperview().offset(-10)
        make.left.equalToSuperview().offset(10)
        make.right.equalToSuperview().offset(-10)
    })
    self.titleLabel.textAlignment = .center
    self.titleLabel.font = LCZFontSize(size: 14)
    self.titleLabel.textColor = LCZHexadecimalColor(hexadecimal: "#FECE1D")
    self.titleLabel.isSkeletonable = true
    self.titleLabel.text = "乐淘视界"

    self.contentView.addSubview(self.imageView)
    self.imageView.contentMode = .scaleAspectFill
    self.imageView.clipsToBounds = true
    self.imageView.snp.makeConstraints { (make) in
        make.left.top.right.equalToSuperview()
        make.bottom.equalTo(self.titleLabel.snp.top).offset(-10)
    }
    self.imageView.isSkeletonable = true
}

}

3.3 显示骨架

1
2
3
4
5
view.isSkeletonable = true
self.moreMoviesView.collectionView.prepareSkeleton(completion: { done in
    self.view.showAnimatedGradientSkeleton(usingGradient: SkeletonGradient(baseColor: UIColor.clouds),
    animation: GradientDirection.topLeftBottomRight.slidingAnimation())
})
坚持原创技术分享，您的支持将鼓励我继续创作！