mvasco
Reputation: 5101
Images in collection view changing during download of data
I have a collection view that shows items from a remote MySQL database.
Each item has an ImageView that shows also an image from a remote URL.
There is a small issue while loading the items, the image shown at each item is changing for a while, may be during the time all data are loading from the internet. Then the image shown is the correct image.
Here you have the code for the View Controller:
Function called to download all data for the collection view:
func downloadJSONDispositivos(completed: @escaping () -> ()) {
let latitud_usuario = self.defaults.float(forKey: "mi_latitud")
let longitud_usuario = self.defaults.float(forKey: "mi_longitud")
let lati = String(format: "%f", latitud_usuario)
let longi = String(format: "%f", longitud_usuario)
print("Latitud en descarga ",lati)
print("Longitud en descarga ",longi)
let url_dispo = URL(string: "../telefonia_todos_IOS.php?id=0&lat="+lati+"&lon="+longi)
URLSession.shared.dataTask(with: url_dispo!) { (data,response,error) in
if error == nil {
do {
self.dispositivosSorted = try JSONDecoder().decode([Dispositivos].self, from: data!)
print("dispositivos bajados ",data as Any)
DispatchQueue.main.async {
completed()
}
}catch{
print("Error disp:",error)
}
}
}.resume()
}
And here you have the collection view methods:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
//You only apply the changes to collectionViewMarcas
if collectionView == self.collectionViewDispositivos {
let padding: CGFloat = 50
let collectionViewSize = collectionView.frame.size.width - padding
return CGSize(width: collectionViewSize/2, height: 242)
}
// Here Below Line You need To return collectionViewMarcas cell size
return CGSize(width: 80, height: 80)
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
if collectionView == collectionViewMarcas {
return marcas.count
}
if filtrados {
return dispositivosFiltrados.count
}
return dispositivosSorted.count
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
if collectionView == self.collectionViewMarcas {
let marca = marcas[indexPath.row].nombre
self.searchBar.text = marca
searchBar.delegate?.searchBar?(searchBar, textDidChange: marca)
print(marca)
}
else {
let disposito_pulsado_id = dispositivosSorted[indexPath.row].id_dispositivo
let foto1 = dispositivosSorted[indexPath.row].foto_dispositivo
let foto2 = dispositivosSorted[indexPath.row].foto2
let foto3 = dispositivosSorted[indexPath.row].foto3
let foto4 = dispositivosSorted[indexPath.row].foto4
let foto5 = dispositivosSorted[indexPath.row].foto5
let nombre_usuario = dispositivosSorted[indexPath.row].nombre_usuario
let foto_usuario = dispositivosSorted[indexPath.row].foto_usuario
let direccion_usuario = dispositivosSorted[indexPath.row].direccion
let facebook_usuario = dispositivosSorted[indexPath.row].facebook
let instagram_usuario = dispositivosSorted[indexPath.row].instagram
let twitter_usuario = dispositivosSorted[indexPath.row].twitter
let estrellas_usuario = dispositivosSorted[indexPath.row].num_estrellas
let usuario_dispositivo = dispositivosSorted[indexPath.row].usuario_dispositivo
let logo_marca = dispositivosSorted[indexPath.row].logo_marca
let modelo = dispositivosSorted[indexPath.row].modelo_del_dispositivo
let precio = dispositivosSorted[indexPath.row].precio_dispositivo
let capacidad = dispositivosSorted[indexPath.row].capacidad
let ram = dispositivosSorted[indexPath.row].ram
let color = dispositivosSorted[indexPath.row].color
let garantia = dispositivosSorted[indexPath.row].garantia
let estado = dispositivosSorted[indexPath.row].estado
let comentarios = dispositivosSorted[indexPath.row].comentarios
let modelo_id = dispositivosSorted[indexPath.row].modelo_dispositivo
let nombre_marca = dispositivosSorted[indexPath.row].nombre_marca
let localizacion = dispositivosSorted[indexPath.row].localizacion
print("localizacion en telefonia ",localizacion)
print("MODELO ID ",modelo_id)
self.defaults.set(foto1, forKey: "foto1")
self.defaults.set(foto2, forKey: "foto2")
self.defaults.set(foto3, forKey: "foto3")
self.defaults.set(foto4, forKey: "foto4")
self.defaults.set(foto5, forKey: "foto5")
self.defaults.set(nombre_usuario, forKey: "detalle_nombre_usuario")
self.defaults.set(foto_usuario, forKey: "detalle_foto_usuario")
self.defaults.set(direccion_usuario, forKey: "detalle_direccion_usuario")
self.defaults.set(facebook_usuario, forKey: "detalle_facebook_usuario")
self.defaults.set(instagram_usuario, forKey: "detalle_instagram_usuario")
self.defaults.set(twitter_usuario, forKey: "detalle_twitter_usuario")
self.defaults.set(estrellas_usuario, forKey: "detalle_estrellas_usuario")
self.defaults.set(usuario_dispositivo, forKey: "detalle_usuario_dispositivo")
self.defaults.set(logo_marca, forKey: "detalle_logo_marca_dispositivo")
self.defaults.set(modelo, forKey: "detalle_modelo_dispositivo")
self.defaults.set(precio, forKey: "detalle_precio_dispositivo")
self.defaults.set(color, forKey: "detalle_color_dispositivo")
self.defaults.set(capacidad, forKey: "detalle_capacidad_dispositivo")
self.defaults.set(ram, forKey: "detalle_ram_dispositivo")
self.defaults.set(garantia, forKey: "detalle_garantia_dispositivo")
self.defaults.set(estado, forKey: "detalle_estado_dispositivo")
self.defaults.set(comentarios, forKey: "detalle_comentarios_dispositivo")
self.defaults.set(modelo_id, forKey: "detalle_modelo_id_dispositivo")
self.defaults.set(nombre_marca, forKey: "detalle_nombre_marca_dispositivo")
self.defaults.set(localizacion, forKey: "detalle_localizacion_dispositivo")
let disposito_pulsado_nombre = dispositivosSorted[indexPath.row].nombre
print(disposito_pulsado_id)
self.defaults.set(disposito_pulsado_id, forKey: "dispositivo_pulsado_id")
print(disposito_pulsado_nombre)
let logeado_actual = self.defaults.string(forKey: "logeado")
if (logeado_actual == nil ){
performSegue(withIdentifier: "tel_alarma_sin_sesion", sender: nil)
}
else {
performSegue(withIdentifier: "tel_a_detalle", sender: nil)
}
}
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if collectionView == self.collectionViewMarcas {
let cellMarcas = collectionView.dequeueReusableCell(withReuseIdentifier: "marca", for: indexPath) as! MarcasCollectionViewCell
let foto_marca = marcas[indexPath.row].icono
let url = URL(string: "https://../iconos/"+foto_marca)
UIImage.loadFrom(url: url!) { image in
cellMarcas.icono_marca.image = image
}
return cellMarcas
}
else {
let cellDisp = collectionView.dequeueReusableCell(withReuseIdentifier: "dispositivo", for: indexPath) as! DispositivosCollectionViewCell
if filtrados {
print("esty en filtrados")
let foto_dispos = dispositivosFiltrados[indexPath.row].foto_dispositivo
let modelo = dispositivosFiltrados[indexPath.row].modelo_del_dispositivo
let marca_t = dispositivosFiltrados[indexPath.row].nombre
cellDisp.modelo_disp.text = marca_t+" "+modelo
let precio = dispositivosFiltrados[indexPath.row].precio_dispositivo + " €"
cellDisp.precio_disp.text = precio
let marca = dispositivosFiltrados[indexPath.row].logo_marca
let urlmarca = URL(string: "https://../iconos/"+marca)
UIImage.loadFrom(url: urlmarca!) { image in
cellDisp.marca_logo.image = image
}
let urlfoto = URL(string: "https://../dispositivos/"+foto_dispos)
UIImage.loadFrom(url: urlfoto!) { image in
cellDisp.foto_disp.image = image
}
}
else{
let foto_dispos = dispositivosSorted[indexPath.row].foto_dispositivo
let modelo = dispositivosSorted[indexPath.row].modelo_del_dispositivo
cellDisp.modelo_disp.text = modelo
let precio = dispositivosSorted[indexPath.row].precio_dispositivo + " €"
cellDisp.precio_disp.text = precio
let marca = dispositivosSorted[indexPath.row].logo_marca
let urlmarca = URL(string: "https://../iconos/"+marca)
UIImage.loadFrom(url: urlmarca!) { image in
cellDisp.marca_logo.image = image
}
let urlfoto = URL(string: "https://../dispositivos/"+foto_dispos)
UIImage.loadFrom(url: urlfoto!) { image in
cellDisp.foto_disp.image = image
}
}
cellDisp.foto_disp.layer.cornerRadius = 8
return cellDisp
}
}
What should I change to get a smoother loading from the images?
Upvotes: 0
Views: 35
Answers (2)
Yoel Jimenez del valle
Reputation: 1278
you must implement this delegate method in you tableview
func tableView(_ tableView: UITableView, didEndDisplaying cell: UITableViewCell, forRowAt indexPath: IndexPath) {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as! MarcasCollectionViewCell
cell.icono_marca.image = nil
}
this is the delegate in charge of reset cell once is been used and go off the screen.
Upvotes: 0
Sahil Manchanda
Reputation: 10012
This might be happening due to reuse of collection view cell. Try to add the following code in your cell classes
class MarcasCollectionViewCell: UICollectionViewCell{
override func prepareForReuse() {
icono_marca.image = nil
super.prepareForReuse()
}
}
same for other
class DispositivosCollectionViewCell: UICollectionViewCell{
override func prepareForReuse() {
foto_disp.image = nil
super.prepareForReuse()
}
}
try and let me know if that solves your problem :)
Upvotes: 1
Related Questions
- Swift - Firebase - Downloading images and data asynchronously leads to wrong display within the collection view cell
- loading images into UICollectionView and caching issue
- Image in Collection view cell is not updated when the image is downloaded asynchronously
- Swift: download image from Internet and cache them doesn't work properly. need suggestions
- CollectionView Cell images are changing
- collectionview only downloading one image in cellForItemAtIndexPath
- Swift 3: Caching images in a collectionView
- Images are changing in collectionView when i scroll it swift
- Download image from URL in loop for collection view
- UIImageView within CollectionView does not update UI after image download