Swift 3 append to UIImageView - ios

Question

I have a UIImageView and I want to append there images coming from a remote URL
Up to now it works fine with only one image.
I just set cell.related.image to the new image and I return always 1 to the collectionView
How can I switch to appending an array of images?
Is there a way to do the appending in a function?
Do I need always to do the appending inside collectionView ?
I want to do it inside an event listener in the future
var img_uls = ["url1" , "url2", "url3"]
func append_image(_ path: String, _ cell: RelatedCollectionViewCell) {
let url = URL(string: path)
DispatchQueue.global().async {
let data = try? Data(contentsOf: url!) //make sure your image in this url does exist, otherwise unwrap in a if let check / try-catch
DispatchQueue.main.async {
cell.related.image = UIImage(data: data!)
}
}
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return img_uls.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "RelatedCollectionViewCell", for: indexPath) as! RelatedCollectionViewCell
append_image(img_uls[indexPath.row], cell);
return cell
}

Answer 1

Just have the array of String which contains Url of your image and pass it as in numberOfItems Method like this
var img_uls = ["url1" , "url2", "url3"]
//array of strings containing urls
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return img_uls.count
}
Now you have to iterate your array img_uls, So that you can fetch Url from array and fetch the images and set in collectionView cell. So, do it like this
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "RelatedCollectionViewCell", for: indexPath) as! RelatedCollectionViewCell
append_image(img_uls[indexPath.row], cell);
// indexPath.row starts from (0) and goes to (img_uls.count - 1)
return cell
}
Now you want to append the image into images array
var images = NSMutableData()
func append_image(_ path: String, _ cell: RelatedCollectionViewCell) {
let url = URL(string: path)
DispatchQueue.global().async {
let data = try? Data(contentsOf: url!) //make sure your image in this url does exist, otherwise unwrap in a if let check / try-catch
DispatchQueue.main.async {
images.appendData(data)
cell.related.image = UIImage(data: data!)
}
}
}
Instead of using your own append method, and handling that append and all, you can use Kingfisher or Haenke. They are lightweight and moreover manages caching. And hence your scrolling will be fast.

Answer 2

Create a imageUrlArray variable of String which will hold the remote image URLs, then return the count of the array from your numberOfItemsInSection method. In collectionView:cellForItemAt function get the Url to display from the array using imageArray[indexPath.row] and pass the Url to the append_image(_ path: String, _ cell: RelatedCollectionViewCell) function. Better use third party image loading library like KingFisher or Nuke to better handle Asynchronous image downloading and caching.
class Example1: UIViewController, UICollectionViewDataSource {
var imageArray: [String] = []
override func viewDidLoad() {
super.viewDidLoad()
}
func updateImages(_ images: [String]) {
self.imageArray = images
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return imageArray.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "RelatedCollectionViewCell", for: indexPath) as! RelatedCollectionViewCell
//append_image(imageArray[indexPath.row], cell)
//Using Kingfisher
let url = imageArray[indexPath.row]
cell.imageView.kf.setImage(with: url, placeholder: nil, options: [.transition(.fade(1))])
return cell
}
}