UIScrollView with fixed contents inside

Question

my question is: In my app I want realize somethings like this using UIScrollView

A UIScrollView whit all his contents inside. But when I reached the top of the screen (or maybe the bottom of the screen) I want to anchor some contents like in the AppStore (iOS 6).

In this case the "Detail", "Review" and "Related" buttons stop scrolling and remains fixed at the top.

Anyone have any idea how to do?

Answer 1

Give your scroll view a delegate if it doesn't already have one. This would probably be your view controller.

Also give the delegate a reference to the floating view. (In the example, the floating view contains the “Dettagli”, “Recensioni”, and “Correlati” buttons, and the floating view is transparent where the triangular notch is, and the shadow is also part of the floating view.) The floating view must be a subview of the scroll view.

Save the “normal” Y coordinate of the floating view's frame in an instance variable. For example, if the delegate is a view controller, you should probably do it in viewDidLoad:

- (void)viewDidLoad {
    [super viewDidLoad];
    originalFloatingViewY = floatingView.frame.origin.y;
}

In the delegate's scrollViewDidScroll: method, check whether the scroll view has been scrolled below the top of the “normal” position of the floating view. If so, move the floating view to the top edge of the visible area:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    [self updateFloatingViewFrame];
}

- (void)updateFloatingViewFrame {
    CGPoint contentOffset = scrollView.contentOffset;

    // The floating view should be at its original position or at top of
    // the visible area, whichever is lower.
    CGFloat y = MAX(contentOffset.y, originalFloatingViewY);

    CGRect frame = floatingView.frame;
    if (y != frame.origin.y) {
        frame.origin.y = y;
        floatingView.frame = frame;
    }
}

You could also do it by subclassing UIScrollView and overriding layoutSubviews. Watch the “Advanced ScrollView Techniques” video from WWDC 2011 for more information on this technique.