UICollectionView Tutorial: Getting Started

bpj823 · September 5, 2016, 1:01pm

In this UICollectionView tutorial, you'll get learn how to leverage the superpowers of the only view capable of dethroning UITableView as the king of UIKit.

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/975-uicollectionview-tutorial-getting-started

dariojg · October 2, 2016, 10:20pm

Hi Bradley,

Thanks for the tutorial!.

I am trying to do it using Xcode 8 and Swift 3 and got several compile errors when adding the files downloaded from here: https://koenig-media.raywenderlich.com/uploads/2016/06/FlickrFiles.zip.

This does not happened with the final project: https://koenig-media.raywenderlich.com/uploads/2016/09/FlickrSearch-PT1-Swift3.zip

I think the files in FlickrFiles.zip were not updated to Swift 3 as the ones in the final project file.

Regards,
Dario.

keitaito · October 24, 2016, 6:16pm

Thanks for the awesome tutorial.

I found one typo/mistake error in the tutorial, and just want to let you know it.
At UICollectionViewDataSource section in the tutorial when creating a black placeholder collection view cell, the return cell from dequeueReusableCell(withReuseIdentifier:for:) method is casted as FlickrPhotoCell. But I think the cell should be returned as just UICollectionViewCell as it is. I think it is just a typo or mistake error.

The below is the code I’m talking about:

  //3
  override func collectionView(_ collectionView: UICollectionView,
                               cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, 
                                                                  for: indexPath) as! FlickrPhotoCell
    cell.backgroundColor = UIColor.black
    // Configure the cell
    return cell
  }

Thank you.

Keita

richk · November 9, 2016, 1:29am

At the top of your flickr.swift file, you declared processingQueue without ever using it.

fabrice · November 9, 2016, 12:09pm

Hello, why not make a simple tutorial with photos of our assets and make an optional part of the link with Flickr. When we learn not do it the basics and then for those who are interested to examples such as with Flickr.

proxpero · November 10, 2016, 9:10pm

Hi Bradley.

I learned a lot from this tutorial, thank you! And everything worked great for me the first time through. I just want to contribute two remarks about the function that returns the FlickrPhoto in the private extension.

I think that naming the function photo(for indexPath: IndexPath) -> FlickrPhoto keeps better with the spirit of Swift 3 API naming guidelines. Then at the call site it looks like let flickrPhoto = photo(for: indexPath) without repeating indexPath so often.
I don’t understand why indexPath is being cast to NSIndexPath. It works for me just to write searches[indexPath.section].searchResults[indexPath.row]

What do you think?

templier · November 17, 2016, 9:32am

Xcode 8, Swift 3
Finished project:
Error searching : Error Domain=FlickrSearch Code=0 “(null)”

puzzlementrules · November 20, 2016, 10:11pm

Working to implement this tutorial, but when I paste in the long section of code starting with

extension FlickrPhotosViewController : UITextFieldDelegate {

I get two errors, one at that line (Type “FlickrPhotosViewController” does not conform to protocol ‘NSObjectProtocol’) and the other at the line just below //4,

self.collectionView?.reloadData()

That error says, Value of type ‘FlickrPhotosViewController’ has no member ‘collectionView’

Not sure what I’ve botched to get these errors at this point. Help??

Thanks!

idreamer · November 22, 2016, 11:35pm

Hello,
It seems that Bradley’s code made me sense. But I got a casting error from UICollectionViewCell to FlickrCollectionViewCell.

Could not cast value of type ‘UICollectionViewCell’ (0x103dfce98) to ‘FlickrSearch.FlickrCollectionViewCell’ (0x101a6a220).

cwkatzmann · December 5, 2016, 9:22pm

This is probably something really simple, but I’ve been stuck on it for hours… How do I get the Flickr classes we downloaded to show up in the file tree in XCode? I have unzipped them and moved them into the appropriate folder, but they don’t show up and I don’t have access to the classes in the code.

mik · December 11, 2016, 10:47am

Hello, thanks for the great tutorial.

Have you some hint for something similar in MacOS.
What are the most important differences.

wathen · December 21, 2016, 3:24am

Thanks for this awesome tutorial, and even more importantly GO HAWKS!!

jch_duran · December 22, 2016, 6:34pm

You need to use a different api key than the one in the completed project as that one has expired.

downiwr · December 28, 2016, 12:19am

Bradley, i am getting the following error: Terminating app due to uncaught exception ‘NSInternalInconsistencyException’, reason: ‘could not dequeue a view of kind: UICollectionElementKindCell with identifier FlickrCell - must register a nib or a class for the identifier or connect a prototype cell in a storyboard’

it happened as soon as I added the UICollectionViewDelegateFlowLayout extension

downiwr · December 28, 2016, 12:29am

never mind…I missed the reuse identifier. it’s fixed.

kare · December 29, 2016, 3:48pm

Thanks for this awesome tutorial,

maheshbabu159 · February 5, 2017, 6:53pm

Thanks for the good tutorial.

I found it difficult of adding more photos to collection view dynamically.

@IBAction func addMoreButtonClick(sender: AnyObject) {
    
    if let URL = NSBundle.mainBundle().URLForResource("Photos", withExtension: "plist") {
        if let photosFromPlist = NSArray(contentsOfURL: URL) {
            for dictionary in photosFromPlist {
                let photo = Photo(dictionary: dictionary as! NSDictionary)
                photos.append(photo)
            }
        }
    }
    self.collectionView?.reloadData()
}

UICollectionView scroll view height is fixed. Any help?

salma · June 16, 2017, 9:01pm

searches[(indexPath as NSIndexPath).section].searchResults[(indexPath as IndexPath).row]
in this line of code , showing use of unresolved identifier searches

flickr.searchFlickrForTerm(textField.text!) {
}

here flickr is showing the same type of error…

what to do??

alemak1 · September 16, 2017, 9:18am

Hi, I actually made use of the Flickr API in a free tourism/travel app that I made about Korea. However, since the images are downloaded asynchronously via a completion handler, it takes a long time to load the images. Anyways, the app is free, here is the link to the AppStore homepage if you are interested: https://itunes.apple.com/us/app/seoul-tourism-aid/id1254856154?mt=8

Do you know of any way to download the images incrementally? In another portion of the app, I used CloudKit to download images, which I was able to do one-by-one via a pointer. The download time is still slower than I’d like, but at least the user experience is better, since the images are loading one by one, as opposed to all at once, as is the case with the Flickr portion of the app, where, unless you have a superfast connection speed, it takes patience for the user to see the final images.

kizlov · October 13, 2017, 4:33pm

Who has a problem in Xcode
"Could not cast value of type ‘UICollectionViewCell’ (0x110460820) to '******.cell

You need to remove this line of code from viewDidLoad()
self.collectionView!.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)