知識星球作者：Domo
連結：https://juejin.im/post/5c88e4ece51d4559ea410801
前言：
APP從載入請求到資料顯示在介面上，需要網路相應的時間，大部分處理時新增菊花轉圈等待打發這段時間，但是似乎有一種更加好的方式，就是Skeleton Screen Loading。
什麼是 Skeleton Screen Loading：
所謂Skeleton Screen Loading即表示在頁面完全渲染完成之前，使用者會看到一個樣式簡單，描繪了當前頁面的大致框架，感知到頁面正在逐步載入，載入完成後，這個樣式框架被真實的資料替換掉。 Skeleton Screen非常適用於版本基本決定的串列展示頁等，大部分Skeleton Screen 是透過h5或者vue來實現的。
本文主要介紹iOS環境下如何實現這種效果，已經有大神寫了一個開源的庫SkeletonView，在這裡感謝，看看是怎麼使用的。
廢話不多說，看程式碼和實現效果就行了 Demo地址為https://github.com/daomoer/SkeletonDemo
import UIKit
import SkeletonView
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, SkeletonTableViewDelegate, SkeletonTableViewDataSource{
let identifier = "CustomCell"
var essay-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.essay-headerView = HeaderVeiw.init(frame: CGRect(x:0, y:0, width:UIScreen.main.bounds.width, height:220))
tableView.tableHeaderView = self.essay-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.essay-headerView?.hideSkeleton()
}
}
//頁面顯示骨架屏，有四中顯示樣式和動畫
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
self.view.showAnimatedSkeleton()
self.essay-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
essay-headerView?.setValueForHeader()
cell.iconImage.image = UIImage(named:"經典")
cell.titleLabel.text = "大大大標題"
cell.subLabel.text = "下崢嶸而無地兮，上寥廓而無天。視倏忽而無見兮，聽惝恍而無聞。超無為以至清兮，與泰初而為鄰。"
return cell
}
}
朋友會在“發現-看一看”看到你“在看”的內容