Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

How to center scrollView content???

I have an imageView placed in a scrollView. I am trying to have that image be centered on the screen and have the pinch zoom expand from that center point.

Right now, the image is at the top of the screen and seems to be anchored (and the zoom expands from) to the top left corner.

I have tried using the "anchorPoint", "contentOffset", and "center" parameters to no avail. I have "anchorPoint" set in my code below, but changing those values seems to have no effect.

Can someone explain how I might achieve centering this thing?

Here is my code:

var mapView = Titanium.UI.createScrollView({
    width:320,
    height:420,
    top:0,
    left:0,
    backgroundColor:'#333',
    anchorPoint:{x:0.5,y:0.5},
    contentWidth:'auto',
    contentHeight:'auto',
    minZoomScale:0.1,
    maxZoomScale:1,
    disableBounce:true
});
function centerMap(){
    mapView.zoomScale = 0.1;
};
— asked July 28th 2010 by Todd Soligo
  • anchorpoint
  • center
  • iphone
  • mobile
  • scrollview
  • zoom
  • zoomscale
0 Comments

4 Answers

  • Intro: I have had a ton of issues with scrollView's, just search in the Q&A and you'll see many people do. I still haven't figured out how positioning scrollView's and its contents work. The contentOffset property did nothing for me as well.

    Possible Solution: As Marcus says, set the top and left properties of the image to:

        top:(Ti.Platform.displayCaps.platformHeight*0.5),
        left:(Ti.Platform.displayCaps.platformWidth*0.5),
    

    If that doesn't work, the next step would be to set the width and height properties of the imageView. The step after that would be to set the contentWidth and contentHeight of the image view to the dimensions of the image.

    Note that it has been my experience that every automatically centers for me, but I'm using Android 1.6 & Ti Mobile 1.6.1. So, I always start with no properties set, then see if setting dimensions will work, then play with the positioning properties (top, left, offset, etc) to see if anything will change using that.

    — answered April 5th 2011 by Joe iEntry
    permalink
    0 Comments
  • I'm having that exact same issue right now and omitting the top and left did not help. Did you ever solve this problem??

    — answered December 12th 2010 by ryan am
    permalink
    1 Comment
    • No, I did not. I can only get it to anchor to the top left. Please let me know if you end up finding a solution.

      — commented December 12th 2010 by Todd Soligo
  • Try adding:

    top:0,
    bottom:0
    

    That should center it in the middle vertically.

    — answered June 23rd 2011 by Rafael Cardoso
    permalink
    0 Comments
  • I think if you don't define a 'top' and a 'left' if would naturally centre itself in the middle of your screen.

    — answered September 13th 2010 by Marcus Boon
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.