Startup view for iPad/iPhone with Titanium

Question

I am building an app with Titanium, where I load a big remote xml file on startup. It shows the usual Default.png splash screen, and then gets to the window, where it says that it's loading. But what I want to do, is to make the splash screen stick until the xml is fully loaded.

Now my approach for this is quite simple, I create an imageView at the start, with the Default.png as the image like so:

var startupView =Titanium.UI.createImageView({
image: 'iphone/Default-Portrait.png',
opacity:1,
zIndex:2
});

and once the xhr.onload function is triggered (meaning the xml file is fully loaded), I fade out this startup view by doing:

var startupAnimation = Titanium.UI.createAnimation({
curve:Ti.UI.ANIMATION_CURVE_EASE_OUT,
opacity:0,
delay: 0,
duration:300
});
startupView.animate(startupAnimation);

This works fine and all, but the problem I have is, that there are different splash screen sizes for different platforms. And so far the app I am creating works well on both platforms. On the ipad the screen is obviously bigger, on the iphone 4, the retina display is also bigger compared to iphone 3gs etc. Therefor I need to come up with something to make this code work nice everywhere.

I tried to check with if (Titanium.Platform.osname == "iphone") { and load the smaller size splash screen for the iphone into the imageview, but somehow it's not the same as the "real" splash screen underneath it. Because of this, the user sees that the initial splash screen and the faked splash screen is shifting. It seems like the default splash screen loaded by titanium is not the same as Default.png, but it's the Default-Portrait.png (which should only be used for the ipad)

I have no idea whether this all is clear, and whether someone here can think with me, but any ideas would be greatly appreciated.

Jeff Bonnes Jeff Bonnes · Accepted Answer · 2011-07-10T04:45:29

I have done the same thing with a Titanium iPad app. I found that I needed to create my own 'Splash Screen' image without the top 20px where the status bar would be. Because titanium apps can start full screen, the Default-Portrait.png assumes it could be full screen. When you add Default-Portrait.png view in a non-fullscreen app, it shifts it down 20px and you get that 'shifting' effect to the user.

Since you are running on iPhone and iPad, you will probably need to create new splash screens for iPad and iPhone. I would think that you could use the iPhone 4 'fake' image for non retina displays as well and let titanium handle the resizing.

Startup view for iPad/iPhone with Titanium

1 Answers