源码
iOS Skeleton Screen加载占位图
投稿者前言：
APP从加载请求到数据显示在界面上，需要网络相应的时间，大部分处理时添加菊花转圈等待打发这段时间，但是似乎有一种更加好的方式，就是Skeleton Screen Loading。
什么是 Skeleton Screen Loading：
所谓Skeleton Screen Loading即表示在页面完全渲染完成之前，用户会看到一个样式简单，描绘了当前页面的大致框架，感知到页面正在逐步加载，加载完成后，这个样式框架被真实的数据替换掉。 Skeleton Screen非常适用于版本基本决定的列表展示页等，大部分Skeleton Screen 是通过h5或者vue来实现的。
本文主要介绍iOS环境下如何实现这种效果，已经有大神写了一个开源的库SkeletonView，在这里感谢，看看是怎么使用的。
废话不多说，看代码和实现效果就行了 Demo地址为github.com/daomoer/Ske…
import UIKit
import SkeletonView
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, SkeletonTableViewDelegate, SkeletonTableViewDataSource{
let identifier = "CustomCell"
var headerView : HeaderVeiw?
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.white
self.navigationItem.title = "Skeleton Screen加载占位图"
let tableView = UITableView.init(frame: CGRect(x:0, y:0, width:UIScreen.main.bounds.width, height:UIScreen.main.bounds.height))
tableView.delegate = self
tableView.dataSource = self
view.addSubview(tableView)
tableView.estimatedRowHeight = 80
self.headerView = HeaderVeiw.init(frame: CGRect(x:0, y:0, width:UIScreen.main.bounds.width, height:220))
tableView.tableHeaderView = self.headerView
//注册nib
tableView.register(UINib.init(nibName: "CustomCell", bundle: nil), forCellReuseIdentifier: identifier)
//让tableview支持骨架功能
tableView.isSkeletonable = true
//4秒后隐藏骨架屏
DispatchQueue.main.asyncAfter(deadline: .now() + 4) {
self.view.hideSkeleton()
self.headerView?.hideSkeleton()
}
}
//页面显示骨架屏，有四中显示样式和动画
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
self.view.showAnimatedSkeleton()
self.headerView?.showAnimatedGradientSkeleton()
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 5
}
//SkeletonTableViewDataSource
func collectionSkeletonView(_ skeletonView: UITableView, cellIdenfierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier {
return "CustomCell"
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: identifier, for: indexPath) as! CustomCell
headerView?.setValueForHeader()
cell.iconImage.image = UIImage(named:"经典")
cell.titleLabel.text = "大大大标题"
cell.subLabel.text = "下峥嵘而无地兮，上寥廓而无天。视倏忽而无见兮，听惝恍而无闻。超无为以至清兮，与泰初而为邻。"
return cell
}
}
作者：Domo
链接：https://juejin.im/post/5c88e4ece51d4559ea410801
本文由 投稿者 创作，文章地址：https://blog.isoyu.com/archives/ios-skeleton-screenjiazaizhanweitu.html
采用知识共享署名4.0 国际许可协议进行许可。除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。最后编辑时间为:3 月 20, 2019 at 04:43 下午
