Ios – UICollectionView and ScrollView inside View with vertical scrolling

iosscrolluicollectionviewxcode

How can I scroll entire window with UIScrollView on top to display a image gallery, and an UICollectionView to show another items? (See the mockup bellow)

I tried this structure but only the collection view scrolls and scrollview stays on the top.

View
- UIScrollView
- UICollectionView

What control should I use to group the scrollview and collectionview to have vertical scrolling on the entire window (and the collection view to grow with it contents)?

[Mockup]
http://img835.imageshack.us/img835/3138/prototyperl.png

Best Answer

I would just use a UICollectionView and add the UIView as the header for the first section - and it would properly also be the simplest solution.

If you wrap the UICollectionView in the ScrollView and resizes the UICollectionView to fit content size you will most likely get poor performance, because all cells will be rendered when the view is shown(Not when cells are visible) - missing the point of reusable cells.

Override UICollectionViewDataSource delegate method:

-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath

Related Solutions

Ios – Continuous vertical scrolling between UICollectionView nested in UIScrollView

Figured it out!

First:

_scrollView.pagingEnabled = YES;

Second:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (scrollView == _scrollView || scrollView == _offersCollectionView) {

        CGFloat offersCollectionViewPosition = _offersCollectionView.contentOffset.y;
        CGFloat scrollViewBottomEdge = [scrollView contentOffset].y + CGRectGetHeight(scrollView.frame);

        if (scrollViewBottomEdge >= [_scrollView contentSize].height) {
            _scrollView.scrollEnabled = NO;
            _offersCollectionView.scrollEnabled = YES;
        } else if (offersCollectionViewPosition <= 0.0f && [_offersCollectionView isScrollEnabled]) {
            [_scrollView scrollRectToVisible:[_scrollView frame] animated:YES];
            _scrollView.scrollEnabled = YES;
            _offersCollectionView.scrollEnabled = NO;
        }
    }
}

Where:

_scrollView is the _outerScrollView
_offersCollectionView is the _innerScrollView (which was UICollectionView #2 in my original post).

Here's what happens now:

When I swipe up (so the view moves down), the offersCollectionView takes over the entire view, moving the other subViews out of the view.
If I swipe down (so the views up), the rest of the subviews come back into focus with the scrollView's bounce effect.

Ios – UICollectionView horizontal scroll with vertical header

You have to implement your own collection view layout to do so.

The easiest would be to subclass UICollectionViewFlowLayout and override

- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;

to give the frame you wish for the header

Best Answer

Related Solutions

Ios – Continuous vertical scrolling between UICollectionView nested in UIScrollView

Ios – UICollectionView horizontal scroll with vertical header

Related Topic