iOS开发Skeleton骨架视图使用

iOS

字数统计: 444阅读时长: 2 min

 2021/07/22   Share

SkeletonView骨架使用

github地址入口:

https://github.com/Juanpe/SkeletonView

官方的介绍就不重复了, 只介绍如果在项目中方便的应用

**有两个方案 **

某个界面可能某个控件, 或者某块区域的控件需要骨架图
整个页面都需要骨架图

方案二

当我们写一个复杂如果需要骨架图的时候, 这个时候考虑使用一个新的tableView,覆盖到真实页面中去.

//
//  HomePageSkeletonTableView.swift
//  REIHome
//
//  Created by dayu on 2021/7/22.
//
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
				// 这里注册你要显示的cell样式, 可以只写一个然后布局骨架图
        self.register(customCell.self)
    }
    
    public required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

// MARK: - SkeletonTableViewDataSource
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)

skeketonTableView.topAnchor.constraint(equalTo: view.topAnchor),
            skeketonTableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            skeketonTableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            skeketonTableView.bottomAnchor.constraint(equalTo: view.bottomAnchor)

public override func viewDidLayoutSubviews() {
       super.viewDidLayoutSubviews()
       skeketonTableView.layoutSkeletonIfNeeded()
   }


if self.skeketonTableView.isSkeletonable {
self.skeketonTableView.isSkeletonable = false
self.skeketonTableView.hideSkeleton()
self.skeketonTableView.removeFromSuperview()
}