I'm building an app based around pictures. So it's very important for me to retrieve all images asyncronously like Instagram does. I understand that this function...
var query = PFQuery(className: "Post")
query.findObjectsInBackgroundWithBlock { (objects, error) -> Void in
if let objects = objects as! [PFObjects] {
for object in objects {
objectsArray.append(object)
}
}
}
...is asynchronous. But I want a way to load images from Parse into a table asynchronously so it loads images while scrolling.
You should take a look at PFImageView's function loadInBackground().
For example, if you are using a PFTableViewController with a PFTableViewCell, you can do the following
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath, object: PFObject?) -> PFTableViewCell {
var cell = tableView.dequeueReusableCellWithIdentifier("CustomCell") as! CustomTableViewCell!
if cell == nil {
cell = CustomTableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "CustomCell")
}
if let name = object?["name"] as? String {
cell.nameLbl.text = name
}
var initialThumbnail = UIImage(named: "placeholder")
cell.imgView.image = initialThumbnail
if let thumbnail = object?["photo"] as? PFFile {
cell.imgView.file = thumbnail
cell.imgView.loadInBackground()
}
return cell
}
with PFTableViewCell having
class CustomCell: PFTableViewCell {
#IBOutlet weak var nameLbl: UILabel!
#IBOutlet weak var imgView: PFImageView!
}
Also from another SO reply, you can try this:
let userImageFile = userPhoto["imageFile"] as PFFile
userImageFile.getDataInBackgroundWithBlock {
(imageData: NSData!, error: NSError!) -> Void in
if !error {
let image = UIImage(data:imageData)
}
}
Related
If someone have good idea to implement this let me know
thanks in adance
class ViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {
#IBOutlet weak var tableView: UITableView!
#IBOutlet weak var tableViewCell: UITableViewCell!
#IBOutlet weak var imageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "trendingCell", for: indexPath)
print(self.array[indexPath.row])
cell.textLabel?.text = (self.array[indexPath.row]["title"] as! String)
cell.detailTextLabel?.text = (self.array[indexPath.row]["username"] as! String)
Alamofire.request(imageUrl!, method: .get).response { response in
guard let image = UIImage(data:response.data!) else {
// Handle error
return
}
let imageData = UIImageJPEGRepresentation(image,1.0)
cell.myImage.image = UIImage(data : imageData!)
}
return cell
}
}
You are force unwrapping some values. Try to safely unwrap the values instead. You still have to figure out why the values are nil though.
dispatch_async(dispatch_get_global_queue( DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), {
if let url = NSURL(string: self.restaurants[indexPath.row].restaurantImage), let data = NSData(contentsOfURL: url), let image = UIImage(data: data) {
dispatch_async(dispatch_get_main_queue()) { () -> Void in
cell.restaurantImage.image = image
}
}
})
This will help you figure out where the exact issue is
dispatch_async(dispatch_get_global_queue( DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), {
guard indexPath.row < self.restaurants.count
else
{
print("Indexpath greater than restaurants count")
return
}
guard let imageUrl = NSURL(string:self.restaurants[indexPath.row].restaurantImage)
else
{
print("Image url is empty")
return
}
guard let imageData = NSData(contentsOfURL: imageUrl)
else
{
print("Cannot retreive data at url")
return
}
guard let image = UIImage(data: imageData)
else
{
print("Data doesnt contain image")
return
}
dispatch_async(dispatch_get_main_queue()) { () -> Void in
cell.restaurantImage.image = image
}
})
Pictures in my tableView are shifting around and are not being displayed on the correct posts after reloading the tableView. I cannot figure how to fix this.
https://i.stack.imgur.com/4hUbYm.jpg
The image above would be the normal image, however sometimes I get:
https://i.stack.imgur.com/PVEVrm.png
I've also did the prepareForReuse() function in the custom cell class but still doesn't work.
Here is the source code:
class UserPostsController: UIViewController, UITableViewDataSource, UITableViewDelegate {
#IBOutlet weak var userPostsTable: UITableView!
var images : [UIImage] = []
var descriptions : [String] = []
var likes : [String] = []
var dislikes : [String] = []
override func viewDidLoad() {
super.viewDidLoad()
self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedStringKey.font: UIFont(name: "Pacifico", size: 30)!]
userPostsTable.dataSource = self
userPostsTable.delegate = self
let postQuery = PFQuery(className: "Post")
postQuery.whereKey("userid", equalTo: PFUser.current()?.objectId as Any)
postQuery.findObjectsInBackground { (objects, error) in
if let posts = objects {
for post in posts {
if let descripiton = post["description"] {
self.descriptions.append(descripiton as! String)
}
if let l = post["likes"] {
self.likes.append(l as! String)
}
if let d = post["dislikes"] {
self.dislikes.append(d as! String)
}
if let imageFile = post["imageFile"] as? PFFile {
imageFile.getDataInBackground(block: { (data, error) in
if let imageData = data {
if let image = UIImage(data: imageData) {
self.images.append(image)
}
}
self.userPostsTable.reloadData()
})
}
}
}
}
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return images.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if let cell = userPostsTable.dequeueReusableCell(withIdentifier: "userPostCell", for: indexPath) as? UserPostsTableViewCell {
cell.descriptionLabel.text = descriptions[indexPath.row]
cell.numerLikes.text = "\(likes[indexPath.row]) likes"
cell.numberDislikes.text = "\(dislikes[indexPath.row]) dislikes"
cell.postImage.image = images[indexPath.row]
cell.selectionStyle = .none
return cell
}
return UITableViewCell()
}
I think you problem is here:
if let imageFile = post["imageFile"] as? PFFile {
imageFile.getDataInBackground(block: { (data, error) in
if let imageData = data {
if let image = UIImage(data: imageData) {
self.images.append(image)
}
}
self.userPostsTable.reloadData()
})
You are starting background tasks to get images data.
Any of these tasks could finish first, please debug your array and you might find that the images are not in the desired order.
Here is an apple sample project that might help you properly load those images in background.
https://developer.apple.com/library/archive/samplecode/LazyTableImages/Introduction/Intro.html
I have a tableview that populates its cells with data from firebase. Each cell posses an image and each image is loaded asynchronously and cached. The problem is that random cells will use the wrong image, although the other data in the cell is correct. If I scroll so that the cell goes off view, the correct image then loads.
Research:
Images in UITableViewCells are loading wrong (Dont really understand Obj C)
What is the correct way to use prepareForReuse?
Image Cache:
import Foundation
import UIKit
let imageCache = NSCache<NSString, AnyObject>()
extension UIImageView {
func loadImageUsingCache(urlString: String) {
self.image = #imageLiteral(resourceName: "logo3")
if let cachedImage = imageCache.object(forKey: urlString as NSString) as? UIImage {
self.image = cachedImage
return
}
let url = URL(string: urlString)
URLSession.shared.dataTask(with: url!, completionHandler: {(data, response, error) in
if error != nil {
print(error!)
return
}
DispatchQueue.main.async(execute: {
if let downloadedImage = UIImage(data: data!) {
imageCache.setObject(downloadedImage, forKey: urlString as NSString)
self.image = downloadedImage
}
})
}).resume()
}
}
Tableview Cell
import Foundation
import Firebase
class GroupCell: UITableViewCell {
var group: Groups!
var members = [String]()
#IBOutlet weak var groupImage: UIImageView!
#IBOutlet weak var groupName: UILabel!
#IBOutlet weak var groupRep: UILabel!
#IBOutlet weak var memberCount: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
}
func configureCell(group: Groups) {
self.group = group
self.groupName.text = group.name
self.groupRep.text = "\(group.groupScore)"
if let groupImage = group.groupImage {
self.groupImage.loadImageUsingCache(urlString: groupImage)
} else {
self.groupImage.image = //random image
}
for member in group.members {
self.members.append(member.key)
}
self.memberCount.text = "\(members.count)"
}
}
TableView
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if let cell = tableView.dequeueReusableCell(withIdentifier: "groupCell") as? GroupCell {
let group = FriendSystem.system.activeGroups[indexPath.row]
cell.configureCell(group: group)
return cell
}
return UITableViewCell()
}
Sounds like you need to add the prepareForReuse method to your GroupCell class.
In that method add self.groupImage.image = nil It will reset your image view to empty until the correct image is set.
Here is function where I try to fetch images from parse for users that are in the namesArray.
func fetchData(){
let imagePredicate = NSPredicate(format: "username IN %#", namesArray)
let imageQuery = PFQuery(className: "_User", predicate: imagePredicate)
imageQuery.findObjectsInBackgroundWithBlock { (objects: [PFObject]?, error: NSError?) -> Void in
if error == nil {
for object in objects! {
self.imagesArray.append(object["image"] as! PFFile)
if self.imagesArray.count == self.namesArray.count {
self.tableView.reloadData()
}
} else {
print("error: \(error?.localizedDescription)")
}
}
}
Here is my tableView:cellForRowAtIndexPath method:
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("Cell") as! ChatsCell
cell.nameLabel.text = namesArray[indexPath.row]
if imagesArray.count == namesArray.count && self.imagesLoaded == false{
imagesArray[indexPath.row].getDataInBackgroundWithBlock { (imageData: NSData?, error: NSError?) -> Void in
if error == nil {
let image = UIImage(data: imageData!)
cell.imageView?.image = image
self.tableView.reloadData()
self.imagesLoaded = true
}
}
}
return cell
}
But when I do so I see that images are not synchronised with names of the users. Even if I put my users in other order images will stay in the same order as they was before.
How can I change it?
Not sure what you're asking here. Is it that you were expecting the images to be returned in an array sorted by the user?
If so, then you will need to add a sort order to your PFQuery. I suggest you sort your namesArray by username, and then also sort the imageQuery by username:
imageQuery.orderByDescending("username")
Hope I understood the question ;]
--T
So I found that if you use one query you will receive ordered data so I've changed my code and now it works pretty well. So what I've done is that I do query for every separate member of the namesArray:
func fetchData() {
for index in 0..<self.namesArray.count {
let imagePredicate = NSPredicate(format: "username == %#", namesArray[index])
let imageQuery = PFQuery(className: "_User", predicate: imagePredicate)
imageQuery.findObjectsInBackgroundWithBlock({ (objects: [PFObject]?, error: NSError?) -> Void in
if error == nil {
for object in objects! {
self.imageFilesArray![index] = object["image"] as? PFFile
}
for imageFile in self.imageFilesArray! {
let index = self.imageFilesArray?.indexOf{$0 == imageFile}
imageFile?.getDataInBackgroundWithBlock({ (imageData: NSData?, error: NSError?) -> Void in
let userImage = UIImage(data: imageData!)
self.imagesArray?[index!] = userImage
self.tableView.reloadData()
})
}
}
})
}
}
and here is tableView:cellForRowAtIndexPath:
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("Cell") as! ChatsCell
cell.nameLabel.text = namesArray[indexPath.row]
cell.messageTextLabel.text = messagesArray[indexPath.row]
cell.chatImageView.image = self.imagesArray![indexPath.row] != nil ? self.imagesArray![indexPath.row] : UIImage(named: "add")
return cell
}
I don't understand what is going on. I have an image saved as a PFFile in Parse. I can see it and I know it is there. I want to have it as a cell image. The rest of the code below works fine and the memory addresses of PFFile also print. textLabel and detailTextLabel also fine but the images won't show (even if I delete 'loadInBackground'). Any ideas?
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath, object: PFObject?) -> PFTableViewCell? {
var cell = tableView.dequeueReusableCellWithIdentifier("Cell") as! PFTableViewCell!
if cell == nil {
cell = PFTableViewCell(style: .Subtitle, reuseIdentifier: "Cell")
}
if let name = object?["name"] as? String {
cell.textLabel?.text = name
}
if let artist = object?["artist"] as? String {
cell.detailTextLabel?.text = artist
}
if let artwork = object?["artwork"] as? PFFile {
println("we've got an artwork image \(artwork)")
//cell!.imageView!.image = UIImage(named: "placeholder.jpg")
cell.imageView?.file = artwork
cell.imageView?.loadInBackground()
}
return cell
}
Parse just saves an reference to the image in the table, you will have to do another async call to retrieve the message.:
let artwork = object?["artwork"] as PFFile
artwork.getDataInBackgroundWithBlock {
(imageData: NSData?, error: NSError?) -> Void in
if error == nil {
if let imageData = imageData {
let image = UIImage(data:imageData)
}
}
}