Question

I’m creating an application Appcelerator Titanium which as an external background image (wood with carved out brand on it). On top of it I have custom table view etc.. when aren’t 100% wide so you can still see the background image. it gives you the impression you’re working on some sort of a table.

It’s a tabbed application. I’m setting it like so:

var tabGroup = Titanium.UI.createTabGroup();

var win = Titanium.UI.createWindow({  
    title: "My super app",
    backgroundImage: 'img/background.png',
    navBarHidden: true,
    tabBarHidden: true
});

var tab = Titanium.UI.createTab({  
    title: "Tab 1",
    window: win
});

What I want to do is to be able to keep the same background image throughout all views when changing and animating between them. I want this image to stick.

Then I’ve got an external file I’m animating to. let’s say it’s called external.js

Inside I’m using something like this:

var win = Titanium.UI.currentWindow;

The problem is, by default the new view is white and even when I’m setting the background image again it doesn’t do the trick since when I’m animating to that new view the background “slides” as well.

So my question: is there a way to keep the same background image when navigating between views or tabs?

Answer 1

What you are trying to is actually quite simple, but will require you to rewrite your code and take a different approach.

The best way to do this is to have 1 window. Set your background image on that window, and create multiple views which will hold your different pages of content. Create a scrollableView with the dimensions that you want your content constrained too, and set the views property to an array containing each of your previously created views. This will give you an animated approach to sliding through each view. Additionally, if you still want the tabs, you can create them manually with the button object and just set the click eventListener to change the scrollToIndex value on the scrollable view.