I'm working on an iPhone app that should display images in a UICollectionView. The images are saved on the Parse cloud, and I'm using a subclass of PFQueryCollectionViewController to make the query and display the images.
Tapping on a MKMapView callout triggers the segue that shows the CollectionViewController. The images do not appear in the cells the first time the CollectionViewController is presented. However, if I go back to the MapView, and then return to the CollectionViewController, the images appear in the cells.
How can I get the images to appear the first time the PFQueryCollectionViewController is presented?
Here's my code:
class PhotoGridCollectionViewController: PFQueryCollectionViewController {
override func viewDidAppear(animated: Bool) {
}
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
// MARK: UICollectionViewDataSource
override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
//#warning Incomplete method implementation -- Return the number of sections
return 1
}
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
//#warning Incomplete method implementation -- Return the number of items in the section
return self.objects.count
}
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath, object: PFObject?) -> PFCollectionViewCell? {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("venuePhotoThumb", forIndexPath: indexPath) as! PhotoGridCollectionViewCell
if let pfObject = object {
cell.imageView.file = pfObject["imageFile"] as? PFFile
cell.imageView.loadInBackground({ (img, err) -> Void in
println("Download complete")
})
}
return cell
}
}
Since I'm using Storyboards, I pass my custom class the parseClass by setting it in the Attribute Inspector:
As you can see, I'm using the loadInBackground method of the PFImageView to load the images asynchronously, and I think this the problem might be caused by the images being downloaded after the cell is returned, but I don't have any other ideas. Does anyone know why the images are not appearing the first time the view is presented?
My co-developer finally found the answer to this. We had to set a placeholder image for the PFImageViews when configuring the cells in cellForItemAtIndexPath. The code examples on Parse do include setting the placeholder image, but they don't say that it is required for the PFQueryCollectionViewController to work properly. We considered it an aesthetic touch that we could come back to later.
So the answer is: in order for images to load properly in the cells of a PFQueryCollectionViewController you MUST provide a placeholder image when configuring the cells in cellForItemAtIndexPath.
Here's the code that worked:
let placeholder = UIImage(named: "myPlaceholderImage") //an image from images.xcassets in your xcode project
cell.imageView.image = placeholder
if let pfObject = object {
cell.imageView.file = pfObject["image"] as? PFFile
cell.imageView.loadInBackground()
}
Related
I would like to download multiple URLs from string in array, and display images in collectionView. I succeed to display four images (4 visible cells on my screen) and when I scroll, that begins the download of the 2 other images.
I want that these 6 images are downloaded in the same time (and I don't have to scroll for beginning the other download). After this, I want to display the total time spent to download and display images in my collectionView.
What I am doing wrong ?
Here is my code :
import UIKit
import AlamofireImage
import Alamofire
class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource {
var players = [
["image_Name":"https://images.unsplash.com/photo-1420768255295-e871cbf6eb81?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=4b94ef340bd7f6cac580fbc76af326af"],
["image_Name":"https://images.unsplash.com/photo-1465411801898-f1a78de00afc?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=149d27223217c0fa63c7dd8f1e8d23f6"],
["image_Name":"https://images.unsplash.com/photo-1466853817435-05b43fe45b39?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=a3b629b7e0c4f710ce119f219ae5b874"],
["image_Name":"https://images.unsplash.com/photo-1467404899198-ccadbcd96b91?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=66eef8db7a0aa4119c6c8d7ba211f79f"],
["image_Name":"https://images.unsplash.com/photo-1470322346096-ecab3914cab7?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=83863ba23662871baf6434c6000e00bd"],
["image_Name":"https://images.unsplash.com/photo-1473624566182-509e437512f4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=54c3ec6d1fee824d62e6fa76676ddf17"]
]
var methodStart = Date()
#IBOutlet weak var mycall: UICollectionView!
var selectedIndex=[Int]()
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.players.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell:playerCell = collectionView.dequeueReusableCell(withReuseIdentifier: "playerCell", for: indexPath) as! playerCell
let url = URL(string:self.players[indexPath.row]["image_Name"]!)
if indexPath.row == 0 {
methodStart = Date()
}
Alamofire.request(url!).responseImage { response in
// debugPrint(response)
// print(response.request)
// print(response.response)
// debugPrint(response.result)
if let image = response.result.value {
cell.playerImage.image = image
}
}
if indexPath.row == self.players.count - 1 {
let methodFinish = NSDate()
let executionTime = methodFinish.timeIntervalSince(methodStart as Date)
print("Execution time: \(executionTime)")
}
return cell
}
}
Problem in your code -
you said you want those 6 images to be downloaded at the same time and when user scrolls the 5th and 6th image should display immediately. but this is not happening because the cellForItemAtIndexPath function for the 5th and 6th cell called when you scroll. this is the default behavior and you cannot invoke this before user scrolled.
Quick fix solution -
Download all the images outside cellForItemAtIndexPath function, like in either viewDidLoad or viewDidAppear by looping the array of players and then reload the collection view after completion of download of the last one.
Permanent and best solution -
Implement lazy loading and caching of images using either Heneke or SDWebImage to display image in cells. And use prefetch option in those libraries to fetch images before they were shown in cells. To use prefetch option you need to loop through the array and pass the urls to the fetching and storing functions of the library and just load image in cell according to the syntax of that library and it will manage the displaying of image when it downloaded and you don't have to worried about that.
When you are dealing with network calls, you should update UI in main queue. One more valid point i want to add here is Alamofire has a special library for image download/resize. Please have a look at AlamofireImage Library
Alamofire.request(url!).responseImage { response in
if let image = response.result.value {
DispatchQueue.main.async {
cell.playerImage.image = image
cell.playerImage.setNeedsLayout()
}
}
}
I have working uicollectionview codes with CustomCollectionViewLayout , and inside have a lot of small cells but user cannot see them without zoom. Also all cells selectable.
I want to add my collection view inside zoom feature !
My clear codes under below.
class CustomCollectionViewController: UICollectionViewController {
var items = [Item]()
override func viewDidLoad() {
super.viewDidLoad()
customCollectionViewLayout.delegate = self
getDataFromServer()
}
func getDataFromServer() {
HttpManager.getRequest(url, parameter: .None) { [weak self] (responseData, errorMessage) -> () in
guard let strongSelf = self else { return }
guard let responseData = responseData else {
print("Get request error \(errorMessage)")
return
}
guard let customCollectionViewLayout = strongSelf.collectionView?.collectionViewLayout as? CustomCollectionViewLayout else { return }
strongSelf.items = responseData
customCollectionViewLayout.dataSourceDidUpdate = true
NSOperationQueue.mainQueue().addOperationWithBlock({ () -> Void in
strongSelf.collectionView!.reloadData()
})
}
}
}
extension CustomCollectionViewController {
override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
return items.count
}
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return items[section].services.count + 1
}
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! CustomCollectionViewCell
cell.label.text = items[indexPath.section].base
return cell
}
override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath cellForItemAtIndexPath: NSIndexPath) {
print(items[cellForItemAtIndexPath.section].base)
}
}
Also my UICollectionView layout properties under below you can see there i selected maxZoom 4 but doesnt have any action !
Thank you !
You don't zoom a collection like you'd zoom a simple scroll view. Instead you should add a pinch gesture (or some other zoom mechanism) and use it to change the layout so your grid displays a different number of items in the visible part of the collection. This is basically changing the number of columns and thus the item size (cell size). When you update the layout the collection can animate between the different sizes, though it's highly unlikely you want a smooth zoom, you want it to go direct from N columns to N-1 columns in a step.
I think what you're asking for looks like what is done in the WWDC1012 video entitled Advanced Collection Views and Building Custom Layouts (demo starts at 20:20) https://www.youtube.com/watch?v=8vB2TMS2uhE
You basically have to add pinchGesture to you UICollectionView, then pass the pinch properties (scale, center) to the UICollectionViewLayout (which is a subclass of UICollectionViewFlowLayout), your layout will then perform the transformations needed to zoom on the desired cell.
I'm currently working on an app in which I would like the users to be able to favourite a button and that button then gets added to the 'Favourites' section for that particular ViewController.
The app is a soundboard so it is split into (currently) 2 characters, within those characters I have categories of sound files for the users to choose from, once the user selects a category it will load up the ViewController with a set of sounds which can be played by pressing the button (very simple I know).
I'm trying to implement a 'Favourite' function in order to allow the user to favourite the buttons of their choice and in doing so, the new 'favourited' button will be displayed in a new ViewController.
I've browsed through here and found some stuff in regards to NSUserDefaults
I'm new to Swift and iOS development as a whole so if someone could be kind enough to guide me in the right direction I would be very grateful.
I know how to set the Image of the favourite button to change whether it has been set as a favourite or not, I also noticed that it suggests I place the favourites in a UITableViewController. My app is currently using a UITabBarController with 4 different ViewControllers off them.
If you would like screenshots of my Storyboard to get a better understanding please let me know and I shall update the post, also if any code is required please let me know and once again, I shall update the post!
EDIT: I will happily add a button which when pressed loads a table view if someone knows how to add a normal button into a table view so when pressed it shows the favourites
EDIT 2: Image
try to do as follows-
Take a UITabBarController having one viewController as soundsViewController and another tableViewController as favouritesTableViewController shown as below image-
Now add these sample code to soundsViewController-
var favListArray:NSMutableArray = []
#IBOutlet weak var tableView: UITableView!
override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated)
if NSUserDefaults.standardUserDefaults().objectForKey("favList") != nil {
favListArray = NSMutableArray.init(array: NSUserDefaults.standardUserDefaults().objectForKey("favList") as! NSMutableArray)
}
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 1
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
return 10
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("soundCell", forIndexPath: indexPath) as! TableViewCell
cell.titleLbl.text = NSString.localizedStringWithFormat("Sound %d", indexPath.row) as String
if favListArray.containsObject(cell.titleLbl.text!) {
cell.addTOFVrtBtn.setTitle("-", forState: UIControlState.Normal)
}else{
cell.addTOFVrtBtn.setTitle("+", forState: UIControlState.Normal)
}
cell.addTOFVrtBtn.tag = indexPath.row
cell.addTOFVrtBtn.addTarget(self, action:#selector(addToFav) , forControlEvents: UIControlEvents.TouchUpInside)
return cell
}
func addToFav(sender:UIButton) {
let cell = self.tableView.cellForRowAtIndexPath(NSIndexPath.init(forRow: sender.tag, inSection: 0)) as! TableViewCell
if favListArray.containsObject(cell.titleLbl.text!) {
favListArray.removeObject(cell.titleLbl.text!)
}else{
favListArray.addObject(cell.titleLbl.text!)
}
tableView.reloadData()
NSUserDefaults.standardUserDefaults().setObject(favListArray, forKey: "favList")
}
these is a sample code, here TableViewCell is subclass of UITableViewCell having titleLbl and addTOFvrtBtn.
Add below sample code to favouritesTableViewController -
varfavSoundList:NSMutableArray = []
override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated)
if NSUserDefaults.standardUserDefaults().objectForKey("favList") != nil {
favSoundList = NSMutableArray.init(array: NSUserDefaults.standardUserDefaults().objectForKey("favList") as! NSMutableArray)
print(favSoundList)
self.tableView.reloadData()
}
}
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
// MARK: - Table view data source
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 1
}
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
return favSoundList.count
}
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath)
cell.textLabel?.text = favSoundList.objectAtIndex(indexPath.row) as? String
return cell
}
Here is the o/p screen demo-
I hope this will help you or you can get an idea how to make Favourites list and Favourites section..Thanks
Don't think of it as favouriting a button, a button is just how you're displaying the data in your app - what you're really favouriting is the data itself, so in this case a particular sound file.
So, your current data is a list of sound files, or the path to those files. Your favourites list can be exactly the same. I imagine you might be simply getting a list of files from disk to display so your list of favourites will need to be stored differently. That could be in user defaults, or in a plist file, either way it's an array of strings and both are simple options to store the array.
When storing you just set the array into defaults with a key, or write it to a file. When you read back you should either read from user defaults and then make a mutableCopy or use NSMutableArray to read the file in so you have an editable instance afterwards and you can add and remove favourites from the list.
Your approach of using buttons to represent the sound files is probably a lot more code and effort than you require. Table views are specifically designed to show a list of things, and there's no reason that a table view can't look like a list of buttons (while being much more flexible and much less code to create).
I am working on an app that needs to display five different images inside of five different tableview cells. This is the storyboard that I have for the cell.
This is the code I have inside of the tableviewcontroller.
class MasterViewController: UITableViewController, UITableViewDelegate, UITableViewDataSource {
var returnTable = 1
var icons: [String] = ["settings", "calendar", "classes", "envelope", "grades"]
override func viewDidLoad() {
super.viewDidLoad()
// Uncomment the following line to preserve selection between presentations
// self.clearsSelectionOnViewWillAppear = false
// Uncomment the following line to display an Edit button in the navigation bar for this view controller.
// self.navigationItem.rightBarButtonItem = self.editButtonItem()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
// MARK: - Table view data source
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
// #warning Potentially incomplete method implementation.
// Return the number of sections.
return 0
}
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete method implementation.
// Return the number of rows in the section.
return icons.count
}
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! HomeScreenCells
var image : UIImage = UIImage(named: icons[indexPath.row])!
cell.icon.image = image
return cell
}
I also have a custom class for the tableviewcells. Also, I have the correct reuse identifier for the cell. Still, the image does not appear. Not only does the image not appear, nothing appears. When I change the background, the background does not change in the simulator. This is all I get in the simulator.
I have the classes linked up correctly for the split view controller. I have no idea why nothing is appearing in the table. Any help would be appreciated.
I think your problem may be that you have the number of sections set to 0. Either set it to 1, or leave out the block of code completely.
As stated above, return 1 in number of sections (or the number of cells you need). And if your custom cell class has a .xib, you also need to register it, sometimes after you init the tableview
tableView.registerNib( UINib(nibName: "HomeScreenCells", bundle: nil), forCellReuseIdentifier: "Cell")
I'm currently working on an application that displays images at certain locations. The issue is the following:
When the user clicks on the location in the MapView it goes to an empty collection view. If the user pulls to refresh, the spinner is active but the images do not load. However, if the user goes back to the MapView and then clicks on the location again, the images are loaded in the collection view. Of course we are trying to get the images loaded when the user first goes to the collection view.
I think is likely a small issue, but after hours of trying different various recommendations from different sources we simply cannot get it to work properly.
Any help would be very much appreciated.
Thank you.
Here is my code for the PFQueryCollectionViewController:
import UIKit
class PhotoGridCollectionViewController: PFQueryCollectionViewController {
var savedPics: [UIImage]?
func loadImages() -> PFQuery {
var query = PFQuery(className: "UserPhoto")
query.orderByDescending("timeTaken")
return query
}
override func viewDidAppear(animated: Bool) {
}
override func viewDidLoad() {
super.viewDidLoad()
loadImages()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
// Get the new view controller using segue.destinationViewController.
// Pass the selected object to the new view controller.
}
*/
// MARK: UICollectionViewDataSource
override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
//#warning Incomplete method implementation -- Return the number of sections
return 1
}
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
//#warning Incomplete method implementation -- Return the number of items in the section
return self.objects.count
}
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath, object: PFObject?) -> PFCollectionViewCell? {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("venuePhotoThumb", forIndexPath: indexPath) as! PhotoGridCollectionViewCell
if let pfObject = object {
cell.imageView.file = pfObject["imageFile"] as? PFFile
cell.imageView.loadInBackground({ (img, err) -> Void in
println("Download complete")
})
}
return cell
}
}
EDIT: I have now updated my code and it is a bit cleaner, but I'm still having the exact same issue.
In my previous answer I just used a plain old UICollectionViewController to solve the issue, but after a lot of digging I finally figured out how to correctly implement a PFQueryCollectionViewController.
There must be a placeholder image in the PFQueryCollectionViewController or your images will not load when the user first loads the PFQueryCollectionViewController.
Here is a bit of the code to illustrate this:
import UIKit
import Parse
import ParseUI
class PhotoCollectionViewController: PFQueryCollectionViewController {
...
var parseObject: PFObject!
var placeHolderView: UIView!
...
override func viewDidLoad() {
super.viewDidLoad()
if let layout = collectionViewLayout as? UICollectionViewFlowLayout {
layout.sectionInset = UIEdgeInsetsMake(5.0, 10.0, 5.0, 10.0)
layout.minimumInteritemSpacing = 5.0
}
}
...
// MARK: PFQuery
override func queryForCollection() -> PFQuery {
let query = super.queryForCollection()
query.whereKey("name", equalTo: parseObject!)
query.orderByDescending("date")
return query
}
override func collectionView(collectionView: UICollectionView,
cellForItemAtIndexPath indexPath: NSIndexPath,
object: PFObject?) -> PFCollectionViewCell? {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell",
forIndexPath: indexPath) as? CustomCollectionViewCell
...
// HERE YOU MUST HAVE A PLACEHOLDER IMAGE
var initialThumbnail = UIImage(named: "thumbnail")
cell?.collectionImageView.image = initialThumbnail
if let imageFile = object?["image"] as? PFFile {
cell?.collectionImageView.file = imageFile
cell?.collectionImageView.loadInBackground()
}
return cell
}
...
}
The answer was quite simple, but as I am relatively new to iOS development it took some time to finally figure it out. The necessity for the placeholder image applies to both the PFQueryCollectionViewController and PFQueryTableViewController.