Highlighted

different aspect ratios

Participant ,
Jan 26, 2015

Copy link to clipboard

Copied

So how do you treat your different aspect ratios now we have iphone 4, 5 and 6 all different sizes?

Do you build for 4 and then have extra space and backgrounds for 5 and 6, or do you adjust your app based on the different resoltuons by detecting the res and auto adjusting and moving things?

TOPICS
Development

Views

183

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

different aspect ratios

Participant ,
Jan 26, 2015

Copy link to clipboard

Copied

So how do you treat your different aspect ratios now we have iphone 4, 5 and 6 all different sizes?

Do you build for 4 and then have extra space and backgrounds for 5 and 6, or do you adjust your app based on the different resoltuons by detecting the res and auto adjusting and moving things?

TOPICS
Development

Views

184

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 26, 2015 0
Participant ,
Jan 26, 2015

Copy link to clipboard

Copied

The answer is it's up to you. What you're asking about is a design principle called 'Fluid Layout' or 'Responsive Layout'. The idea is to design your UI so it responds to the different resolutions and/or aspect ratios of the screen it's on.

Fluid layout is the term when the app continuously adjusts itself as the window is resize ( this is more of a desktop approach since mobile is on a fixed screen size ).

Responsive layout is when the UI jumps to a specific state when dimensional threshholds are reached. So you could have 4 different layouts ( Mobile, Tablet, Desktop, Extended Desktop ) that the app can switch among depending on the screen size dimensions. In your case you may want to take the mobile layout and break it up into aspect ratios.

Responsive layout is more easy to program and recommended for people new to the principle since it's easier to think of set states instead of constant flow. But Fluid Layout is the best solution if your an advanced developer because you never have to go back in and create a new state to support new devices. The layout is always perfect no matter the screen.

How it works programmatically you usually have a listener, very high up in the program, that watches for the stage resizing and then calls a function that tells the UI to realign itself and go through all the children so they know to realign themselves. In your case you could just run that on launch because your screen size should never adjust. In some cases you should update the children first then the parents.

Hope this helps.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2015 0
Enthusiast ,
Jan 27, 2015

Copy link to clipboard

Copied

For my apps/games I mostly start with a 1024x768 stage (if landscape mode), using Flash CC. I set it to fullscreen in the AIR settings. Then I design wider backgrounds (at least 1365px) and center it so that it stretchess out on both sides of the stage. Finally I distribute elements like buttons etc. by code. I do this by finding the extra space on the sides when designing for landscape, and top/bottom if portrait mode.

This is the code:

var sW:int = stage.stageWidth;

var sH:int = stage.stageHeight;

var fW:int = stage.fullScreenWidth;

var fH:int = stage.fullScreenHeight;

var prs:Number = fH/sH * 100;

var prs2:Number = fW/sW * 100;

var pW:Number = sW/100 * prs;

var pH:Number = sH/100 * prs2;

var difW:Number = (fW-pW);

var difH:Number = (fH-pH);

var xtraSpaceWidth:int = Math.ceil((difW/2) * 100 / prs);

var xtraSpaceHeight:int = Math.ceil((difH/2) * 100 / prs2);

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 27, 2015 0
Participant ,
Feb 01, 2015

Copy link to clipboard

Copied

For iphone 4 and 5 we tend to use different background images for both screen sizes and then move buttons around to fill the space.  In some apps we have different controls appear in the 5 if there is more space.  For ipad we generally have an entirely different code path as screens can be very differently laid out and have different UI features (dropdowns as opposed to full screen pickers etc).

Bottom line it isn't always straightforward (but is easier on iphone than android)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 01, 2015 0