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
    }

}
复制代码

转载于:https://juejin.im/post/5c88e4ece51d4559ea410801