[TIMOB-15707] iOS: Left alignment for scaled images

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2014-03-17T21:08:34.000+0000
Affected Version/s	Release 3.1.3, Release 3.2.1
Fix Version/s	2014 Sprint 06, 2014 Sprint 06 SDK, Release 3.2.3, Release 3.3.0
Components	iOS
Labels	imageView, parity, qe-closed-3.2.3, qe-testadded, supportTeam
Reporter	Eduardo Gomez
Assignee	Vishal Duggal
Created	2013-11-13T19:09:48.000+0000
Updated	2015-01-27T21:27:46.000+0000

Description

Issue description

If you create an imageView of a predetermined height but do not specify the width, an image of unknown dimensions is scaled correctly to fit. If we know the exact dimensions of the image we can specify both the width and height of the image view to be proportional and the left indent is respected. However there is some misbehaviour that occurs with PNG format images that are remote. They aren't left aligned correctly in iOS. Android position this remote PNG image correctly. Screen shoot attached: ImageView_Remote_iOS_PNG_format.jpg

Test Case

var imgUrlpng = 'http://www.elpuercoespin.com.ar/images/2013/01/fifa_logo.png';
var imgUrljpg = 'http://imagenes.es.sftcdn.net/es/scrn/75000/75908/fifa-manager-09-40.jpg';

var win = Ti.UI.createWindow({backgroundColor: 'white'});
var myImage = Ti.UI.createImageView({
    left: 10,
    width: Ti.UI.SIZE,
    height: 200, 
    //local
    //image.jpg & KS_nav_views.png attached to jira 
    //image: 'image.jpg', /* iOS -> remote or local respected */
    //image: 'KS_nav_views.png'

    //remote
    //left property not respected (format PNG) - iOS
    //left property respected (format PNG) - Android
    image: imgUrlpng 

    //image: imgUrljpg //left property respected
});

// this would work:
//myImage.image = 'http://example.com/foo.png'
// set myImage.defaultImage = 'localFoo.png' to show an image while the remote one is loading
myImage.defaultImage = 'KS_nav_views.png'; // to show an image while the remote one is loading

// as would
//myImage.image = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory,'foo.png');

win.add(myImage);
win.open();

Work around

To ensure an incoming image is scaled to 23 pixels in height and is left justified by 10 pixels (both platforms), without knowing the incoming image dimensions:

var imgUrlpng = 'http://www.elpuercoespin.com.ar/images/2013/01/fifa_logo.png';
var imgUrljpg = 'http://imagenes.es.sftcdn.net/es/scrn/75000/75908/fifa-manager-09-40.jpg';

var win = Ti.UI.createWindow({backgroundColor: 'white'});

var imageTemp = Ti.UI.createImageView({
        image: imgUrlpng,
        height: Ti.UI.SIZE,
        width: Ti.UI.SIZE
    });

var imgWidth = imageTemp.toImage().width;   
var imgHeight = imageTemp.toImage().height;

var relativeWidth = 23/imgHeight * imgWidth;

var tiHeaderImage = Ti.UI.createImageView({
    image: imgUrlpng,
    height: 23,
    width: relativeWidth,
    left: 10,
    preventDefaultImage: true
});

win.add(tiHeaderImage);

win.open();

Attachments

File	Date	Size
image.jpg	2013-11-13T19:09:48.000+0000	600
ImageView_Remote_Android-2.3.5_JPG_format.png	2013-11-13T19:09:48.000+0000	21863
ImageView_Remote_Android-2.3.5_PNG_format.png	2013-11-13T19:09:48.000+0000	69708
ImageView_Remote_Android-4.0.4_JPG_format.png	2013-11-13T19:09:48.000+0000	21027
ImageView_Remote_Android-4.0.4_PNG_format.jpg.png	2013-11-13T19:09:48.000+0000	72305
ImageView_Remote_iOS_JPG_format.jpg	2013-11-13T19:09:48.000+0000	65441
ImageView_Remote_iOS_PNG_format.jpg	2013-11-13T19:09:48.000+0000	106535
KS_nav_views.png	2013-11-13T19:09:48.000+0000	1074

Comments

Vishal Duggal 2014-03-15

This has nothing to do with JPG and PNG images. Android scales images automatically to match device density based on image density. iOS does no such thing. We treat image dimensions as density independent. That is native platform behavior. The problem is that when calculating width for SIZE behavior iOS does not consider height parameter. We will fix this for ImageView if the height is specified as a fixed height (Anything other than auto, SIZE, FILL or PERCENT)

Vishal Duggal 2014-03-15

Test Case

   var win = Ti.UI.createWindow({
       backgroundColor:'#fff',
       layout:'vertical'
   });
    
   var image = Ti.UI.createImageView({ 
       image: "http://www.catravelservices.com/management/hotels/pictures/Mawamba_lodge_nature.jpg", 
       backgroundColor : "red" 
   });
    
    
   var label = Ti.UI.createLabel({
       text:'Results Here'
   })
    
   var updateLabel = function(){
       var size = image.size;
       label.text = 'ImageView size is '+size.width+'x'+size.height;
   }
    
   var controlsContainer = Ti.UI.createView({
       height:Ti.UI.SIZE
   })
    
   var widthControls = Ti.UI.createView({
       width:'50%',
       layout:'vertical',
       left:0,
       height:Ti.UI.SIZE
   })
    
   var heightControls = Ti.UI.createView({
       width:'50%',
       layout:'vertical',
       right:0,
       height:Ti.UI.SIZE
   })
    
   controlsContainer.add(widthControls);
   controlsContainer.add(heightControls);
    
   var b1 = Ti.UI.createButton({title:'WIDTH=SIZE'})
   var b2 = Ti.UI.createButton({title:'WIDTH=165'})
   var b3 = Ti.UI.createButton({title:'WIDTH=250'})
   var b4 = Ti.UI.createButton({title:'HEIGHT=SIZE'})
   var b5 = Ti.UI.createButton({title:'HEIGHT=50'})
   var b6 = Ti.UI.createButton({title:'HEIGHT=165'})
   b1.addEventListener('click',function(e){
       image.width=Ti.UI.SIZE;
       setTimeout(updateLabel,500);
   })
   b2.addEventListener('click',function(e){
       image.width=165;
       setTimeout(updateLabel,500);
   })
   b3.addEventListener('click',function(e){
       image.width=250;
       setTimeout(updateLabel,500);
   })
   b4.addEventListener('click',function(e){
       image.height=Ti.UI.SIZE;
       setTimeout(updateLabel,500);
   })
   b5.addEventListener('click',function(e){
       image.height=50;
       setTimeout(updateLabel,500);
   })
   b6.addEventListener('click',function(e){
       image.height=165;
       setTimeout(updateLabel,500);
   })
   win.add(image);
   widthControls.add(b1);
   widthControls.add(b2);
   widthControls.add(b3);
   heightControls.add(b4);
   heightControls.add(b5);
   heightControls.add(b6);
   win.add(controlsContainer);
   win.add(label)
   win.open();

Vishal Duggal 2014-03-15

Pull pending master - https://github.com/appcelerator/titanium_mobile/pull/5478 3_2_X - https://github.com/appcelerator/titanium_mobile/pull/5479
Olga Romero 2014-03-18

Tested and verified the fix with: Appcelerator Studio, build: 3.2.3.201403171239 Titanium SDK, build: 3.2.3.v20140317142455 Node.JS Version: v0.10.13 NPM Version: 1.3.2 ├── acs@1.0.14 ├── alloy@1.3.1 ├── npm@1.3.2 ├── titanium@3.2.1 └── titanium-code-processor@1.1.0 Device:iPhone5S iOS 7.0.1 Image aligned correctly in iOS

JSON Source