UICollectionView example in Swift

In this video tutorial I am going to share with you how to create and use UICollectionView in Swift. Here is what we are going to cover:

  • Create a new UIViewController with UICollectionView
  • Implement custom UICollectionViewCell
  • Load list of images by calling a server side PHP script which will return a JSON array of images
  • Display images in UIScrollView
  • When user taps on an image, open image in a separate view controller

If you are interested to learn how to implement features User Sign up, Sign in, Password reset, Email verification, Profile details update together with Left Side Sliding Navigation menu and other features with Swift and Parse SDK for iOS, please check out my video course which will guide you through implementation of these features step by step and will save you a lot of time 🙂 https://goo.gl/xlbQsf

Download Swift source code of this project

PHP script that returns list of images:

 header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
 header("Cache-Control: post-check=0, pre-check=0", false);
 header("Pragma: no-cache");

 $images = array();
 
 $images[] = "http://swiftdeveloperblog.com/wp-content/uploads/2015/07/1.jpeg";
 $images[] = "http://swiftdeveloperblog.com/wp-content/uploads/2015/07/2.jpeg";
 $images[] = "http://swiftdeveloperblog.com/wp-content/uploads/2015/07/3.jpeg";
 $images[] = "http://swiftdeveloperblog.com/wp-content/uploads/2015/07/4_1.jpeg";
 $images[] = "http://swiftdeveloperblog.com/wp-content/uploads/2015/07/5.jpeg";
 $images[] = "http://swiftdeveloperblog.com/wp-content/uploads/2015/07/6.jpeg";
 
 echo json_encode($images);
  • abdullaziz aman

    how to load image from local file

    • Thank you very much for your question. I think we just talked a little on Google+ :)… anyways, I do not have video tutorial on this at this moment but to load an image which is part of your mobile app, you will first need to make it a part of your app bundle by dragging and dropping an image(s) to your project and then in your code you could use something like this:

      var image : UIImage = UIImage(named:”ImageName”)
      Please look into How to use UIImage(named:) and you should find good examples.
      I hope this helps AbdullAziz.

      Sergey

      • abdullaziz aman

        thank you i do that

  • Alex Riios Cardoza

    Hi sergey,great tutorial but how could i make it work on swift 2?

    • Alex, I do not have this particular one converted into Swift 2 yet.

  • Riaz

    Hi Sergey,
    I have followed your tutorial and tried like a slider but the image is very tiny…

    Even though the ImageView size is 300X350. How to fix it?

    If I have like 10 images Array and some of them are tiny.. But if the Array has only 2 or 3 content in it, it doesn’t work well. Rather it is showing a very tiny image during Runtime.

    let avatarImage = [
    UIImage(named: “Avatar01”),
    UIImage(named: “Avatar02”)
    ]

    • Riaz

      Any help please? I’m still stuck at this one.

      • What is the cell size? Do you have any constrains set for it?

        • Riaz

          I have constraints for the Imageview inside the cell and also has Aspect Fit for the image. The Cell Size is attached below.

          • Do you have your project on Github or Bitbucket?

          • Riaz

            Hi… I have uploaded the files (BitBucket) and sent you a link to your contact. Btw I changed a bit in the Cell Size compared to the last the screenshot I sent above. Can you please check and lemme know. Thanks

  • mahbodtaba

    Hi Sergey in video number 2 could you please tell me what is (uuid)? do I have to use this?
    in pageURL line you write —>swiftdeveloperblog.com/list-of-images
    list-of-images is php file?? I mean do I create list-of-images.php and put this file in my wordpress file??
    could please help me about pageURL line??? it’s very important