UICollectionView - Horizontal scroll, horizontal layout?
Interview Questions practice on Codemia
Over 8,000 real interview questions from top companies, searchable by company and role.
Introduction
Creating a horizontally scrolling UICollectionView requires setting scrollDirection = .horizontal on the UICollectionViewFlowLayout. By default, UICollectionView scrolls vertically and lays out items left-to-right, wrapping to the next row. Changing to horizontal scroll makes items flow top-to-bottom and wrap to the next column. For a single horizontal row (carousel), set the item height equal to the collection view height. This article covers basic horizontal layout, paging, and compositional layout approaches.
Basic Horizontal Layout
Setting scrollDirection = .horizontal on the flow layout is the key configuration. Items fill vertically first, then scroll horizontally to show more columns.
Single-Row Carousel
For a single horizontal row, set the item height to fill the collection view's height (minus section insets). This prevents vertical wrapping.
Paging Behavior
isPagingEnabled = true snaps scrolling to full-page boundaries. Set minimumLineSpacing = 0 and item size equal to collection view size for clean page transitions.
Compositional Layout (iOS 13+)
UICollectionViewCompositionalLayout with .orthogonalScrollingBehavior creates horizontally scrolling sections within a vertically scrolling collection view — ideal for app-store-style layouts.
In Storyboard
Common Pitfalls
- Items stacking vertically instead of scrolling: If items appear in a vertical column that scrolls horizontally, the item height is smaller than the collection view height. For a single row, make item height fill the available height.
- minimumLineSpacing vs minimumInteritemSpacing: In horizontal scroll,
minimumLineSpacingcontrols the horizontal gap between columns, andminimumInteritemSpacingcontrols the vertical gap between rows. The names are counterintuitive for horizontal layouts. - Cell size exceeding collection view bounds: If the item width exceeds the collection view width, cells overlap or disappear. Ensure item size fits within the visible area minus section insets.
- isPagingEnabled with non-zero spacing: Paging assumes each page is exactly the collection view width. Non-zero
minimumLineSpacingcauses drift over multiple pages. Set spacing to 0 or use custom snapping withtargetContentOffset. - Not hiding the scroll indicator: Horizontal carousels typically hide the scroll indicator with
showsHorizontalScrollIndicator = false. The default shows a thin bar at the bottom that looks out of place in carousel UIs.
Summary
- Set
layout.scrollDirection = .horizontalonUICollectionViewFlowLayoutfor horizontal scrolling - For a single-row carousel, make item height match the collection view height
- Enable
isPagingEnabledwith zero line spacing for full-page swipe behavior - Use
UICollectionViewCompositionalLayoutwith.orthogonalScrollingBehaviorfor modern iOS 13+ layouts minimumLineSpacingcontrols horizontal gaps in horizontal scroll direction
Related reading
- UICollectionView animate data change
- UICollectionView auto scroll to cell at IndexPath
- UICollectionView current visible cell index
- UICollectionView flowLayout not wrapping cells correctly
- UICollectionView, full width cells, allow autolayout dynamic height?
- UICollectionView inside a UITableViewCell -- dynamic height?
- UICollectionView must be initialized with a non-nil layout parameter
- UICollectionView reloadData not functioning properly in iOS 7
.png&w=3840&q=75)
Tackling System Design Interview Problems
A short course that equips you with the skills to approach system design interviews methodically.
Start the free courseNo course covers this one yet
Basis Lab writes one for you from a sentence about what you want to be able to do, then teaches it and checks you understood. Your first course is free.
Build my courseTrack what you have practised
A free account saves your progress, solutions and study plan across every problem on Codemia.
Interview Questions practice on Codemia
Over 8,000 real interview questions from top companies, searchable by company and role.