Corona SDK Quick Tip: View Transitions

Although some applications can completely perform in a single view, most of the time you’ll need more than one screen or view to display your app content. In this tutorial, you’ll learn how to create and switch between different views using Corona.

Application Overview

Using the Corona display class and the transition.from() method, we’ll add some images to stage and switch between them. You will also learn more about Tables and Functions as well as Groups, which are containers for display objects.

The transition will be called by a Tap event.

Select Target Device

The first thing you have to do is select the platform you want to run your app, this way you’ll be able to choose the size for the images you will use.

The iOS platform has these characteristics:

• iPad: 1024x768px, 132 ppi
• iPhone/iPod Touch: 320x480px, 163 ppi
• iPhone 4: 960x640px, 326 ppi

Because Android is an open platform, there are many different devices and resolutions. A few of the more common screen characteristics are:

• Nexus One: 480x800px, 254 ppi
• Droid: 854x480px, 265 ppi
• HTC Legend: 320x480px, 180 ppi

In this tutorial we’ll be focusing on the iOS platform, specifically developing for distribution to an iPhone/iPod touch.

Interface

We’ll create a clean interface featuring three images, the first one will be a single image containing the background and a button graphic. The rest of the images will follow the same concept but they will be added separately to show you how to use Groups. This is very helpfull when you need to change a view full of buttons, texts, images, etc.

Exporting PNG’s

Depending on the device you have selected you may need to export the graphics in the recommended PPI, you can do that in your favorite image editor.

I used the Adjust Size function in the Preview app in Mac OS X.

Remember to give the images a descriptive name and to save them in your project folder.

Code!

Time to write our application!

Open your preferred Lua editor (any Text Editor will work, but you won’t have syntax highlighting) and prepare to write your awesome app.

Hide Status Bar

First, we hide the status bar, this is the bar on top of the screen that shows the time, signal, and other indicators.

display.setStatusBar(display.HiddenStatusBar)

Add Default View

Now we add the first view, this will be the image with the green title.

defaultView = display.newImage('defaultView.png')

This line creates the global variable defaultView and uses the display API to add the specified image to the stage. By default, the image is added to 0,0 using the top left corner as the reference point.

Store Last View

The following variable will store the last tapped view in order to determine which view should be shown next. It also will be used to remove the view when it is no longer visible.

lastView = {}

Swap Views Function

The next function is very important because it handles the direction of the new view transtion. This is also a new type of function that we haven’t used before in the Corona series: a parameter based function. Don’t worry though, parameter based functions are pretty simple, especially if you know any other programming language. Let’s take a look:

local function swapViews(current, new, from)
	lastView = current
	if(from == 'down') then
		transition.from(new, {y = new.height * 2, onComplete = removeLastView})
	elseif(from == 'up') then
		transition.from(new, {y = -new.height, onComplete = removeLastView})
	elseif(from == 'left') then
		transition.from(new, {x = -new.width * 2, onComplete = removeLastView})
	elseif(from == 'right') then
		transition.from(new, {x = new.width * 2, onComplete = removeLastView})
	end
end

It has three parameters:

• current: The view that you are swaping, the active view
• new: The view that will be shown after the transition is complete
• from: The new view will be animated from this direction to the screen, options are: up, down, left, right

When the transition is complete, the removeLastView function will be called.

Remove Last View

This function deletes the view that was previously swapped.

removeLastView = {}
function removeLastView()
	lastView:removeSelf() -- here we use the lastView variable
end

Change View Variables

This lines declare some variables used in the next function.

local modes = {'up', 'down', 'left', 'right'} -- the four available modes for animation
local changeView = {} -- declares the next function
local changed = false -- checks if the view has been swapped

Change View Function

This function is executed when the user taps the screen.

It detects the current screen and calls the swapViews function using the parameters determined by the changed variable. The code creates the Group object and adds the corresponding view and its listener. It also selects a random transition direction from the mode table.

function changeView:tap(e)
	if(changed == false) then
		secondView = display.newGroup()
		bg = display.newImage('secondViewBg.png')
		button = display.newImage('button.png', 40, 223)
		secondView.insert(secondView, bg)
		secondView.insert(secondView, button)
		secondView:addEventListener('tap', changeView)
		swapViews(defaultView, secondView, modes[math.random(1, 4)])
		changed = true
	else
		defaultView = display.newImage('defaultView.png')
		defaultView:addEventListener('tap', changeView)
		swapViews(secondView, defaultView, modes[math.random(1, 4)])
		changed = false
	end
end

Listener

The next line adds the required listener to the screen view.

defaultView:addEventListener('tap', changeView)

Icon

If everything is working as expected, we are almost ready to build our app for device testing. Just one more thing: our application icon.

Using the graphics you created before you can create a nice and good looking icon, the icon size for the iPhone icon (non-retina) is 57x57px, but the iTunes store uses a 512x512px version, so it’s better to create your icon in this size.

It doesn’t need to have the rounded corners or the transparent glare because that will be added automatically by iTunes and iOS.

Conclusion

Now you have a useful, good looking way to change views in your applications. Try it out and add your own touch!

Thanks for reading this tutorial. I hope you’ve found it useful!