I am loading a tableview of images that are being fetched from a public CloudKit database as CKAssets. However, the images are loading out of order about two seconds until the correct image is loaded into the UIImageView of a custom UITableview cell. I know that the issue is that since the cell is reusable the image is still downloaded from CloudKit and displayed in any visible cell while a user is scrolling through the TableView before the correct image is shown in the image view. I am wondering if there is a fix to this in swift so that the image downloaded is only for that of a visible cell and not any previous cells.
Here is the code for cellForRowAtIndexPath:
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! PostsTableViewCell
cell.userInteractionEnabled = false
photoRecord = sharedRecords.fetchedRecords[indexPath.row]
cell.photoTitle.text = photoRecord.objectForKey("photoTitle") as? String
cell.photoImage.backgroundColor = UIColor.blackColor()
cell.photoImage.image = UIImage(named: "stock_image.png")
if let imageFileURL = imageCache.objectForKey(self.photoRecord.recordID) as? NSURL {
cell.photoImage.image = UIImage(data: NSData(contentsOfURL: imageFileURL)!)
cell.userInteractionEnabled = true
print("Image Cached: \(indexPath.row)")
} else {
let container = CKContainer.defaultContainer()
let publicDatabase = container.publicCloudDatabase
let fetchRecordsImageOperation = CKFetchRecordsOperation(recordIDs:[self.photoRecord.recordID])
fetchRecordsImageOperation.desiredKeys = ["photoImage"]
fetchRecordsImageOperation.queuePriority = .VeryHigh
fetchRecordsImageOperation.perRecordCompletionBlock = {(record:CKRecord?, recordID:CKRecordID?, error:NSError?) -> Void in
if let imageRecord = record {
NSOperationQueue.mainQueue().addOperationWithBlock() {
if let imageAsset = imageRecord.objectForKey("photoImage") as? CKAsset{
cell.photoImage.image = UIImage(data: NSData(contentsOfURL: imageAsset.fileURL)!)
self.imageCache.setObject(imageAsset.fileURL, forKey:self.photoRecord.recordID)
cell.userInteractionEnabled = true
}
}
}
}
publicDatabase.addOperation(fetchRecordsImageOperation)
}
return cell
}
Thanks in advance!
There is latency between when your table view appears and when fetchRecordsImageOperation.perRecordCompletionBlock is called. Within that time the user may scroll the table view causing the table view cell to dequeue and requeue with a different indexPath and different data associated with it, if you do not check that the cell's index path is the same as when you constructed fetchRecordsImageOperation.perRecordCompletionBlock, this line: cell.photoImage.image = UIImage(data: NSData(contentsOfURL: imageAsset.fileURL)!) will cause the image to be placed in the cell that is already displaying different data. You can modify your completion block like so to avoid this.
if let imageRecord = record {
NSOperationQueue.mainQueue().addOperationWithBlock() {
if let imageAsset = imageRecord.objectForKey("photoImage") as? CKAsset{
if indexPath == tableView.indexPathForCell(cell){
cell.photoImage.image = UIImage(data: NSData(contentsOfURL: imageAsset.fileURL)!)
}
self.imageCache.setObject(imageAsset.fileURL, forKey:self.photoRecord.recordID)
cell.userInteractionEnabled = true
}
}
}
You find the answer in here I believe, I bias of course cause I wrote it.
How to determine when all images have been downloaded from a set in Swift?
You should setup an image to display while its loading an image and show that so that the user understands what is happening?
Related
I have a picture and some labels inside my cells. If I have more cells than what can fit on the page, scrolling down then back up loads a different image momentarily then loads the original photo. I have read around StackOverflow to see what would work in my case, but so far I can't find anything since my UITableView is inside a ViewController.
Here is how I load my content into my cell:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! PostTableViewCell
// Configure the cell...
let post = self.posts[indexPath.row] as! [String: AnyObject]
cell.titleLabel.text = post["title"] as? String
cell.priceLabel.text = post["price"] as? String
if let imageName = post["image"] as? String {
let imageRef = FIRStorage.storage().reference().child("images/\(imageName)")
imageRef.data(withMaxSize: 25 * 1024 * 1024, completion: { (data, error) -> Void in if error == nil {
let image = UIImage(data: data!)
UIView.animate(withDuration: 0.4, animations: {
cell.titleLabel.alpha = 1
cell.postImageView.alpha = 1
cell.priceLabel.alpha = 1
cell.postImageView.image = image
})
} else {
print("Error occured during image download: \(error?.localizedDescription)")
}
})
}
return cell
}
Is there any way I could change tableView.dequeueReusableCell to something different so this doesn't happen?
In your table view cell PostTableViewCell you need to implement the method
override func prepareForReuse() {
super.prepareForReuse()
self.postImageView.image = nil
// Set cell to initial state here, reset or set values
}
The cells are holding on to their old content
I think you run into problems because you update the cell inside the completion block. If the cell scrolls out of view before the completion block is run, it'll be reused for a different row, but you're still setting the image for the previous row.
Try this:
imageRef.data(withMaxSize: 25 * 1024 * 1024, completion: { (data, error) -> Void in if error == nil {
if let cell = self.tableView.cellForRow(at: indexPath) as? PostTableViewCell {
let image = UIImage(data: data!)
UIView.animate(withDuration: 0.4, animations: {
cell.titleLabel.alpha = 1
cell.postImageView.alpha = 1
cell.priceLabel.alpha = 1
cell.postImageView.image = image
}
})
Instead of relying on the cell still being visible, this will try to get it from the table view based on indexPath. If it's not visible any more, cellForRow(at:) will return nil.
For now i download the image, story it in a mutable dictionary and then verify if the image was already downloaded and if not, download it and store it. As a key i use the indexPath.
This code kinda works, but from the tests i did if i scroll too fast the cell image will load the wrong one and after a split of a second it will load the right one (replacing the wrong image).
Im always clearing my thumbnail (imageView) after i call the method so i don't know why im getting this bug.
I though that maybe the if(self.imageCache.object(forKey: cacheKey) != nil) statement was true and thats why i would get multiple images, but the breakpoint didn't stop at once when i was scrolling down.
Any ideas?
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
{
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! MovieCellController
cell.thumbnail.image = UIImage()
let cacheKey = indexPath.row
if(self.imageCache.object(forKey: cacheKey) != nil)
{
cell.thumbnail.image = self.imageCache.object(forKey: cacheKey) as? UIImage
}
else
{
DispatchQueue.global(qos: DispatchQoS.QoSClass.default).async {
if let url = NSURL(string: self.moviesCollection[indexPath.row].imageLink) {
if let data = NSData(contentsOf: url as URL) {
let image: UIImage = UIImage(data: data as Data)!
self.imageCache.setObject(image, forKey: cacheKey as NSCopying)
DispatchQueue.main.async(execute: {
cell.thumbnail.image = image
})
}
}
}
}
cell.name.text = moviesCollection[indexPath.row].name
return cell
}
It is happening because the cells are reused due to which when scrolling fast the image of another cell seems to be assigned, but if fact it is the previous cell's image which is reused.
In cell's prepareForReuse method set your imageView's image to nil. Like, imageView.image = nil
Because the cell is reused.
The reused-cell keeps its old data.
The new image downloading will cost few seconds so that the reused -cell cannot change the image immediately.
You can use a placeholder-image when downloading the new image.
Or you can use the 3rd part library - SDWebImage.
I'm trying to show images from XML enclosure to tableViewCell image. Images are show but not in sequence, due to dequeueReusableCellWithIdentifier because when i scroll tableViewCell up and down it change images and not show in sequence according to array index. I've tried different ways but did't get success'
Can anyone please tell me how can show images in sequence, or is there any way that first download all images and then show in cell image??
Or any other quick or easy method instead using dispatch_async.
Thanks
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell : ImageCell2 = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! ImageCell2
cell.titleLabel.text = posts.objectAtIndex(indexPath.row).valueForKey("title") as! NSString as String
downloadFileFromURL(NSURL(string: self.posts.objectAtIndex(indexPath.row).valueForKey("enclosure") as! String)!, completionHandler:{(img) in
dispatch_async(dispatch_get_main_queue(), { () -> Void in
cell.sideImageView.image = img
})
})
return cell
}
UPDATE
Now i tried this
let picURL = self.posts.objectAtIndex(indexPath.row).valueForKey("enclosure") as! String
let url = NSURL(string: picURL)
let data = NSData(contentsOfURL: url!)
cell.sideImageView?.image = UIImage(data: data!)
It show images in sequence but make scrolling hard?
Update2
Now i've tried this
var check = true
var imageArrayNsData : [NSData] = []
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell : ImageCell2 = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! ImageCell2
cell.titleLabel.text = posts.objectAtIndex(indexPath.row).valueForKey("title") as! NSString as String
if check == true{
var indeX = 0
for i in posts.valueForKey("enclosure") as! [NSString]{
let picURL = self.posts.objectAtIndex(indeX).valueForKey("enclosure") as! String
let url = NSURL(string: picURL)
let data = NSData(contentsOfURL: url!)
print("download")
imageArrayNsData.append(data!)
indeX++
print(indeX)
}
check = false
}
if check == false{
cell.sideImageView.image = UIImage(data: imageArrayNsData[indexPath.row])
}
return cell
}
This method only download images one time. And after downloading images it appends in array and next time it show images from array without downloading again. But this method is little bit hard for scrolling. Any one have idea why?
The problem is that the cell object may have been already reused by the time you set the image. You need to add a check to make sure the cell still represents the content you want. That could be as simple as:
if tableView.indexPathForCell(cell) == indexPath {
cell.sideImageView.image = img
}
But might need to be more complex if the index path for a specific item might change in that time (for example, if the user can insert/delete rows).
You could also use a library like AlamofireImage which handles this work (in a different way) for you. With AlamofireImage, your code would look like:
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell : ImageCell2 = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! ImageCell2
cell.titleLabel.text = posts.objectAtIndex(indexPath.row).valueForKey("title") as! NSString as String
let URL = NSURL(string: self.posts.objectAtIndex(indexPath.row).valueForKey("enclosure") as! String)!
cell.sideImageView.af_setImageWithURL(URL)
return cell
}
To download asynchronously images and set to UIImageView of your UITableViewCell, you can add an extension to your UIImageView.
extension UIImageView {
func downloadImageFrom(link link:String, contentMode: UIViewContentMode) {
//in my methods, I have a cache to avoid re-downloading my images. Images in cache are identified by its URL
if let _imageData = ImageCache.shareCache.getImageData(link) {
self.image = UIImage(data: _imageData)
return
}
//else, download image
NSURLSession.sharedSession().dataTaskWithURL( NSURL(string:link)!, completionHandler: {
(data, response, error) -> Void in
dispatch_async(dispatch_get_main_queue()) {
self.contentMode = contentMode
if let data = data {
ImageCache.shareCache.cacheImageData(data, imageId: link)
self.image = UIImage(data: data)
}
}
}).resume()
}
}
then, from your call-back cellforrow,
let cell : ImageCell2 = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! ImageCell2
cell.titleLabel.text = posts.objectAtIndex(indexPath.row).valueForKey("title") as! NSString as String
cell.imageView.downloadImageFrom(yourImageUrl)
return cell
Good day! I have 2 problems and I hope you will help me.
1) I have news feed in my application, that contains images.
I am using Autolayout for dynamic cells:
and I want the image to keep its ratio and to completely fill the width of the cell (with margins = 12).
I set constrains, cell is autoresizable, but image didn't save its ratio:
.
What I am doing wrong?
2) The second problem, i load images asynchronously, here is my code:
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var cell: EventCell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as EventCell
var rowData: NSDictionary = tableData[indexPath.row] as NSDictionary
cell.titleButton.setTitle(rowData["title"] as? String, forState: UIControlState.Normal)
cell.titleButton.addTarget(self, action: "openWebSite:", forControlEvents: UIControlEvents.TouchUpInside)
cell.titleButton.tag = indexPath.row
cell.descriprionLabel.text = rowData["description"] as? String
var urlString = rowData["image"] as String
var image = imageCache[urlString]
if( image == nil ) {
var imgURL = NSURL(string: urlString)
// Download an NSData representation of the image at the URL
var request: NSURLRequest = NSURLRequest(URL: imgURL!)
NSURLConnection.sendAsynchronousRequest(request, queue: NSOperationQueue.mainQueue(), completionHandler: {(response: NSURLResponse!,data: NSData!,error: NSError!) -> Void in
if error == nil {
image = UIImage(data: data) // data -> image
// Store the image in to our cache
self.imageCache[urlString] = image // save in our dictionary
if let cellToUpdate : EventCell = tableView.cellForRowAtIndexPath(indexPath) as? EventCell {
self.table.reloadRowsAtIndexPaths([indexPath], withRowAnimation: UITableViewRowAnimation.Automatic)
}
}
else {
println("Error: \(error.localizedDescription)")
}
})
} else {
dispatch_async(dispatch_get_main_queue(), {
if let cellToUpdate : EventCell = tableView.cellForRowAtIndexPath(indexPath) as? EventCell {
cellToUpdate.img.image = image
}
})
}
cell.selectionStyle = UITableViewCellSelectionStyle.None;
cell.contentView.setNeedsLayout(); // autolayout bug solution
cell.contentView.layoutIfNeeded(); // autolayout bug solution
return cell
}
All seems okay, but UITableViewCell don't resize when image is loaded and I am trying to reload cell at index path.
Interesting moment, that it will work if I scroll down and then come back to cell.
I have similar error before and I fixed it reading this article UITableView layout messing up on push segue and return. (iOS 8, Xcode beta 5, Swift) , third answer. But it didn't help me now. Looks like I need to call some method to recalculate UITableViewCell, but I don't understand what.
First question : Change UIImageView view mode from Scale to Fill to Aspect Fit (in storyboad)
Second question : Remove dispatch async if image is not nil and make you code look similar like this:
if( image == nil ) {
...
}
else {
cell.img.image = image
}
For first one in the storyboard select the image view and click on the pin icon for setting auto layout constraint and check width and height.
it will remain the width and height constant.
My problem is when I scroll down my UITableView, it looks too laggy. The images grab from facebook.
My code
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("UserCell", forIndexPath: indexPath) as UITableViewCell
let user = users[indexPath.row] as User //2
if let nameLabel = cell.viewWithTag(100) as? UILabel { //3
nameLabel.text = user.name
}
if let dateCreatedLabel = cell.viewWithTag(101) as? UILabel {
dateCreatedLabel.text = user.distance
}
if let profilePictureView = cell.viewWithTag(103) as? UIImageView {
if let url = NSURL(string: "https://graph.facebook.com/\(user.profilePhoto)/picture?type=large") {
if let data = NSData(contentsOfURL: url){
profilePictureView.contentMode = UIViewContentMode.ScaleAspectFit
profilePictureView.image = UIImage(data: data)
}
}
}
return cell
}
Please advice how to make it smooth.
OMG, never do like this not only in scrolling controls, but in general UI also:
data = NSData(contentsOfURL: url)
Thats why you table lags, and you lucky enougth with fast internet. If you connection will be slow, you app will hang, may be forever. ALWAYS do network asyncronously!
Also, when you make you network async, your tableView will still lag here:
UIImage(data: data)
And even here if you have many controls in your cell:
cell.viewWithTag(101)
So, use some library to download images, this is surprisingly not so easy task as it seems to be, you will not do it right yourself according to you experience (as I can see it).
Make separate class for you cell and use IB to connect outlets.
Try AFNetworking, it has category for UIImageView to download images.
I already found the answer. Use Haneke instead NSData.
import Haneke
/* .. */
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("UserCell", forIndexPath: indexPath) as UITableViewCell
let user = users[indexPath.row] as User //2
if let nameLabel = cell.viewWithTag(100) as? UILabel { //3
nameLabel.text = user.name
}
if let dateCreatedLabel = cell.viewWithTag(101) as? UILabel {
dateCreatedLabel.text = user.distance
}
if let profilePictureView = cell.viewWithTag(103) as? UIImageView {
if let url = NSURL(string: "https://graph.facebook.com/\(user.profilePhoto)/picture?type=large") {
profilePictureView.contentMode = UIViewContentMode.ScaleAspectFit
profilePictureView.hnk_setImageFromURL(url!)
}
}
return cell
}