Titanium Community Questions & Answer Archive

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

resize image on rotation HELP!

I need my images to change sizes depending on how the iPad is oriented. If I set the width and height to auto, it looks good on portrait mode, but when I flip to lanscape, the image is too big. I tried to change the size with the 'orientationchange' event, but is not working.(this is the detail view of a splitview) here is the example:

var win = Ti.UI.createWindow({title:'What Ever',backgroundColor:'#ccc'});
var image = Ti.UI.createImageView({url:'images/WhatEver.png'});

Ti.Gesture.addEventListener('orientationchange',function(j){
    if (j.orientation == 4 || j.orientation == 3) {
        image.width = 700;
    } else {
        image.width = 'auto';
    }
    Ti.API.info("Orientation Number: "+j.orientation);

});

I've looked through the other questions and found nothing to solve this. Any ideas?????
thanks.

— asked June 12th 2010 by pedro enrique
  • image
  • orientation
  • resize
  • rotation
0 Comments

4 Answers

  • I have the same problem. Trying to get something like the Photos app.
    In fact (I have tried with a backgroundColor to see things change), the imageView itself changes its dimensions (the backgroundColor expands) but the image itself doesn't change.
    This is a nightmare.

    — answered August 27th 2010 by Jérôme Danthinne
    permalink
    0 Comments
  • Helloooo! is anybody there!?

    can some tell me why this isn't working?

    — answered June 20th 2010 by pedro enrique
    permalink
    0 Comments
  • There is a simple method: reasign image property AFTER modify imageView size. The image will fit in new size of view.

    Example: if you have an 320x240 image you can double its size with:

    myImage.width = '640';
    myImage.height = '480';
    
    myImage.image = myImage.image; // it makes the trick
    

    To change image with rotation I use 2 images with "_landscape" and "_portrait" suffix:

    Ti.Gesture.addEventListener('orientationchange', function(e){
        myImage.width = '1024';
        myImage.height = '768';
    
        myImage.image = myImage.image.replace('portrait', 'landscape');
    }
    
    — answered January 12th 2011 by David
    permalink
    1 Comment
    • Hi, David.
      I wonder how can I use these codes. Do I need another image resizer to help define the size of images? I am almost a green hand here. Any suggestion will be appreciated. Thanks in advance.

      Best regards,
      Arron

      — commented August 4th 2015 by arron lee
  • we are all in the same nightmare

    — answered April 24th 2011 by guellai farid
    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.