LiveCode LessonsHow To - LiveCode Mobile Tasks LiveCode Mobile TasksHow do I Develop iOS Code for Standard and Retina Devices?

How do I Develop iOS Code for Standard and Retina Devices?

This lesson describes fundamental principals to consider when developing software for iOS devices that have either standard or retina displays. Screen captures and a sample stack are provided that run on both standard and retina iPhones.

Attached Files

Introduction

The approach to developing software for both standard and retina display iOS devices depends very much on the application you are developing. It may be sufficient to develop for standard resolution and then scale the application to the retina display resolution. Other applications may rely on the retina display to provide the best user experience and may have to be scaled down to work on a standard resolution iOS device.

This lesson looks at some ways to provide functionality that displays information on both, standard and retina display iOS devices. In particular, we look at scaling fonts, button controls and graphic objects. We use a standard resolution image to highlight the quality difference between both display resolutions. In particular, diagonal and curved lines visibly take on a stronger step charactersistic in the image, as it is scaled up.

 

Note: This stack is best tested on an iPhone 4 or later.

The Application

The Application

We create a LiveCode application that allows us to probe the screen resolution, scale to logical or pixel resolution and scale controls, depending on the screen resolution.

Button Get Resolution returns the resolution of the device in a popup dialog. If this resolution is 320,480, then your device is a standard resolution iPhone and this test stack does not provide any visible functionality. If the resolution is 640,960, then the remaining buttons allow you to perform resizing operations.

Using Pixel and Logical Resolution

Using Pixel and Logical Resolution

The easiest approach to developing software for both, standard and retina iOS devices is to scale a standard resolution application to a retina resolution using the iphoneUseDeviceResolution command. Although the easiest, the information displayed on the retina display mirrors the information that is displayed on the standard resolution. Step formation occurs on all aspects of the data displayed on the stack. This inclues the buttons, the text, the graphic and the image.

The benefits of this approach are a low development effort to make your application work on both device resolutions and the reduction in resource bloat that occurs when including multiple scale image, that may be needed for standard and retina displays.

Select the button Use Pixel Resolution to test the results of this approach.

Scaling the Controls

Scaling the Controls

Scaling the controls to the appropriate resolution provides an approach that allows data to be displayed at an optimal resolutions for both the standards and retina resolution. Use the Scale Controls button to test the performance of this approach. You notice that the buttons and the text are less pixalated. The graphic also has smoother lines compared to the green test image that is scaled. In order to display the green image in an optimal retina resolution, you would have to provide an image that has the double resolution, compared to the green image that is currently displayed.

Additional Considerations

There are many ways by which to implement applications that run on standard and retina display iOS devices. The approaches shown here provide basic concepts to consider when you develop your application. There are benefits and tradeoffs in most approaches and the type of application you are developing dictates the approach that is most suitable for you.

 

Note: Apple support a particular naming convention that distinguishes between standard and retina resolution images. An image displayed at standard resolution may be called "image.png". The equivalent retina display image would be called "image@2x.png".

4 Comments

Dale Drechsler

So if you add @2x.png graphics to your "copy files" standalone settings, does IOS swap in the correct version depending on which device it's playing back? Is that what you mean by them supporting it, as that's not real clear.

Does all of this article also apply to the retina iPad?

Hanson Schmidt-Cornelius

Hi Dale,

no. LiveCode does not swap the files for you. You have to implement the code that loads the relevant files. The note about @2x.png was added to make readers aware of a convention that is already in place.

Kind Regards,

Hanson

Max Schafer

How do I do this?

is to scale a standard resolution application to a retina resolution using the iphoneUseDeviceResolution command

Is 1024 by 768 the standard or rettina resolutioin?

Hanson Schmidt-Cornelius

Hi Max,

yes iphoneUseDeviceResolution lets you switch between using the full retina resolution of the iOS device (that supports retina resolution) or simulating the resolution of non-retina iOS devices. Remember that this command is a simple and quick solution. True high resolution that utilises the retina capability is not provided with this command.

1024 X 768 is the non-retina resolution of the apple iPad. The retina resolution would be 2048 X 1536.

Kind Regards,

Hanson

Add your comment

E-Mail me when someone replies to this comment