# Reproducing Popular iOS Controls - Part 9: | Ray Wenderlich Videos

**URL:** <https://forums.kodeco.com/t/reproducing-popular-ios-controls-part-9-ray-wenderlich-videos/44561>\
**Category:** 🎓 Courses & Articles\
**Created:** [July 11, 2018, 7:36am UTC](https://forums.kodeco.com/t/reproducing-popular-ios-controls-part-9-ray-wenderlich-videos/44561 "2018-07-11T07:36:25Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![leamars](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/leamars/32/109220_2.png) [@leamars](https://forums.kodeco.com/u/leamars)\
**Post date:** [July 11, 2018, 7:36am UTC](https://forums.kodeco.com/t/reproducing-popular-ios-controls-part-9-ray-wenderlich-videos/44561/1 "2018-07-11T07:36:26Z")

</div>

In this challenge you'll enhance the control by letting the user tap on a cell to select it.

* * *
 This is a companion discussion topic for the original entry at [https://www.raywenderlich.com/5298-reproducing-popular-ios-controls/lessons/9](https://www.raywenderlich.com/5298-reproducing-popular-ios-controls/lessons/9)

---

<div class="post-metadata">

**Author:** ![shaibow](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shaibow/32/110781_2.png) [@shaibow](https://forums.kodeco.com/u/shaibow)\
**Post date:** [November 17, 2018, 11:38am UTC](https://forums.kodeco.com/t/reproducing-popular-ios-controls-part-9-ray-wenderlich-videos/44561/2 "2018-11-17T11:38:23Z")

</div>

There is a Bug in collection view layout.  
We can’t select the first and second images, It suddenly jumps to another one!

---

<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:** [November 17, 2018, 12:23pm UTC](https://forums.kodeco.com/t/reproducing-popular-ios-controls-part-9-ray-wenderlich-videos/44561/3 "2018-11-17T12:23:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![shaibow](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shaibow/32/110781_2.png) [@shaibow](https://forums.kodeco.com/u/shaibow)\
**Post date:** [November 17, 2018, 5:01pm UTC](https://forums.kodeco.com/t/reproducing-popular-ios-controls-part-9-ray-wenderlich-videos/44561/4 "2018-11-17T17:01:53Z")

</div>

@leamars @shogunkaramazov  
I’ve found a solution for this using `UICollectionViewDelegateFlowLayout`,

```
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    let side = lensCollectionView.frame.height * 2
    return UIEdgeInsets(top: 0, left: side, bottom: 0, right: side)
}

```

fixed it , \*2 is because we the collection view end with 2 cells at start and end of it self. but scroll view can’t extend it to center!  
It helps left and right of section ( we have 1 section here at all ) to have necessary margin ( here is UIEdgeInsets )

---

<div class="post-metadata">

**Author:** ![leamars](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/leamars/32/109220_2.png) [@leamars](https://forums.kodeco.com/u/leamars)\
**Post date:** [January 3, 2019, 2:27pm UTC](https://forums.kodeco.com/t/reproducing-popular-ios-controls-part-9-ray-wenderlich-videos/44561/5 "2019-01-03T14:27:19Z")

</div>

Fantastic! Great job on figuring that out on your own :D!

Thanks for posting your solution, and apologies for not replying sooner.

---

<div class="post-metadata">

**Author:** ![ericlm](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/ericlm/32/100713_2.png) [@ericlm](https://forums.kodeco.com/u/ericlm)\
**Post date:** [February 20, 2019, 8:30pm UTC](https://forums.kodeco.com/t/reproducing-popular-ios-controls-part-9-ray-wenderlich-videos/44561/6 "2019-02-20T20:30:32Z")

</div>

I just wanted to note that to have it perfectly centered, I used :  
`func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets { let inset = lensCollectionView.frame.height * 0.9 * 2 + lensCollectionView.frame.height * 0.1 return UIEdgeInsets(top: 0, left: inset, bottom: 0, right: inset) }`

And in LensFlowLayout, in `override func prepare()`method, we should call `super.prepare` at the end to avoid a “UICollectionViewFlowLayout undefined behavior” warning in the console.

---

<div class="post-metadata">

**Author:** ![leamars](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/leamars/32/109220_2.png) [@leamars](https://forums.kodeco.com/u/leamars)\
**Post date:** [February 21, 2019, 11:00pm UTC](https://forums.kodeco.com/t/reproducing-popular-ios-controls-part-9-ray-wenderlich-videos/44561/7 "2019-02-21T23:00:12Z")

</div>

Fantastic :D! Thanks for sharing!

---

<div class="post-metadata">

**Author:** ![victorray](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/victorray/32/81494_2.png) [@victorray](https://forums.kodeco.com/u/victorray)\
**Post date:** [March 5, 2019, 12:50pm UTC](https://forums.kodeco.com/t/reproducing-popular-ios-controls-part-9-ray-wenderlich-videos/44561/8 "2019-03-05T12:50:18Z")

</div>

> [@ericlm](#):
>
> func collectionView(\_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -\> UIEdgeInsets { let inset = lensCollectionView.frame.height \* 0.9 \* 2 + lensCollectionView.frame.height \* 0.1 return UIEdgeInsets(top: 0, left: inset, bottom: 0, right: inset) }

your solution doesn’t work properly. Still first and last items not getting centered.

---

<div class="post-metadata">

**Author:** ![ericlm](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/ericlm/32/100713_2.png) [@ericlm](https://forums.kodeco.com/u/ericlm)\
**Post date:** [March 5, 2019, 2:03pm UTC](https://forums.kodeco.com/t/reproducing-popular-ios-controls-part-9-ray-wenderlich-videos/44561/9 "2019-03-05T14:03:40Z")

</div>

Sorry, I realized that I only tested it on iPhone X, I hope you found a better solution.

---

<div class="post-metadata">

**Author:** ![bing](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/bing/32/81494_2.png) [@bing](https://forums.kodeco.com/u/bing)\
**Post date:** [May 17, 2020, 7:38am UTC](https://forums.kodeco.com/t/reproducing-popular-ios-controls-part-9-ray-wenderlich-videos/44561/10 "2020-05-17T07:38:44Z")

</div>

> [@shaibow](#):
>
> func collectionView(\_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) → UIEdgeInsets { let side = lensCollectionView.frame.height \* 2 return UIEdgeInsets(top: 0, left: side, bottom: 0, right: side) }

Thanks for the solution. It fix the drag problem. However when you select the 2nd icon, it will trigger `viewDidLayoutSubviews` and scroll back to middle icon.

My solution is add a property to `lensController` to determine whether it is the first time to layout subviews. It works though I don’t know if there is a better solution to address the multiple trigger of `viewDidLayoutSubviews` problem.

---

<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:** [July 6, 2020, 11:08pm UTC](https://forums.kodeco.com/t/reproducing-popular-ios-controls-part-9-ray-wenderlich-videos/44561/11 "2020-07-06T23:08:13Z")

</div>

@bing Thank you for sharing your solution - much appreciated!