Quick question.
If designing an image for a UINavigationBar do I simply design one image 320 x 64 px and then scale accordingly? So:
320 x 64 for iPhone
640 x 128 for iPhone 4/5 (and add the #2x)
960 x 192 for iPhone 6 (and add the #3x)
Something which is confusing me is the various display sizes and how large to make the images:
I've think I've got the display resolutions correct as:
iPhone 320 x 480
iPhone 4 as 640 x 960
iPhone 5 as 640 x 1334
iPhone 6 as 750 x 1334
iPhone 6 Plus as 1242 x 2208
If I don't just create one image and scale it up, do I have to create 3 images for each phone?
e.g. iPhone 4:
640 x 128 for Standard
1280 x 256 for #2x
1920 x 384 for #3x.
And then the same for all the other phones?
I'm sure that can't be correct, but somewhat confused about this at the moment.
Thanks in advance for any help.
I would not recommend scaling an image up, as this will result in a marked loss of graphical fidelity (aka. 'jaggies' or blurriness) on higher resolution devices. If anything, you should err on the side of scaling down.
Your options:
Design images for each logical coordinate space. For a navigation bar, for example, this would entail having bar backgrounds in standard, 2x and 3x sizes. More, if you wish to support navigation bars in landscape mode on an iPhone.
Note, however, there is no guarantee how wide devices even within
the same logical coordinate space (ie. iPhone 5s and iPhone 6) will display a
navigation bar, so you will probably want to use the UIImage method
resizableImageWithCapInsets: to create an image that stretches all the way across the navigation bar no matter how wide it is.
https://developer.apple.com/library/ios/documentation/uikit/reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets:
It's worth noting that if you're writing for the iPhone you could probably forgo the use of 1x images as no iPhones that use 1x images are supported any longer. On iPad, though, you still have to contend with the iPad 2 and original iPad mini.
Create a 3x image and use it for everything. Allow iOS to automatically scale it down as needed. This could introduce some graphical flaws (although not nearly as bad as scaling up, and possibly not even noticeable) and is a bit less efficient - ie. it consumes more memory and theoretically could take longer to load. This is somewhat inelegant and I wouldn't recommend it.
Your last option is to embrace the flat design principles in place since iOS 7 and simply forgo the use of detailed/textured elements when possible. As the sizes and densities of iOS device displays increase, you may find that this results in fewer headaches for both you and your designer - and it might fit better with the iOS 7+ design aesthetic.
Another thing...
I'd recommend learning about the different between points and pixels. This will help get your head around a lot of this.
https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html#//apple_ref/doc/uid/TP40010156-CH14-SW7
Basically, you don't need to design for different phones, you need to design around 3 (well, really 2 at this point) logical coordinate spaces. Through the use of resizable images as described above and - optionally - creating larger images to fill up more space on larger devices, you shouldn't really have to create more than 2-3 versions of any image.
Related
I'm new to the whole world of coding, and actionscript 3 is my first real experience, so sorry if I don't understand your answer straight away.
I've built an iPhone app using Adobe Flash CC in AIR for iOS. All the code is either in the timeline or separate .as files (so not using documents classes).
The core concept of the game is randomly generated objects fall from the top of the screen and the user has to tap them to make them disappear before they touch the bottom.
My problem is my document size is 640 x 960. I think this fits the iPhone 4 (haven't tested that) but when I test it on my iPhone 5s I get back bars at the top and bottom. Obviously they have different screen sizes but I want the app to be able to run on many all the different size iPhones.
I have spent hours googling this and still don't understand what I'm meant to do. I've tried playing around with the stage.scaleMode settings but nothing changes. I have also added a file called default-568h#2x.png (just a green rectangle with the dimensions 640 x 1136) in the included files but this doesn't show either.
So essentially I want to know how to change my app and AS3 code to allow my app to fit all the different size iPhones?
Any help would be very much appreciated.
LAUNCH IMAGES
First, before anything else, you need to make sure you have the correct launch images included in your project.
Here is a table from Adobe's website:
Default~iphone.png | iPhone 4 (non-retina) 640 x 960 Potrait
Default#2x~iphone.png | iPhone 4, 4s 640 x 960 Potrait
Default-568h#2x~iphone.png | iPhone 5, 5c, 5s 640 x 1136 Potrait
Default-375w-667h#2x~iphone.png | iPhone 6/7/8 750 x 1334 Potrait
Default-414w-736h#3x~iphone.png | iPhone 6+/7+/8+ 1242 x 2208 Potrait
Default-Landscape-414w-736h#3x~iphone.png | iPhone 6+/7+/8+ 2208 x 1242 Landscape
Default-Landscape-812h#3x~iphone.png | iPhone X 2436 x 1125 Landscape
Default-812h#3x~iphone.png | iPhone X 1125 x 2436 Portrait
Once you have those images made (and named exactly as shown), include them in your project (They have to be in the root of your application) by doing the following:
In FlashPro
go to your publish settings
go to the AIR for iOS Settings.
Go to the "General" tab
add all those images to the "included files" list (the root)
SCALING YOUR CONTENT
OPTION 1, FILL AND CROP
If you don't mind cropping your content a little bit, you can just do this when your app starts:
stage.scaleMode = StageScaleMode.NO_BORDER
This will scale your swf so it fills the whole screen while keeping aspect ratio. It's pretty easy to figure out how much padding you need to make this method work well for the small variations in aspect ratios for the various iPhones.
However, if you want to allow orientation changes (portrait to landscape), the cropping will likely be too severe.
OPTION 2 - RESPONSIVE DESIGN
The best way to accommodate varying screen resolutions and aspect ratios though, is to make your application responsive. This involves the following code at the start of your application:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
Now your stage bounds (stage.stageWidth & stage.stageHeight) will be the full width and height of the device*. (some devices still have a software toolbar at the bottom or the top band)
You can then position things through code.
If you want an easy way convert what you have (you don't want to use code to resize and align absolutely everything), just put all your content in a container MovieClip with an instance name of container, you could then size and position it like this:
//scale the container as big as possible while still fitting entirely in the screen:
//figure out which dimension should match the stage (widht or height)
if(container.width - stage.stageWidth >= container.height - stage.stageHeight){
container.width = stage.stageWidth;
container.scaleY = container.scaleX;
}else {
container.height = stage.stageHeight
container.scaleX = container.scaleY;
}
//center it on the screen:
container.x = (stage.stageWidth - container.width) * 0.5;
container.y = (stage.stageHeight - container.height) * 0.5;
It's also a good idea to listen for resize events, in case the screen size changes (eg you maximize/restore on desktop, or go from portrait to landscape on mobile).
You do that by listening for the resize event on the stage:
stage.addEventListener(Event.RESIZE, redrawScreen);
function redrawScreen(e:Event):void {
//resize everything as the window size has changed.
}
You the coder are in charge of providing different solutions for different screen sizes. You check the device size and then you present the content accordingly. All in all it is not that different from showing different content based on rotation. If you hope for a magical solution that would do all that for you in AIR you are out of luck cos there's none.
Messing with the stage scalemodes is not recommended (you should always use no scale on mobile) as you then give up completely the ability to compare the position of your displayobject according the the real physical device size (basically you won't know for sure if whatever you display is in the screen or completely out of it).
If you thought developing for mobile was easy (not just using AIR but using any technology) then sorry, it's not especially cos you have to handle all those sizes.
The basic principle on how to deal with it:
get the real device size.
calculate the real density/ratio.
Compare that size to the size of your app. (again scale mode to no scale)
Extract a general ratio (size of your app compared to size of device)
Use that ratio to either, scale and place your main container (a container that contain your entire app), hard: scale and place all your DisplayObject in your app.
Since the app ratio is maintained fill the blank space with whatever.
Your app is filling correctly the entire screen on any device.
I'm new to the whole world of coding, and actionscript 3 is my first real experience, so sorry if I don't understand your answer straight away.
I've built an iPhone app using Adobe Flash CC in AIR for iOS. All the code is either in the timeline or separate .as files (so not using documents classes).
The core concept of the game is randomly generated objects fall from the top of the screen and the user has to tap them to make them disappear before they touch the bottom.
My problem is my document size is 640 x 960. I think this fits the iPhone 4 (haven't tested that) but when I test it on my iPhone 5s I get back bars at the top and bottom. Obviously they have different screen sizes but I want the app to be able to run on many all the different size iPhones.
I have spent hours googling this and still don't understand what I'm meant to do. I've tried playing around with the stage.scaleMode settings but nothing changes. I have also added a file called default-568h#2x.png (just a green rectangle with the dimensions 640 x 1136) in the included files but this doesn't show either.
So essentially I want to know how to change my app and AS3 code to allow my app to fit all the different size iPhones?
Any help would be very much appreciated.
LAUNCH IMAGES
First, before anything else, you need to make sure you have the correct launch images included in your project.
Here is a table from Adobe's website:
Default~iphone.png | iPhone 4 (non-retina) 640 x 960 Potrait
Default#2x~iphone.png | iPhone 4, 4s 640 x 960 Potrait
Default-568h#2x~iphone.png | iPhone 5, 5c, 5s 640 x 1136 Potrait
Default-375w-667h#2x~iphone.png | iPhone 6/7/8 750 x 1334 Potrait
Default-414w-736h#3x~iphone.png | iPhone 6+/7+/8+ 1242 x 2208 Potrait
Default-Landscape-414w-736h#3x~iphone.png | iPhone 6+/7+/8+ 2208 x 1242 Landscape
Default-Landscape-812h#3x~iphone.png | iPhone X 2436 x 1125 Landscape
Default-812h#3x~iphone.png | iPhone X 1125 x 2436 Portrait
Once you have those images made (and named exactly as shown), include them in your project (They have to be in the root of your application) by doing the following:
In FlashPro
go to your publish settings
go to the AIR for iOS Settings.
Go to the "General" tab
add all those images to the "included files" list (the root)
SCALING YOUR CONTENT
OPTION 1, FILL AND CROP
If you don't mind cropping your content a little bit, you can just do this when your app starts:
stage.scaleMode = StageScaleMode.NO_BORDER
This will scale your swf so it fills the whole screen while keeping aspect ratio. It's pretty easy to figure out how much padding you need to make this method work well for the small variations in aspect ratios for the various iPhones.
However, if you want to allow orientation changes (portrait to landscape), the cropping will likely be too severe.
OPTION 2 - RESPONSIVE DESIGN
The best way to accommodate varying screen resolutions and aspect ratios though, is to make your application responsive. This involves the following code at the start of your application:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
Now your stage bounds (stage.stageWidth & stage.stageHeight) will be the full width and height of the device*. (some devices still have a software toolbar at the bottom or the top band)
You can then position things through code.
If you want an easy way convert what you have (you don't want to use code to resize and align absolutely everything), just put all your content in a container MovieClip with an instance name of container, you could then size and position it like this:
//scale the container as big as possible while still fitting entirely in the screen:
//figure out which dimension should match the stage (widht or height)
if(container.width - stage.stageWidth >= container.height - stage.stageHeight){
container.width = stage.stageWidth;
container.scaleY = container.scaleX;
}else {
container.height = stage.stageHeight
container.scaleX = container.scaleY;
}
//center it on the screen:
container.x = (stage.stageWidth - container.width) * 0.5;
container.y = (stage.stageHeight - container.height) * 0.5;
It's also a good idea to listen for resize events, in case the screen size changes (eg you maximize/restore on desktop, or go from portrait to landscape on mobile).
You do that by listening for the resize event on the stage:
stage.addEventListener(Event.RESIZE, redrawScreen);
function redrawScreen(e:Event):void {
//resize everything as the window size has changed.
}
You the coder are in charge of providing different solutions for different screen sizes. You check the device size and then you present the content accordingly. All in all it is not that different from showing different content based on rotation. If you hope for a magical solution that would do all that for you in AIR you are out of luck cos there's none.
Messing with the stage scalemodes is not recommended (you should always use no scale on mobile) as you then give up completely the ability to compare the position of your displayobject according the the real physical device size (basically you won't know for sure if whatever you display is in the screen or completely out of it).
If you thought developing for mobile was easy (not just using AIR but using any technology) then sorry, it's not especially cos you have to handle all those sizes.
The basic principle on how to deal with it:
get the real device size.
calculate the real density/ratio.
Compare that size to the size of your app. (again scale mode to no scale)
Extract a general ratio (size of your app compared to size of device)
Use that ratio to either, scale and place your main container (a container that contain your entire app), hard: scale and place all your DisplayObject in your app.
Since the app ratio is maintained fill the blank space with whatever.
Your app is filling correctly the entire screen on any device.
Since the induction of 6 and 6 plus its the first time I'm starting to work on a new app. Now I'm a bit confused about the use of graphical assets for my app. See for 5/5S things were pretty simple. If I have to make an image view of lets say 180 x 30 points then my image would of 2x resolution that would be 360 x 60 and would fit pretty good inside my image view. Now since 6 and 6 plus have different screen sizes than 5/5S and different resolutions, what is the recommendation here. Should I keep the image view size same on all three devices that is 180 x 30 points. If so, what image resolutions should I be using for the 3 different devices. It would be 2x for 5/5S but what about 6 and 6 Plus and how will Xcode determine to load those automatically? Or should I use different image view size that is larger than 180 x 30 for 6 and 6 plus? Im confused here that how this all works. Help is highly appreciated. Thanks
So your image view size should always be the same amount of points on the phone. Your image will be in the assets and will be different based on the device.
So if on the non retina screen you had 180x30 and on the 5s retina you used 360x60, you would keep the same 2x(360x60) for the 6 and then 3x for the 6+(540x90)
Just add the images to your assets in the correct buckets and it should be taken care of for you.
You should keep your image view point sizes the same but you should add a new pixel resolution for all of your images (3x) which will be used for the 6+. Although the 6+ is slightly less than exactly 3x resolution, the OS does some scaling so that you can just give a 3x image and it will work correctly.
A couple of Xcode versions ago Apple added asset catalogs that make it incredibly easy to manage having multiple resolutions. Just simply drag the correct images into their correct resolution bucket and it will work automagically. Much simpler than having to append #2x and #3x to all of your images like in older versions.
The apple guides haven't helped me too much with this but I am starting to get serious about IOS development and was taken aback when I saw images go from #1x to #3x.
One source I found said they were based on sizes. For example:
If you are working on an inferred VC size and your image is 30x30 and you run that on a iPhone6 then your image should be 30x30 for #3x, 20x20 for #2x, and 10x10 for #1x.
Another source I said mentioned that it was based off the images resolution and not the size of the image.
Could someone clear this up for me and explain how to make sure my images look professional for all screens?
Thanks in advance!
When the first iPhone (and SDK) came out, all images were 1x (1 pixel of the image = 1 pixel of the screen), because that's all we had to care about. On that phone there were 166 horizontal or vertical pixels per inch (dpi). So to display an image that stretched from the left edge to the right edge, our image would need to be 320 wide (because that's what Apple told us - we didn't have to count pixels) by whatever height we wanted. Let's say 100 pixels tall. We'd name that image MyPhoto.png (because Apple told us the iPhone OS worked best with PNG images) and we'd display it.
When the iPhone 4 came out with the retina display, its retina display had 2 times the horizontal and 2 times the vertical resolution of the older phones. So now we needed higher resolution images to get the best looking interface. We were still displaying just a 2" wide image, but it would need twice the number of horizontal pixels and twice the number of vertical pixels (4 times the total number of pixels) to fill the same space. So now our image needs to be 640 pixels by 200 pixels. Since our app would still need to support the older phones as well as the new phones, we didn't want to just replace the old image with the new one. We needed a way to support both. So the old images kept the same name they had before (we didn't append "#1x") and the new images got the "#2x" filename extension to indicate they were twice the resolution. So we'd name this larger image MyPhoto#2x.png.
A common question is why not use just the higher resolution images on both old and new phones? With scaling, both appear to work great. The problem primarily is that the iPhone, especially the older phones, had very limited memory to work with. Using images that are 4 times larger than they need to be is really hard on that limited memory. That's why we had to have both 1x and 2x images in our apps.
For our sanity, we would still just use 1x while designing the interfaces. So screens remained 320 pixels wide in our code, even if we were going to display them on a retina display that was 640 pixels wide. If we wanted to draw a 1 pixel wide line on the retinal display, we'd make it half a pixel wide in our code.
With the larger screen of the iPhone 6 Plus, Apple had to pack even more pixels on the screen to maintain the high resolution customers came to expect. So now we're into 3x images. However, the iPhone 6 Plus doesn't really have three times the number of horizontal or vertical pixels. But again Apple has kept us sane by just asking us to supply "#3x" images, and it worries about scaling them down a bit on the device. As before, we still need to support smaller screen resolutions too, so we still include "#2x" and the 1x images in our apps.
So, to continue our example, the #3x image would need to be three times the width and height of the 1x image. So now we need a 960 wide by 300 pixel tall image. We'd name it MyPhoto#3x.png.
Notice that although I mentioned earlier something about a 166 dpi display, that's not really important when creating these images. In your photo editing app you don't really care if the image is 166 or 72 dpi or anything else. The only important part is the number of pixels in width and height of the final image we export.
So to answer your question (hopefully), you'll want to include all three of these images in your iPhone compatible apps. You can skip the #3x image for iPad-only apps, because there's no 3x screen yet for the iPad. But continue to think only in the 1x size when working in Interface Builder and code.
For example, now to display a 1 pixel wide line on the iPhone 6 Plus, you'd draw a 0.33 wide line rather than a 1 point line. Of course, you still want to support all of the other screen resolutions too, so you'd use code like this to set your line width:
let lineWidth = 1.0 / UIScreen.mainScreen().scale
This will give you 1.0 for the non-retinal iPhones, 0.5 for the iPhone 4, 5 & 6, and 0.33 for the iPhone 6 Plus.
EDIT: Dont misunderstand. I get that I can put in myImage.png whose size is 568 x 320 and myImage#2x.png whose size is 1136 X 640 and, at run time, iOS will show the lager image if the device has a retina screen. That is not what this is about. Im talking strictly about placing a 1136 x 640 image in the storyboard.
Some details:
Using xcode 5
iPhone only app (iPhone 4 and above ideally)
Targeting iOS 7 (should keep out any iPhone 3gs ...right?)
Single view app
Using storyboards
My understanding is that I can provide only the higher resolution 1136 x 640 images my app needs for the iPhone 5 then use autolayout to constrain things in such a way that my UI works properly even if the device is an iPhone 4 and has less screen real estate.
My issue is that if I drag a 1136 x 640 image onto the storyboard the image is 2X the size of the view im dropping it into. I get that I can resize the UIImageView and set the mode to aspect fit and the image will display correctly in the view.
However, that would get quite annoying. Is there a way to just set the storyboard to use the retina images directly?
Now I can create images that are half the size (568 x 320) and those will drag and drop into the views perfectly. But I cant imagine why anyone would want to do that. This doesnt make sense to me. I would expect the SDK to let me layout the app in the highest resolution possible.
I tried using images named myImage.png and using myImage#2x.png but neither changed anything.
Don't think of the dimensions in Xcode as pixels, but points. So while you set the image dimensions to be 568 x 320, the #2x images are going to use two pixels per point.
What are you testing on? You might not be seeing a difference because you are only testing on retina devices. If you are only planning on supporting iOS 7 (iPhone 4 and up), you won't be using any non-retina devices.