ios - 如何正确使用 UIElements 上的占位符 API

Question

我正在我的 Xcode 项目上实现一个名为“Skeleton View”的 API。有时，当应用程序第一次加载时，加载 UI 元素需要更长的时间，因为数据来自 JSON，如果用户使用 4G 甚至网络状况不佳，则将保留一个空字段。此外，使用此 API，它会在每个未接收数据的 UIElement 上显示一个灰色 View 动画占位符。

但是，我不知道如何检查 UIImage 何时收到值以便能够删除骨架效果并呈现图像。下面我会贴一些图片。

     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCell(withIdentifier: "cellID") as! TableViewCell

            let model = arrCerveja[indexPath.row]

            cell.labelName.text = model.name
            cell.labelDetail.text = "Teor alcoólico: \(model.abv)"
            let resource = ImageResource(downloadURL: URL(string: "\(model.image_url)")!, cacheKey: model.image_url)

            if cell.imageViewCell.image != nil {
                cell.imageViewCell.kf.setImage(with: resource)
                cell.imageViewCell.hideSkeleton()
            }else{
               cell.imageViewCell.showAnimatedGradientSkeleton()

//The placeholder still there even when the images already got downloaded
//What I wanted was, while the UIImageView has no value, the placeholder 
//persists, but when receive the image the placeholder should be dismissed.
            }

            return cell
        }

这就是我在 UIImages 上得到的(它有一个模糊的动画经过):

我面临的问题是如何在每个图像加载后消除这种效果？

Answer 1

您需要在开始下载时启动动画(通常在获取数据的函数之前):

view.startSkeletonAnimation()

此处的 View 属性是您的 View Controller 之一，SkeletonView 是递归的，并将为其中的所有 View 设置动画。

然后在下载完成后(通常在重新加载表格 View 之前关闭，我假设所有图像都已下载并准备好显示)停止动画:

self.view.stopSkeletonAnimation()

骨架 View 还为您提供 UITableView 的委托(delegate):

public protocol SkeletonTableViewDataSource: UITableViewDataSource {
    func numSections(in collectionSkeletonView: UITableView) -> Int
    func collectionSkeletonView(_ skeletonView: UITableView, numberOfRowsInSection section: Int) -> Int
    func collectionSkeletonView(_ skeletonView: UITableView, cellIdenfierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier
}

作为documentation说(阅读有关集合的部分以了解它是如何工作的):

This protocol inherits from UITableViewDataSource, so you can replace this protocol with the skeleton protocol.

您需要在 viewDidLoad() 函数中使 tableView 骨架可用:

tableView.isSkeletonable = true