[TIMOB-10358] Android: ImageView parity for scaling behavior
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | High |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2013-03-07T18:52:35.000+0000 |
Affected Version/s | Release 2.1.0, Release 2.1.1 |
Fix Version/s | Release 3.1.0, 2013 Sprint 05 Core, 2013 Sprint 05 |
Components | Android |
Labels | core, layout, module_imageview, parity, qe-testadded |
Reporter | Vishal Duggal |
Assignee | Allen Yeung |
Created | 2012-08-08T16:38:04.000+0000 |
Updated | 2013-12-03T18:58:33.000+0000 |
Description
While testing for parity on current scaling behavior of imageViews on Android, noticed all kinds of layout issues. Basically if an image is loaded with auto width and height and then the width and height properties are specifically overwritten, setting the width and height back to auto does not return image to original dimensions. Had similar issues with IOS which were fixed as part of TIMOB-3749
IOS behavior is as follows. If either width or height of image view are set to follow SIZE behavior('auto',Ti.UI.SIZE,undefined) then the image is scaled with aspect ratio intact. Otherwise the image is scaled ignoring aspect ratio.
Test case is below
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();
https://github.com/appcelerator/titanium_mobile/pull/3937
Environment used for verification - Titanium SDK: 3.1.0.v20130311192922 Titanium Studio:3.0.2.201302151605 Device: Samung GALAXY Tab 620 Android 3.2
The fix for this issue causes a regression, images do not scale proportionally to fill the element in width or height (as iOS does) if the element dimensions are larger than the image native dimensions. Discussion here: http://developer.appcelerator.com/question/151081/android-sdk-31-imageviews-dont-stretch-and-keep-ratio-anymore#comment-177858