SkeletonView骨架使用
github地址入口:
https://github.com/Juanpe/SkeletonView
官方的介绍就不重复了, 只介绍如果在项目中方便的应用
**有两个方案 **
- 某个界面可能某个控件, 或者某块区域的控件需要骨架图
- 整个页面都需要骨架图
方案二
当我们写一个复杂如果需要骨架图的时候, 这个时候考虑使用一个新的tableView,覆盖到真实页面中去.
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
60
61
|
import SkeletonView
open class HomePageSkeletonTableView: UITableView, UITableViewDelegate, UITableViewDataSource {
public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 0
}
public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
return UITableViewCell()
}
public override init(frame: CGRect, style: UITableView.Style) {
super.init(frame: frame, style: style)
showsVerticalScrollIndicator = false
sectionHeaderHeight = UITableView.automaticDimension
rowHeight = UITableView.automaticDimension
separatorStyle = .none
contentInsetAdjustmentBehavior = .never
isSkeletonable = true
backgroundColor = .clear
self.delegate = self
self.dataSource = self
self.register(customCell.self)
}
public required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
extension HomePageSkeletonTableView: SkeletonTableViewDataSource {
public func collectionSkeletonView(_ skeletonView: UITableView, cellIdentifierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier {
if indexPath.section == 0 {
return String(describing: skeletonCell1.self)
} else if indexPath.section == 1 {
return String(describing: skeletonCell2.self)
} else {
return String(describing: skeletonCell3.self)
}
}
public func numSections(in collectionSkeletonView: UITableView) -> Int {
return 3
}
public func collectionSkeletonView(_ skeletonView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1
}
}
|
要显示的tableview样式好了, 那么外面怎么使用呢?
- 先将
skeletonTableview实例化, 添加到controller的view上, 覆盖真实界面.
- 设置
skeletonTableview显示骨架动画
- 设置刷新
Skeleton
- 最后, 拿到界面数据后, 移除
skeletonTableview
1
| view.addSubview(skeketonTableView)
|
1
2
3
4
| skeketonTableView.topAnchor.constraint(equalTo: view.topAnchor),
skeketonTableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
skeketonTableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
skeketonTableView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
|
1
2
3
4
| public override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
skeketonTableView.layoutSkeletonIfNeeded()
}
|
1
2
3
4
5
6
|
if self.skeketonTableView.isSkeletonable {
self.skeketonTableView.isSkeletonable = false
self.skeketonTableView.hideSkeleton()
self.skeketonTableView.removeFromSuperview()
}
|
