Adding caption label to UImageView in Collection View

Question

I am completely new to iOS development. I have never wrote a piece of code in my life. But I am attempting to follow this tutorial here. I have successfully completed the tutorial, but I am looking to mod the code a little bit.

• How can I add a text 'Title' under each Image loaded?
• And also how do i go about changing the colors of the image border and app background?

ViewController:

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

    @IBOutlet var collectionView: UICollectionView!

    var galleryItems: [GalleryItem] = []
    var listOfDescriptions = [String]()

    // MARK: -
    // MARK: - View Lifecycle

    override func viewDidLoad() {
        super.viewDidLoad()
        initGalleryItems()
        collectionView.reloadData()
        let value = UIInterfaceOrientation.LandscapeLeft.rawValue
        UIDevice.currentDevice().setValue(value, forKey: "orientation")
    }

    private func initGalleryItems() {

        var items = [GalleryItem]()
        let inputFile = NSBundle.mainBundle().pathForResource("items", ofType: "plist")

        let inputDataArray = NSArray(contentsOfFile: inputFile!)

        for inputItem in inputDataArray as! [Dictionary<String, String>] {
            let galleryItem = GalleryItem(dataDictionary: inputItem)
            items.append(galleryItem)
        }

        galleryItems = items
    }
    private func populateList() {
        listOfDescriptions.append("Valhaha is a flavor");
        listOfDescriptions.append("Unicorns blood is made from dead unicorns. Harry Potter in this bit");
    }
    private func getDescription(position: Int) -> String {
        return listOfDescriptions[position]
    }

    // MARK: -
    // MARK: - UICollectionViewDataSource

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return galleryItems.count
    }

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("GalleryItemCollectionViewCell", forIndexPath: indexPath) as! GalleryItemCollectionViewCell

        cell.setGalleryItem(galleryItems[indexPath.row])
        return cell

    }

    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }

    func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {

        let commentView = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "GalleryItemCommentView", forIndexPath: indexPath) as! GalleryItemCommentView

        commentView.commentLabel.text = "Supplementary view of kind \(kind)"

        return commentView
    }

    // MARK: -
    // MARK: - UICollectionViewDelegate

    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {

        let alert = UIAlertController(title: "didSelectItemAtIndexPath:", message: "Indexpath = \(indexPath)", preferredStyle: .Alert)

        let alertAction = UIAlertAction(title: "Dismiss", style: .Destructive, handler: nil)
        alert.addAction(alertAction)

        self.presentViewController(alert, animated: true, completion: nil)
    }

    // MARK: -
    // MARK: - UICollectionViewFlowLayout

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        let picDimension = self.view.frame.size.width / 4.0
        return CGSizeMake(picDimension, picDimension)
    }

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
        let leftRightInset = self.view.frame.size.width / 14.0
        return UIEdgeInsetsMake(0, leftRightInset, 0, leftRightInset)
    }
}

GalleryItemCollectionCellView:

import UIKit

class GalleryItemCollectionViewCell: UICollectionViewCell {

@IBOutlet var itemImageView: UIImageView!

func setGalleryItem(item:GalleryItem) {
    itemImageView.image = UIImage(named: item.itemImage)
}

}

Answer 1

With your project you want add label below image view, you should add to cell on storyboard like this:

Drage outlet to cell:

Change setdata function:

func setGalleryItem(item:GalleryItem) {
    itemImageView.image = UIImage(named: item.itemImage)
    itemNameLabel.text = item.itemImage
    self.backgroundColor = UIColor.purpleColor()
}

And in viewController re-calculate size of cell:

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    let picDimension = self.view.frame.size.width / 4.0
    return CGSizeMake(picDimension, picDimension + 31)
}

depen you want you can change 31 to size of label you want.

I see border you want is background of cell. so add it into the set item above. If you just want border aroud image view: you can use:

func setGalleryItem(item:GalleryItem) {
    itemImageView.image = UIImage(named: item.itemImage)
    itemNameLabel.text = item.itemImage
    self.backgroundColor = UIColor.purpleColor()
    itemImageView.layer.borderColor = UIColor.redColor().CGColor
    itemImageView.layer.borderWidth = 1.0
}

choose the wait you want.

Change color of view you add into viewDidload

  override func viewDidLoad() {
    super.viewDidLoad()
    initGalleryItems()
    collectionView.reloadData()
    self.view.backgroundColor = UIColor.lightGrayColor()//change color view
}

Here is demo from your source: Demo