如何在UIElements上正确使用占位符API

时间:2018-07-19 00:56:45

标签: ios swift xcode placeholder

我正在Xcode项目上实现一个名为 Skeleton View 的API。有时,当应用程序首次加载时,加载UI元素会花费一些时间,因为数据来自JSON,并且如果用户使用的是4G甚至是互联网状况不佳,也将保持空白。此外,使用此API,它在每个未接收到数据的UIElement上都显示为灰色视图动画占位符。

但是,我不知道如何检查UIImage何时收到一个值,以能够删除Skeleton效果并显示Image。我将在下面发布一些图片。

     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上得到的(它经过了模糊动画):

enter image description here

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

1 个答案:

答案 0 :(得分:0)

使用以下命令开始下载时(通常在获取数据的函数之前),您将需要启动动画。

view.startSkeletonAnimation()

这里的view属性是您的视图控制器之一,SkeletonView是递归的,并将为其内的所有视图设置动画。

然后在下载完成后(通常是在关闭后重新加载表格视图,并且我假定所有图像都已下载并准备显示)后,停止动画:

self.view.stopSkeletonAnimation()

骨架视图还为您提供UITableView的委托:

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所说(阅读有关集合的部分以了解其工作原理):

  

此协议继承自UITableViewDataSource,因此您可以使用框架协议替换此协议。

您将需要在viewDidLoad()函数中使tableView骨架化:

tableView.isSkeletonable = true