歡迎光臨
每天分享高質量文章

iOS Skeleton Screen加載占位圖

作者: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: UIViewControllerUITableViewDelegateUITableViewDataSource, 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
    }

}

已同步到看一看
赞(0)

分享創造快樂