Weird and unpredictable behavior by Views and Images from remote URL? - image

Question

Here is my
APP.js
var win = Ti.UI.createWindow({
navBarHidden : true,
className : 'window',
backgroundColor : "#efefef"
});
var header = Ti.UI.createView({
height : 20,
width : 303,
top : 0,
backgroundColor : "#abc"
});
win.add(header);
var scroll = Ti.UI.createScrollView({
top : 44,
bottom : 44,
layout : 'vertical'
});
win.add(scroll);
header.addEventListener('click', function(evt) {
fetch_images();
});
win.open();
function fetch_images() {
var xhr = Ti.Network.createHTTPClient({
onload : function() {
myjson = JSON.parse(this.responseText);
for ( i = 0; i < myjson.length; i++) {
Ti.API.debug(i);
var look = new looks(myjson[i])
scroll.add(look);
}
},
onerror : function(e) {
Ti.API.debug("STATUS: " + this.status);
Ti.API.debug("TEXT: " + this.responseText);
Ti.API.debug("ERROR: " + e.error);
if (Titanium.Network.online) {
alert('No reponse from server.');
} else {
alert('Please Check your Internet connectivity.');
}
},
timeout : 5000
});
xhr.open('GET', 'http://xxxxxxx.com/xxxxxxx.json?api_token=xxxxxxxx');
xhr.send();
}
function looks(image_details) {
var look_container = Ti.UI.createView({
height : 325,
width : 303,
top : 10,
layout : 'horizontal',
backgroundColor : "#cac"
});
var look_image = i.UI.createImageView({
width : 303,
top : 0,
left : 0,
right : 0,
image : image_details.image_medium
});
look_container.add(look_image);
return look_container;
}
I am about to pull my hairs from my head.
Working with this for around last 4-5 hours.
Acc. to the code Image should be something like this
But it appears like this.
Any guess whats wrong !! Any help would be grateful ??
As per the code Image should be aligned to top (0px from top). But Image is always down the line in the view and dont stick to the top... ??
-------------------------EDIT---------------------------
I editted my code to check for static JPG images
and its same even for the Images in the resources directory
check this question developer.appcelerator.com/question
code
var win = Ti.UI.createWindow({
navBarHidden : true,
className : 'window',
backgroundColor : "#efefef"
});
var my_container = Ti.UI.createView({
height : 325,
width : 303,
top : 30,
backgroundColor : "#cac",
layout : "horizontal"
});
var my_image = Ti.UI.createImageView({
width : '100%',
top : 0,
left : 0,
right : 0,
image : 'hello.jpg'
});
my_container.add(my_image);
win.add(my_container);
my_container.addEventListener('click', function() {
my_image.top = my_image.top - 25;
})
win.addEventListener('click', function() {
my_image.top = my_image.top + 5;
})
win.open();
and image url for the image to be used.

Answer 1

The problem is not the layout properties, it is image scaling! Note first that you are passing a larger image than the view, so Titanium does some scaling under the sheets.
So when you define the width of that ImageView, if the image you pass is bigger than the view, Titanium scales it using its own mechanism, which obviously, is not what you want, since it has been causing you to tear your hair out the past few days. I believe they scale images from the bottom up, causing your weird problem.
To fix this, you need to take control of the image scaling from Titanium, and pass a new, resized image
To do this, we need to get the original height and width of the image, to preserve the aspect ratio, then figure out a new size, resize the image, and pass it to the imageView.
To get the height and width of the image you kind of have to hack around a bit, here is how I did it with SDK 2.1.1.GA:
Get Height and Width of a Blob / Image
// Load the image as a blob to get height information
var imageFile = Ti.Filesystem.getFile('hello.png');
var blobOfImage = imageFile.read();
// Put it in a imageView, since It wont let me get height from a blob for some reason
var imageView1 = Titanium.UI.createImageView({
image: blobOfImage,
width: 'auto',
height: 'auto',
});
// This is the important part, toImage this view and you get the height and width of this image
// For some reason we cant get this from a Blob in SDK 2.1.1.GA
var heightOfImage = imageView1.toImage().height;
var widthOfImage = imageView1.toImage().width;
Now we calculate the aspect ratio for the width (screen size for iPhone of 320).
Aspect Ratio
var aspectRatio = heightOfImage / widthOfImage;
And now we can create the new resized image in the imageview.
New Image!
var my_container = Ti.UI.createView({
height : 325,
width : 303,
top : 30,
backgroundColor : "#cac",
layout : "horizontal"
});
var my_image = Ti.UI.createImageView({
top : 0,
left : 0,
right : 0,
image : blobOfImage.imageAsResized(320, 320*aspectRatio) // Note the resize call to the image blob
});
Here is the final output :
So I guess the lesson is dont trust Titanium to scale your images for you.