Question

I have a scrollview that always shows three items. I need the middle item to be big, and the items on the left and the right to be small.

My question is, how can I detect a paging swipe? What I was planning on doing is everytime the scrollview has been “paged”, we detect it then check all the items in the scrollview – if the item is in the middle “frame” we make it bigger, otherwise it is smaller.

Am I going about this the best way?

Answer 1

You need to have a delegate on your UITableView that accepts the scrollViewDidScroll: message (or perhaps scrollViewDidEndDecelerating:, depending on your needs). See the UITableViewDelegate documentation.

I do this kind of check inside scrollViewDidScroll. I check the current content offset, and if the rectangle formed by the current offset and the size of the scroll view frame are suitably intersecting with one of my scroll view pages, then I have that page update. Here, you might want to scale each item proportionally to how close it is to the center of the current content offset (which would create a nice dock style magnification effect for your scroller).

Edit: So, hypothetical untested pseudocode for an array of “items” in a scroller that pages horizontally.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
  CGPoint *currentOffset = scrollView.contentOffset;

  for (UIView *item in itemsToDisplay)
  {
    // The location in the entire scroll view canvas at which
    // we consider this item to "live"
    CGPoint *naturalCentre = item.naturalCentre;

    // How far from our desired point are we?
    CGFloat scale = 100 - fabs(naturalCentre.x - contentOffset.x);
    // Clamp this to positive values only, and normalize from 0.5 to 1
    scale = 0.5 + (scale < 0 : 0 ? (scale / 200));

    // Scale this view accordingly
    item.layer.contentsScale = scale;
  }
}

That’s written off the cuff, and will need rather a lot of debugging.