How to implement non-scrollable UICollectionView inside UIScrollView?

10
votes

In shorts, my desired screen layout is basically a user profile (iOS 7 + Xcode 5). I used UIScrollView as the top level view. The reason is that I want all its subviews to scroll (user info view - the view with a profile image and some buttons you see on the screen, and the photos collection view - the one with black background) when it is scrolled.

enter image description here

The region with black background will show user photos. I'm wondering if I could use a UICollectionView here, or there's a better way to implement it. The UICollectionView in this case shouldn't be able to scroll itself, it just shows all cells, while the scrolling work is handled by the outermost UIScrollView.

I read following posts:

UICollectionView inside of UIScrollView

UICollectionView in UIScrollView -> Scroll Order

iOS 7 Collection View inside Scroll View

Some said it's not possible (or at least, weird) implemeting UICollectionView inside UIScrollView because UIScrollView is UICollectionView's superclass which leads to unexpected behaviour. Some said it should be implemented in another way (but I didn't see a clear suggestion).

1
iosios7uiscrollviewuicollectionview
So you're saying you want the orange bar with the “Social Profile” label, and the fuzzy background image, and everything overlaid on the fuzzy background image, to scroll vertically off the top of the screen, and you want the black area to be filled with photos, and for more photos to appear as the screen is scrolled upward? Do you want the tab bar at the bottom to remain fixed? – rob mayoff
yes you're right, however I would like navigation bars and tab bars remain fixed :) – Thiem Nguyen

1 Answers

8
votes

Yes, you can put a UICollectionView inside a UIScrollView. iOS has fully supported nested scroll views since iOS 3.0, and UICollectionView is a subclass of UIScrollView. For example, check out the App Store app on your iOS device. The screen scrolls vertically - it's either a UIScrollView or a UITableView (which is itself a subclass of UIScrollView). And each row of icons scrolls horizontally - each row is a UICollectionView.

However, it's not clear why you need to put a collection view inside a scroll view. It sounds like you only want the photos view to scroll, so just make the photos view be a collection view. Why do you need to put the collection view inside a scroll view?

UPDATE

Just use a collection view. Set the header of section 0 to the profile info view. You don't need a scroll view.

If you put all the photos in one section, you can set up the header in your storyboard with no code. If you use multiple sections, you'll need to implement collectionView:layout:referenceSizeForHeaderInSection: in your delegate and collectionView:viewForSupplementaryElementOfKind:atIndexPath: in your data source.