Appcelerator Titanium offers many ways to style the navigation bar for iOS apps, from changing out the title view all together, or just using simple colors. However, one of the most frequent requests I hear is how to make a truly transparent NavigationBar. This tutorial will cover that.
Lets start with a pretty simple window style in the app.tss. This will ensure that the window style is applied globally.
Note: This can be used in a specific controller
*.tssfile if you only want this effect on a particular window.
//app.tss
"Window": {
backgroundColor:"white",
}
Now in the index XML and JS, lets create the View structure to support a navigation window.
<!-- index.xml -->
<Alloy>
<NavigationWindow>
<Window title="Axway" class="container">
<Label onClick='openWin'>Hello World</Label>
</Window>
</NavigationWindow>
</Alloy>
And then we'll add the necessary JS code to tie it all together.
// index.js
// Open the NavigationWindow (with included main window)
$.index.open();
// Label click event function for opening a new window.
function openWin(e){
var win = Ti.UI.createWindow();
$.index.openWindow(win);
}
This creates a nice simple window with a gray-ish navigation bar and window with a white background and a typical Hello World label. While "nice", this isn't what we are going for.
Now open up your favorite image creator (photoshop, pixelmator, paint etc) and create an image 65px x 5px - make sure it is transparent and then save it to your app\assets\images folder. I'll call mine transparent-nav-bar.png. We can now update our app.tss entry for Window to look like this:
'Window': {
backgroundColor:"white",
barImage:'/images/transparent-nav-bar.png',
shadowImage:'/images/transparent-nav-bar.png',
}
Notice that we're suing the same image for barImage, the navigation bar background image AND shadowImage the underlying drop shadow image property for the navigation bar. You need to override both for the effect to work properly.
If you rebuild your app (or have LiveView enabled) at this point, you'll see a black bar at the top. Yeah! Its transparent... but not quite what we want right? That's ok, just one more step.
In order for the window to actually extend up below the navigation bar, we have to extend the edges of the window. This is again, very easy to do in the TSS.
//app.tss
'Window': {
backgroundColor:"white",
barImage:'/images/transparent-nav-bar.png',
shadowImage:'/images/transparent-nav-bar.png',
extendEdges: Titanium.UI.EXTEND_EDGE_TOP,
translucent: false,
includeOpaqueBars:true
}
In the update to the TSS file, we've added a few new properties and set them accordingly.
extendEdges- Tells the Window to extend the top edge below the navigation bartranslucent- We set this to false so that we can extend when using opaque barImageincludeOpaqueBars- Needed if you set translucent to false.
Now when you run the app, you should see that you have a white window, with the Title just floating there - pretty cool right? If you click on Hello World label, a new window will open and the back button will work just as you expect.
All in all an easy way to get a great effect for your app!