# UICollectionView Tutorial: Getting Started | raywenderlich.com

**URL:** <https://forums.kodeco.com/t/uicollectionview-tutorial-getting-started-raywenderlich-com/58877>\
**Category:** 🎓 Courses & Articles\
**Created:** [January 3, 2019, 5:33am UTC](https://forums.kodeco.com/t/uicollectionview-tutorial-getting-started-raywenderlich-com/58877 "2019-01-03T05:33:10Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![jrturton](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jrturton/32/109667_2.png) [@jrturton](https://forums.kodeco.com/u/jrturton)\
**Post date:** [January 3, 2019, 5:33am UTC](https://forums.kodeco.com/t/uicollectionview-tutorial-getting-started-raywenderlich-com/58877/1 "2019-01-03T05:33:10Z")

</div>

In this tutorial, you’ll get hands-on experience with UICollectionView by creating your own grid-based photo browsing app.

* * *
This is a companion discussion topic for the original entry at [https://www.raywenderlich.com/9334-uicollectionview-tutorial-getting-started](https://www.raywenderlich.com/9334-uicollectionview-tutorial-getting-started)

---

<div class="post-metadata">

**Author:** ![adi](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/adi/32/79544_2.png) [@adi](https://forums.kodeco.com/u/adi)\
**Post date:** [February 8, 2019, 11:13am UTC](https://forums.kodeco.com/t/uicollectionview-tutorial-getting-started-raywenderlich-com/58877/3 "2019-02-08T11:13:32Z")

</div>

func collectionView(\_ collectionView: UICollectionView,  
layout collectionViewLayout: UICollectionViewLayout,  
sizeForItemAt indexPath: IndexPath) → CGSize {  
//2  
let paddingSpace = sectionInsets.left \* (itemsPerRow + 1)  
let availableWidth = view.frame.width - paddingSpace  
let widthPerItem = availableWidth / itemsPerRow

```
return CGSize(width: widthPerItem, height: widthPerItem)

```

}

This code block not executing as desired as some times instead of itemsPerRow it returns (itemsPerRow - 1) columns in a row (vertical scrolling)  
We need to do something like (widthPerItem - K) where K value is only able to find through hit & trials to get exact itemsPerRow  
Any exact solution for that ?

---

<div class="post-metadata">

**Author:** ![shogunkaramazov](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shogunkaramazov/32/108826_2.png) [@shogunkaramazov](https://forums.kodeco.com/u/shogunkaramazov)\
**Post date:** [February 8, 2019, 12:34pm UTC](https://forums.kodeco.com/t/uicollectionview-tutorial-getting-started-raywenderlich-com/58877/4 "2019-02-08T12:34:48Z")

</div>

@wviper3 Can you please help with this when you get a chance? Thank you - much appreciated! :]

---

<div class="post-metadata">

**Author:** ![wleahy93](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/wleahy93/32/81494_2.png) [@wleahy93](https://forums.kodeco.com/u/wleahy93)\
**Post date:** [March 28, 2019, 7:21pm UTC](https://forums.kodeco.com/t/uicollectionview-tutorial-getting-started-raywenderlich-com/58877/5 "2019-03-28T19:21:30Z")

</div>

Question about the activity indicator as a subView in the uiTextField. Is adding a new instance of an indicator view as a subview and then removing it from the superview the most efficient method? Wouldn’t it be more efficient to subclass uiTextField and then have the appropriate logic to active/inactive/hide/unhide the activity view? Just wondering.

---

<div class="post-metadata">

**Author:** ![shogunkaramazov](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shogunkaramazov/32/108826_2.png) [@shogunkaramazov](https://forums.kodeco.com/u/shogunkaramazov)\
**Post date:** [March 28, 2019, 8:11pm UTC](https://forums.kodeco.com/t/uicollectionview-tutorial-getting-started-raywenderlich-com/58877/6 "2019-03-28T20:11:59Z")

</div>

@wviper3 Do you have any feedback about this? Thank you - much appreciated! :]

---

<div class="post-metadata">

**Author:** ![wviper3](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/wviper3/32/83241_2.png) [@wviper3](https://forums.kodeco.com/u/wviper3)\
**Post date:** [March 29, 2019, 12:31am UTC](https://forums.kodeco.com/t/uicollectionview-tutorial-getting-started-raywenderlich-com/58877/7 "2019-03-29T00:31:13Z")

</div>

If you’re going to be adding the subview back to the superview soon after it’s removed, its probably best to use the `isHidden` property. Likewise if you have many subviews coming and going or one that will be gone for a long period of time, you should remove it.

In this case either would work. This is the code required to use `isHidden` inside the Text Field Delegate:

```auto
  func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    // 1
    var activityIndicator = view.subviews.compactMap({$0 as? UIActivityIndicatorView}).first
    if activityIndicator == nil {
      activityIndicator = UIActivityIndicatorView(style: .gray)
      textField.addSubview(activityIndicator!)
      activityIndicator!.frame = textField.bounds
      activityIndicator!.startAnimating()
    } else {
      activityIndicator!.isHidden = false
    }
    
    flickr.searchFlickr(for: textField.text!) { searchResults in
      activityIndicator!.isHidden = true
      activityIndicator!.stopAnimating()

```

Take a look at this stack overflow [thread](https://stackoverflow.com/questions/42299607/hide-show-ui-element-vs-add-remove-swift) for more information.

---

<div class="post-metadata">

**Author:** ![rward](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/rward/32/81494_2.png) [@rward](https://forums.kodeco.com/u/rward)\
**Post date:** [July 5, 2019, 10:17am UTC](https://forums.kodeco.com/t/uicollectionview-tutorial-getting-started-raywenderlich-com/58877/8 "2019-07-05T10:17:00Z")

</div>

Hello, and thank you for the wonderful tutorial. I am new to Swift and learning UICollectionViews for the first time.

Can you explain why the functions are created as extensions?

Thank you Kindly!

---

<div class="post-metadata">

**Author:** ![jrturton](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jrturton/32/109667_2.png) [@jrturton](https://forums.kodeco.com/u/jrturton)\
**Post date:** [July 5, 2019, 1:08pm UTC](https://forums.kodeco.com/t/uicollectionview-tutorial-getting-started-raywenderlich-com/58877/9 "2019-07-05T13:08:08Z")

</div>

Hi Ryan,

Thanks for reading, and welcome to the forums! We usually group functions into extensions when those functions are part of a protocol. It keeps your code organised and helps you identify parts than could maybe form a separate object or type later on.

---

<div class="post-metadata">

**Author:** ![rward](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/rward/32/81494_2.png) [@rward](https://forums.kodeco.com/u/rward)\
**Post date:** [July 5, 2019, 3:02pm UTC](https://forums.kodeco.com/t/uicollectionview-tutorial-getting-started-raywenderlich-com/58877/10 "2019-07-05T15:02:56Z")

</div>

Thank you, Richard. This makes sense and helps a lot. This UICollectionsView tutorial is wonderful - thank you and the team for sharing!

---

<div class="post-metadata">

**Author:** ![shogunkaramazov](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shogunkaramazov/32/108826_2.png) [@shogunkaramazov](https://forums.kodeco.com/u/shogunkaramazov)\
**Post date:** [August 22, 2019, 6:25pm UTC](https://forums.kodeco.com/t/uicollectionview-tutorial-getting-started-raywenderlich-com/58877/11 "2019-08-22T18:25:37Z")

</div>

This tutorial is more than six months old so questions are no longer supported at the moment for it. Thank you!

---

<div class="post-metadata">

**Author:** ![shogunkaramazov](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shogunkaramazov/32/108826_2.png) [@shogunkaramazov](https://forums.kodeco.com/u/shogunkaramazov)\
**Post date:** [August 22, 2019, 6:25pm UTC](https://forums.kodeco.com/t/uicollectionview-tutorial-getting-started-raywenderlich-com/58877/12 "2019-08-22T18:25:42Z")

</div>