How to create cells that peek on the sides like iOS 11 App Store

Complete Example
Collection view with peeking cell demonstration

How does it work?

The Layout:

Cell Spacing and Cell Peeking
Minimum Line Spacing
Inset and cell spacing + peeking should be equal
Inset For Section At Index Path
Size For Item At Index Path
let itemWidth = collectionView.frame.size.width - 2 * (cellSpacing + cellPeekWidth)
Minimum Interitem Spacing

The Logic:

Scroll View Will Begin Dragging
Scroll View Will End Dragging
  1. We get the destination where the scroll view‘s dragging will stop from the targetContentOffset pointer. The pointer points to the value where the scroll view will stop. Changing this value will change where the scroll view will stop, and it automatically animates it without any extra work.
  2. Calculate the total distance for the scroll.
  3. Check if the scroll’s magnitude is greater than the scrollThreshold and create a coefficient that has one of 3 values (-1, 0, 1). This will be added to the current index.
  4. Get the current index by dividing the offset over the item width
  5. Add the coefficient retrieved in step 3 to the current index.
  6. Get the adjacent item scroll offset by adding the item width to the cell spacing first, and then multiplying it by the new adjacent item index retrieved in step 5
  7. Set the targetContentOffset pointee to the new value, which will scroll the collection view to that offset.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store