Can't load a backgroundImage after creating a view in iPhone

You must Login before you can answer or comment on any questions.

Well, this time is not that self explanatory...

When I create a view in iPhone, if I try to set an image as background after creating the view the image doesn't appear anywhere but in android it runs perfectly (finally I'm stuck with something in iphone, haha!) so my question is:

Do I have to set the backgroundImage property of the view when I create it or there is a way to load the backgroundImage after create the view?

Here is the code if you want to try:

var win = Ti.UI.createWindow({
    backgroundColor: '#FFFFFF',
});
 
var view = Ti.UI.createView({
});
 
view.backgroundImage = "http://2.bp.blogspot.com/_gNIKCMq4FVI/TKkEldbN0DI/AAAAAAAABcg/4DDNcETE_d0/s1600/ultimasnoticias.jpg";
win.add(view);
win.open();
I checked that I have Internet connection with the simulator

And as always here is my sanctuary :)

  • MacBook Pro with Mac OsX Leopard 10.6.8
  • Titanium SDK 1.8.0.1
  • Xcode 3.2.6 with iPhone SDK 4.3
  • Titanium Studio: 1.0.9.201202091730

Code strong.

4 Answers

Accepted Answer

try it...

var win = Ti.UI.createWindow({
    backgroundColor : '#FFFFFF',
});
 
var view = Ti.UI.createView({
});
var xhr = Ti.Network.createHTTPClient();
xhr.onload = function() {
 
    if(this.status == 200) {
 
        // cache XML        
        var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory,'myImage.jpg')
        f.write(this.responseData);
        view.backgroundImage =Ti.Filesystem.applicationDataDirectory + 'myImage.jpg';
    } else {
 
    }
};
 
xhr.open("GET", "http://2.bp.blogspot.com/_gNIKCMq4FVI/TKkEldbN0DI/AAAAAAAABcg/4DDNcETE_d0/s1600/ultimasnoticias.jpg");
xhr.send();
 
win.add(view);
win.open();

Try using a local file, downloading the image first before setting it, or creating an imageView inside of the view to display the image. View backgrounds cannot be remote images

what about using an ImageView instead of just a View?

I experienced the same issue in my previous project. Here's a workaround:

function bgImage(url) {
    return Ti.UI.createImageView({image: url}).toBlob();    
}
 
var win = Ti.UI.createWindow({
    backgroundColor: '#FFFFFF',
});
 
var view = Ti.UI.createView({
});
 
view.backgroundImage = bgImage('http://2.bp.blogspot.com/_gNIKCMq4FVI/TKkEldbN0DI/AAAAAAAABcg/4DDNcETE_d0/s1600/ultimasnoticias.jpg');
win.add(view);
win.open();
Basically i use ImageView to fetch image from a remote url, then use blob content for view's backgroudImage.

Hope this helps,

Minh

— answered 2 years ago by Minh Nguyen
answer permalink
3 Comments
  • Thanks for the help. The idea is great but it throws an exception and make the app crashes

    — commented 2 years ago by Juan Manuel Pedraza

  • What Ti SDK are you using? I tested with SDK 1.8.1.

    — commented 2 years ago by Minh Nguyen

  • Mine is the SDK 1.8.0.1, 1.8.1 throws a ton of exceptions when scrolling a scrollview and I use them constantly.

    — commented 2 years ago by Juan Manuel Pedraza

Your Answer

Think you can help? Login to answer this question!