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.
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 have already read a huge amount of posts and articles about iPhone screen sizes but can't find the info about next problem.
Recently i get a design made in sketch and artboard sizes are 640x1136 (and all the resources are so, like background image). As i can understand - designer heave made a design for iphone 5 - 4inch. And my designs are at 2x. Am i right?
Please see Sketch project Screen here!
So i want to export design for all iphones 4,5,6,6s plus.
Currently I'm developing my project with iphone 6s plus physical device.
But when i export designs in sketch as on a screenshoot - i get 3 images
320x568 px (exported as 0.5x)
640x1136 px (exported as 1x)
960x1704 px (exported as 1.5x)
And they doesn't fit for all devices when i add 3 images to Assets.xcassets.
Also i can export at 2x but i get 1280×2272px and it is bigger than iPhone 6s plus screen resolution.
What should i do to make this sketch designs work well on all iPhones, especially on my iPhone 6s plus? Maybe i can use only one image for all iPhones in xcode?
I believe the problem you are running into is that not all iPhone's have the same aspect ratio. Therefore, you can't simply scale the images to fit to all iPhones.
640 x 1136 is the right pixel resolution for the iPhone 5. However the iPhone 4 is 640 x 960 (shorter in height, but same width).
Depending on what the image is of (and therefore what looks better), you could either crop the images while exporting from Sketch, or stretch the image to fit all screen sizes.
My existing app has two Storyboards (for iPhone and iPad), and it supports iOS7+. I am now planning to convert it to one storyboard using Autolayouts and Size Classes, but I have few confusions:
What will the size of the images? For instance, right now without Size Classes and Autolayouts, I ask designer to slice images for iPhone5, and iPad and make them #2x and #3x respectively. But for Autolayouts, what size they will have to slice i.e what screen size will they choose and then will give me images accordingly for #2x and #3x, i.e what universal screen size? For instance, I ask them to give me a background image of screen size. What size will they give me? From what I understand, it should not be iPhone specific or iPad specific as the app will be universal.
I am aware of the fact that Size Classes support iOS8 onwards, so what about iOS7? I will have to do things programatically for iOS7? Will I have to use device-specific images or can I use universal size images for iOS7 as well?
size classes doesnt mean you cant be specific with things anymore, you should still set the background to be a suitable phone sized image for when the size class is the shape of a phone (compact x regular), and set a suitable iPad sized image when its the size of an iPad (regular x regular).
it seems like you can still use size classes in iOS 7 with some limitations
i think you are viewing the size classes as having one generic storyboard that will solve your problems of having a specific iPad and iPhone storyboard like before, which is partly true, all it really does is save you having two separate storyboards, so if your ipad and iphone screens differ, you would need to have the differences layout out in the different size classes (in your case the different sized backgrounds are a difference). it might just save you having to specify your autolayouts twice in 2 different storyboards (and even then maybe not)
For images, you still need different images from design team as:
imageName#2x.png: 640 x 960 (iPhone 4. iPhone 4s)
imageName-568h#2x.png: 640 x 1136 (iPhone 5, iPhone 5s)
imageName-667h#2x.png: 750 x 1334 (iPhone 6, Portrait)
imageName-736h#3x.png: 1242 x 2208 (iPhone 6 Plus, Portrait)
imageName~ipad.png: 750 x 1334 (iPad)
imageName~ipad#2x.png: 1242 x 2208 (iPad Retina)
For icons, we will prefer to make a font file from svg of the icons using icomoon.io website.
During development, we need to validate image name on device level. Just look into this utility:
https://github.com/victorjiang/UIImage-VJDeviceSpecificMedia/blob/master/UIImage%2BVJDeviceSpecialMedia.m
I'm doing walkthrough module and have issues with showing custom images in an imageView while sliding.
I have prepared images for for iPhone 5+ and special sized set for iPhone4.
5 and 6 - image#2x = 640 x 1136
6+ - image#3x = 1242 x 2208
4 - image3_5#2x = 640 x 960
It works flawless in 5,6 and 6++, but not on iPhone4 image looks blur and doesn't fit.
I store images in Images.xcassets folder.
for 5 and up
for 4
What's wrong with it? Thank you in advance.
If everything is set correctly with the cassettes, which it seems as though they are, you should just confirm that the images you added are actually the sizes you claim. Then next thing that would be causing issues is the imageView itself and how it is sizing itself with the screen.
Things you can do to figure out what the issue is:
Set a breakpoint in the code where the image is allocated into memory. Print out the size properties of the image to make sure they match what you expect.
Set a breakpoint in the code in viewDidAppear and print out the frame of the imageView, my bet is that it is not the correct size on the given device and is causing the image inside of it to stretch which would cause this blur that you are talking about.
Let me know what you find.
I simply want to display a title page to a game. I want to use pre-rendered images. It needs to work with all iPhones and iPads. So far I am using these assets as screenshot below
I have used these sizes:
In 1x place image with resolution of 320 x 480.
In 2x place image with resolution of 640 x 960.
In Retina 4 2x place image with resolution of 640 x 1136.
In 3x place image with resolution of 1242 x 2207.
Only the iPhone 4 and 5's show correctly. Both 6 and 6Plus are completely wrong.
for iPad:
1x image of 760*1024
2x image of 1536*2048
Only the iPad 2 displays correct. The Air and Retina are completely wrong.
I have read through all the documentation I can find both on here and searching for hours on Google. I am unsure what simple thing I must be overlooking. Am I trying to do something that is not possible? I am only testing on the simulator and thinking it could be an issue with that?
Also I may have a misunderstanding then as I was under the impression that #3x was for iPhone 6 and 6+. If not, what are #3x for?
For some reason Image Sets in Asset Catalogs do not include a size for iPhone 6 or iPhone 6+, so when using a full screen image you may need to handle it manually via code.
What I'm doing (and it's not pretty but it works), is to include another Image Set for iPhone 6 (I all it imageName_47), and another one for iPhone 6+ (I call it imageName_55). Then in code, detect the screen size and swap the image to the best size. You'll only need the #2x version for the _47 one, and the #3x version for the _55 one.