Students
Students get a Tuts+ subscription for just $45! Hurry limited offer.
Advertisement

Titanium Mobile: Create a Sliding Menu for iOS

by

This tutorial will teach you how to build a sliding menu similar to the one featured in the Facebook application using Titanium Mobile.


Step 1: Getting Started

The sliding menu consists of a full-sized window (the main window) on top of a smaller one that contains a table view (the menu). To create the sliding effect, we'll have to trigger an animation that will track and follow a touch event horizontally. However, let's save that for later. For now, we'll start by setting up the windows.

First, we'll create the menu:

This is a very basic table view setup, but it will do. So you should now have something like the following:


Step 2: Main Window

Now we need a window with a navigation bar and a button in it that will allow us to open the menu with an animation. So, in order to achieve this, we actually need two windows: one containing a navigationGroup (indispensable in order to have a navigation bar) and another one that is in the navigationGroup:

Hey, you probably noticed that toggle:true property in our button, right? It doesn't really exist; it's a custom property that I added. You can pretty much name it however you want or even create a variable for it (like var toggle = true;) if it makes you feel more comfortable. However, I recommend you use this little trick because it is really handy when you have a lot of custom properties in your app.

Here is our main window:


Step 3: Toggle Menu

Okay, now we're going to animate our window so it slides from left to right when we press the "Menu" button.

Let's see how it works:

You see that when we click the button, we call function(e), where e is our object (the button). By calling e.source.toggle, we are checking the custom "toggle" property discussed above (you can also use menuButton.toggle, it's the same thing). If it is false, we're moving our window to the right and switching the property to true. So, of course, if it's true, the window goes back to normal and our property is then set to false again.

The curve:Ti.UI.ANIMATION_CURVE_EASE_IN_OUT is just a way to smooth the animation.


Step 4: Tracking

Yeah, this is looking pretty neat, right? But that was the easy part, because now we are getting serious! We'll track a touch event so that we can reveal the menu by moving the main window horizontally. But before that, we'll add some custom properties:

Again, you can name these properties however you want, or you can even create dedicated variables for them, but I strogly recommend you use this method because it saves memory and it is easier to read than a bunch of variables scattered over your nice file.

Now we're going to use the touchstart event to get the position of our finger when it touches the screen:

Here we take the horizontal coordinate (e.x) of our event, parse it as an integer, and then save it in our custom property axis.

Next we are going to animate the window depending on the position of our finger:

To prevent the window from moving everytime we touch it, we are waiting for a movement over 20 pixels before animating. We track our touch coordinate with e.globalPoint.x and subtract it to our starting point (axis) so we can move the window. Also, it can not slide beyond the menu width (150 pixels) or beyond the left side of the screen.


Step 5: Back to Normal

If you try to run your app, you'll see that your window will stay exactly where you leave it. That's not what we want. We need to reposition it when the touch event is over, so it will open/close itself depending on where it is:

When our finger no longer touches the screen, the touchend event is fired, so we can adjust the position of our window.


Conclusion

We're done! As you see, we used a very basic animation and math to achieve a great and professional effect. I really hope you enjoyed this tutorial and learned a few new tricks!

Advertisement