Firebase 存储异步图像下载随机顺序

Question

我正在尝试从 firebase 存储下载图像以显示在我的 collectionview 单元格中，但图像继续以随机顺序出现在单元格中。每个单元格都有一个从 firebase 存储（item1、item2 等）中检索到的标签，该标签每次都很好地显示在正确的单元格中。存储在 firebase 存储中的图像每个都将其存储 url 作为其在 firebase 数据库中各自项目名称的子项。

我成功地检索到每个图像 url，并下载所有图像并正确显示在单元格中，只是每次打开应用程序时它们都会以随机顺序出现，因此图像与项目名称标签。

我意识到我需要异步下载图像，因此每个图像在继续下一个之前完成加载到正确的单元格中，但我在这样做时遇到了麻烦。到目前为止，这是我的代码：

    func downloadImg(completion: @escaping (UIImage?) -> ()) {
    let ref = Database.database().reference().child("somePath")
    ref.observeSingleEvent(of: .value) { (snapshot) in
        for item in snapshot.children {
            let snap = item as! DataSnapshot
            let imageSnap = snap.childSnapshot(forPath: "img/storageUrl")
            if let url = imageSnap.value as? String {
            let someRef = self.storageRef.reference(forURL: url)
                someRef.getData(maxSize: 10 * 10024 * 10024) { data, error in
                    if let error = error {
                        print(error)
                    } else {
                        let image = UIImage(data: data!)
                        DispatchQueue.main.async {
                            completion(image)
                        }
                    }
                }
            }
        }
    }
}

然后我在viewdidload中调用我的函数：

    downloadImg { (completion) in
            self.itemPicArray.append(completion!)
            self.collectionView?.reloadData()
        }

最后我将我的单元格图像视图设置为itemPicArray[indexPath.row]

就像我说的那样，这非常有效，只是图像不断随机显示。非常感谢帮助！

Answer 1

您的问题是每次图像进入时，您都会重新加载整个集合视图。根据图像的大小和网络的状态，图像几乎每次都会以不同的顺序出现。

考虑先下载所有图像，然后重新加载一次集合视图。如果有很多图像，请考虑对结果进行分页。您可以枚举循环并按此原始顺序对数据源数组进行排序。我添加了一个自定义数据对象来帮助解决这个问题。

class CustomObject {

    var image: UIImage?
    let n: Int

    init(image: UIImage?, n: Int) {
        self.image = image
        self.n = n
    }

}

let dispatch = DispatchGroup()

for (n, item) in snapshot.children.enumerated() {

    let object = CustomObject(image: nil, n: n) // init custom object with n (image is still nil)
    dispatch.enter() // enter dispatch

    someRef.getData(maxSize: 10 * 10024 * 10024) { data, error in // download image
        if let error = error {
            print(error)
        } else {
            let image = UIImage(data: data!)
            object.image = image // inject custom object with image
            itemPicArray.append(object) // append to array
        }
        dispatch.leave() // leave dispatch
    }

}

dispatch.notify(queue: .global()) { // dispatch completion

    itemPicArray.sort { $0.n < $1.n } // sort by n (original download order)
    collectionView.reloadData() // reload collection view

}

Answer 2

使用模型可能是个好主意。

struct Image {
    var imageName: String
    var image: UIImage
}

这样，无论顺序如何，商品名称（图片名称）和图片都会配对。

也许现在更好的解决方案是配置方法 downloadImg 使其将 imageName 作为参数。然后就可以调用正确的节点获取对应的storageURL了。

func downloadImg(imageName: String, completion: @escaping (Image?) -> ()) {

    // Use the parameter to create your database reference    
    let ref = Database.database().reference().child(imageName)
    ref.observeSingleEvent(of: .value) { (snapshot) in
        for item in snapshot.children {

            let snap = item as! DataSnapshot
            let imageSnap = snap.childSnapshot(forPath: "img/storageUrl")
            if let url = imageSnap.value as? String {
                let someRef = self.storageRef.reference(forURL: url)
                someRef.getData(maxSize: 10 * 10024 * 10024) { data, error in
                    if let error = error {
                        print(error)
                        return
                    } 

                    if let image = UIImage(data: data) {
                        // Create a variable of type Image (your custom model)
                        let imageWithName = Image(imageName: imageName, image: image)
                        completion(imageWithName)
                    }
                }
            }
        }
    }
}

调用和处理可以这样完成：

// Create a variable to hold your item name/image-pairs
var imagesWithNames = [Image]()

let dispatchGroup = DispatchGroup()

// Iterate over your array of item names
for item in itemArray {

    dispatchGroup.enter()

    downloadImg(item) { (imageWithName) in
        self.imagesWithNames.append(imageWithName)
        dispatchGroup.leave()
    }
}

dispatchGroup.notify(queue: .main) { {
    self.collectionView?.reloadData()
}

要填充collectionView，你可以去：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! YourCustomCell

    // Get the pair at the given index
    let imageWithName = self.imagesWithNames[indexPath.row]

    DispatchQueue.main.async {
        // Set image and item label (example below)
        self.yourImageView.image = imageWithName.image
        self.yourItemLabel.text = imageWithName.imageName
    }

    return cell
}

Answer 3

如果将来有人对此有疑问，请使用 -bsod answer 并创建一个自定义对象。还要创建一个变量 var counter: Int = 0。这是我的代码看起来像 Swift 5.X 的样子，它运行良好。

class CustomObject {

var image: UIImage?
let n: Int

init(image: UIImage?, n: Int) {
    self.image = image
    self.n = n
}

}

func reloadStuff() {
    dispatch.notify(queue: .main) {
        self.imageArrayCells.sort { $0.n < $1.n }
        self.contentViewProfile.collectionView.refreshControl?.endRefreshing()
        self.contentViewProfile.collectionView.reloadData()
    }
}

for i in 0 ..< self.imageArrayInfo.count {

let object = CustomObject(image: nil, n: i)
let urlString = self.imageArrayInfo[i]
print(object.n)

let url = URL(string: urlString)
self.dispatch.enter()
let task = URLSession.shared.dataTask(with: url!) { (data, response, error) in
    self.dispatch.enter()
    guard let data = data, error == nil else {
        return
    }
    guard let image = UIImage(data: data) else {
        return
    }
    object.image = image
    self.imageArrayCells.append(object)
    self.dispatch.leave()
    self.counter += 1
    if self.counter == self.imageArrayInfo.count {
        for i in 0 ..< self.imageArrayInfo.count {
            self.dispatch.leave()
        }
        self.counter = 0
    }
}
task.resume()

}

self.reloadStuff()

这就是我在 collectionView(cellForItemAt:_) 中调用的内容

cell.imageInProfileCollection.image = imageArrayCells[indexPath.row].image