Skip navigation
This discussion is archived

UIScrollView: center content when zoomed out

11422 Views 13 Replies Latest reply: Oct 26, 2009 12:53 PM by benliong RSS
Matthias Buchetics Calculating status...
Currently Being Moderated
Oct 20, 2008 3:03 AM
Hello,
I am building an image viewer using UIScrollView and UIImageView as content. Everything works fine besides the fact that, when zoomed out, the content is shown in the top left corner of the scroll view. Instead I would like it to be shown in the center, similar to the Photos application on the iPhone.
I tried various things but could not get it to work (content mode, edge insets, ...).
Any ideas how this could be done?
MacBook, Mac OS X (10.5.2)
  • just.do.it Level 3 Level 3 (840 points)
    What about resizing the UIImageView that it won't be smaller than the UISCrollView? The UIImageView centers the image on it's own, so no need to care about.

    I'm not sure how you've implemted zooming, so i'm not sure if this works.

    Did you tried setting the contentOffset-property of the UIScrollView allready?
    MacBook Pro, Mac OS X (10.5.5)
  • iPhil_good Calculating status...
    Hi,

    It seems that the framework was not design for this.
    There's been a couple of threads on this here but no actual solution.

    If you look at the Pictures application of Apple, you will notice that even when you zoom out on an image, it will always fit the screen.

    This is, IMHO, the way it should be, and you should compute your minimum zoom factor so that the resized image (or at least the UIImageView that helds it) is never smaller than the viewport.

    Then you don't have the issue you're talking about
    MacPro 2x23" + more, Mac OS X (10.5.5), iPhone 8Gb v1 2.1, iTouch 32Gb 2.1
  • iPhil_good Level 1 Level 1 (125 points)
    This must be because your UIImageView is less than 460px height. Make sure it is always at least 460x320.

    But like any UIView, your UIImageView has a contentMode property that you can set to UIViewContentModeCenter, and your image will appear centered in your UIImageView !

    You can even set this property in Interface Builder.
    MacPro 2x23" + more, Mac OS X (10.5.5), iPhone 8Gb v1 2.1, iTouch 32Gb 2.1
  • iPhil_good Level 1 Level 1 (125 points)
    I see what you mean. I mainly deal with images smaller than the screen so I didn't face this problem before.

    I'm trying to figure out how to make it ...

    I first thought this once again was about Apple's private frameworks, but actually I have a third party application that has the exact same behavior as Pirctures (it is FileMagnet).

    But I noticed there was a bounce effect when zooming out beyond the min zoom which I can't reproduce event after checking the Bounce Zoom check box in IB ...

    I'll let you know if I manage to do something ...
    MacPro 2x23" + more, Mac OS X (10.5.5), iPhone 8Gb v1 2.1, iTouch 32Gb 2.1
  • Puppetx Calculating status...
    - (void) scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale {
    CGFloat tempx = view.center.x-160;
    CGFloat tempy = view.center.y-160;
    myScrollViewOffset = CGPointMake(tempx,tempy);
    }

    where 160 is half the width/height of your scrollview.

    later I:

    myScrollView.contentOffSet = myScrollViewOffset;

    This took me forever to figure out, but it works great
    Macbook, Mac OS X (10.5.6)
  • ThereforeITouch Calculating status...
    Currently Being Moderated
    Apr 11, 2009 8:40 AM (in response to Puppetx)
    This is really helpful. When you say "Later I", can you tell us when you actually do this? What event is it in response to, or are you usig a timer for instance.
  • ThereforeITouch Level 1 Level 1 (0 points)
    Currently Being Moderated
    Apr 11, 2009 10:38 AM (in response to Puppetx)
    This is really helpful. When you say "Later I...", can you tell us when you actually do this? What event is it in response to, or are you using a timer for instance?
  • s0urcer Calculating status...
    Currently Being Moderated
    Jun 10, 2009 1:29 PM (in response to Puppetx)
    I'm also curious about what does "Later I" mean Timer?
    MacBook, Mac OS X (10.5.5)
  • Matthew Jew1 Calculating status...
    This works for me; the thing that keeps the item centered is setting the "contentInset" property.

    - (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale
    {
    CGRect innerFrame = [view frame];
    CGRect scrollerBounds = [scrollView bounds];

    if ( ( innerFrame.size.width < scrollerBounds.size.width ) || ( innerFrame.size.height < scrollerBounds.size.height ) )
    {
    CGFloat tempx = view.center.x - ( scrollerBounds.size.width / 2 );
    CGFloat tempy = view.center.y - ( scrollerBounds.size.height / 2 );
    CGPoint myScrollViewOffset = CGPointMake( tempx, tempy);

    [scrollView setContentOffset: myScrollViewOffset];

    }

    UIEdgeInsets anEdgeInset = { 0, 0, 0, 0};
    if ( scrollerBounds.size.width > innerFrame.size.width )
    {
    anEdgeInset.left = (scrollerBounds.size.width - innerFrame.size.width) / 2;
    anEdgeInset.right = -anEdgeInset.left; // I don't know why this needs to be negative, but that's what works
    }
    if ( scrollerBounds.size.height > innerFrame.size.height )
    {
    anEdgeInset.top = (scrollerBounds.size.height - innerFrame.size.height) / 2;
    anEdgeInset.bottom = -anEdgeInset.top; // I don't know why this needs to be negative, but that's what works
    }
    scrollView.contentInset = anEdgeInset;
    }


    Using this code keep the view inside the scrollView centered when it is smaller than the scrollView.

    - Matthew
    2 x 2.8 GHz Quad-Core Intel Xeon, iPhone OS 3.0.1
  • Matthew Jew1 Level 1 Level 1 (5 points)
    Currently Being Moderated
    Sep 21, 2009 4:04 PM (in response to Matthew Jew1)
    Oops, my code got munged because of the bracket chars. Here is corrected code with no bracket issues.

    - (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale
    {
    CGRect innerFrame = view.frame;
    CGRect scrollerBounds = scrollView.bounds;

    if ( ( innerFrame.size.width < scrollerBounds.size.width ) || ( innerFrame.size.height < scrollerBounds.size.height ) )
    {
    CGFloat tempx = view.center.x - ( scrollerBounds.size.width / 2 );
    CGFloat tempy = view.center.y - ( scrollerBounds.size.height / 2 );
    CGPoint myScrollViewOffset = CGPointMake( tempx, tempy);

    scrollView.contentOffset = myScrollViewOffset;

    }

    UIEdgeInsets anEdgeInset = { 0, 0, 0, 0};
    if ( scrollerBounds.size.width > innerFrame.size.width )
    {
    anEdgeInset.left = (scrollerBounds.size.width - innerFrame.size.width) / 2;
    anEdgeInset.right = -anEdgeInset.left; // I don't know why this needs to be negative, but that's what works
    }
    if ( scrollerBounds.size.height > innerFrame.size.height )
    {
    anEdgeInset.top = (scrollerBounds.size.height - innerFrame.size.height) / 2;
    anEdgeInset.bottom = -anEdgeInset.top; // I don't know why this needs to be negative, but that's what works
    }
    scrollView.contentInset = anEdgeInset;
    }

    - Matthew
    2 x 2.8 GHz Quad-Core Intel Xeon, Mac OS X (10.5.8)
  • benliong Calculating status...
    Currently Being Moderated
    Oct 26, 2009 12:53 PM (in response to Matthew Jew1)
    Thanks Matthew Jew1. That worked perfectly.

    I am however having trouble initiating the uiview inside to be in the center at the beginning. Any ideas?
    Mac Mini, iPhone OS 3.1.2

Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Legend

  • This solved my question - 10 points
  • This helped me - 5 points
This site contains user submitted content, comments and opinions and is for informational purposes only. Apple disclaims any and all liability for the acts, omissions and conduct of any third parties in connection with or related to your use of the site. All postings and use of the content on this site are subject to the Apple Support Communities Terms of Use.