UI: Orientation

Studio

UI: Orientation

1. Introduction

Download the completed project.

In this video we'll be looking at how to make a user interface react to changes in device orientation.

We'll cover the Accelerometer node and how it can be used to activates states whenever the orientation of a device changes.

In the completed example, the UI elements rotate so that they're upright regardless of the device's orientation.

Using the Accelerometer node, we will update the appearance of a simple UI. The UI in question comes from a previous tutorial where it can be downloaded.

2. Device Orientation

Before we begin, it's important to point out that Zappar's native coordinate systems are arranged in landscape.

For devices that have a dominant portrait orientation (such as the iPhone) landscape is defined such that the bottom of the device is on the right hand side.

It's good practice to consider device orientation from the start of a given project and plan the user interface accordingly.

Many devices don't have a dominant orientation (such as the iPad) and the user may be most comfortable in an orientation that hasn't been anticipated.

3. Accelerometer Node

In our project we already have an Accelerometer node in the Hierarchy.

The default templates for new projects and screen symbols contain an Accelerometer node by default, but one can be easily added by right-clicking on the root node and selecting New > Accelerometer.

Selecting the Accelerometer node in our Hierarchy exposes a list of 4 states that will be activated whenever the orientation of a device changes, they are as follows:

  • landscape - the default orientation
  • portrait - rotated 90 degrees clockwise from landscape
  • landscapeinverted - rotated 180 degreed from landscape
  • portraitinverted - rotated 180 degrees from portrait

4. Orientation States

The existing Accelerometer node comes with two states already defined, landscape and portrait. These are the two states in the orientation controller in the Controllers panel, created for you when you create a new blank project or screen symbol.

At the moment these states are just empty templates and as such have no effect when we click between them.

5. Defining Portrait Behaviour

Since we've already set up our UI in the default landscape orientation, we'll be focusing on how we want our UI to look in portrait orientation.

For the sake of simplicity, we are just going to rotate our UI objects 90 degrees clockwise to keep them upright in portrait.

To do this we need to select our portrait state, add the rotation property of one our UI elements, set it's Z rotation to 90, then do the same to our other UI elements.

Once complete we can see the UI elements rotate when switching between the landscape and portrait states.

6. 3D View Orientation Switch

To make it more comfortable to build portrait UI, we can use the switch at the top of the 3D View to change to the portrait orientation.

This switch mimics rotating the device and can be used with the Accelerometer node to preview how the UI will look when the device is in portrait or landscape based orientations.

Note that we still need to have our portrait state selected, as changing the 3D View to portrait orientation does not automatically do this for us.

7. Previewing

We can now preview this on a device by hitting the preview button, scanning our preview code, and rotating our device from portrait to landscape.

8. Further Customisation

This simple rotation animation could be further customised by creating a timeline between the landscape and portrait states. For more information on timelines why not take a look at our tutorial video and accompanying getting started article.

The 'Device Orientation #2' Template is a great example of this being implemented and can be accessed by creating a new project and selecting the 'Example: Device Orientation #2' template.

9. Accelerometer Events

Finally, in addition to activating states, Accelerometer nodes can trigger events when the device orientation changes. These can be added beneath an Accelerometer node by right-clicking on it in the Hierarchy and selecting New > Script then an orientation event.

Accelerometer nodes with event handlers will still activate any states set in the node's properties.

10. Next Steps

Download the completed project.

That completes our video on modifying a simple UI to respond to changes in orientation.

We hope this video was helpful, feel free to take a look at our documentation for further articles regarding Coordinate Systems and Device Orientation, as well as our reference materials.

If you have any issues get in touch, we're support@zappar.com.

Open in new window