This might sound silly but when i'm working with sizes in Xcode, the total frame size is equal to 320 * 568 ( width * height ). I'm fine with that. But the resolution of the phone is actually different. The iphone 4S is 640*960 & the 5 and next generations are 640*1136.
I know the last one is exactly double of what xcode is using as units, so my question is :
What unit of measurement does XCode use? If it pixels, why not use the
phone size/resolution as reference?
It uses points.
In retina devices, 1 point equals four pixels. In non-retina devices, 1 points equals 1 pixel.
Check out apple's documentation on drawing and printing on ios.
https://developer.apple.com/library/ios/documentation/2ddrawing/conceptual/drawingprintingios/GraphicsDrawingOverview/GraphicsDrawingOverview.html#//apple_ref/doc/uid/TP40010156-CH14-SW7
Specially the section "Points Versus Pixels"
Edit
To answer your iphone 4S vs 5 and next generation question. These are actual screen sizes. The resolutions are different. The iPhone 4S and 4 screens are 320x480 points, or 640x960 pixels. iPhone 5, 5C and 5S screens are 320x568 points, or 640x1136 pixels. If you are working with xibs, you may be seeing one of the previous sizes because xibs have a size defined. That's where auto layout constraints come in. You tell in the xib or storyboard how you want the elements to be resized/relocated in the screen. You may be using struts and springs to decide how to relocate items in your view instead of auto layout. It's ok.
Even if your xib / storyboard is iphone5 size, if you check the size of the screen in your viewDidAppear methods when running the app on a iPhone4/4S simulator or device, you will see that your view bounds have the size of the corresponding device.
It's better to use points instead of pixels because it helps the developer abstract from resolutions. You don't have to bother about how many pixels are a point, you just locate items at points in the screen and let the system take care of the resolution for you.
Xcode 10.1, Swift 4.2 answer
Xcode uses points. But in case of next explanation what is point and how much pixels in point -> it depends what retina device are you using. Basicaly on non-retina devices 1 point = 1pixel. On iphone 6plus and newer "plus" models, apple added 3x resolution.
On normal retina devices 1 point = 4 pixels, NOT 2!!
then apple packing that pixels into point.
At iPhone plus models apple also uses downsampling with factor 1.15 which means for example, if you have 1242*2208 then it should be devided on 1.15 and you get your 1080*1920 fullHD on your device.
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
I believe that the top answer, which is:
It uses points. In retina devices, 1 point equals two pixels. In non-retina devices, 1 points equals 1 pixel.
is wrong because of outdate.
I provided a link to developer.apple.com.
https://developer.apple.com/documentation/uikit/uiscreen/1617836-scale
See also UIKit Size (Points) and UIKit Scale factor: https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html
Related
I am in the process of learning iOS development with XCode. I created a project to implement some of the things I've been learning and to begin learning how to manage image sizes and placement on different sized screens i.e. iPhone 8, iPhone 8+, iPad, etc. I am currently using XCode 10 Beta and I noticed that the View size on the main storyboard is half the actual screen size of any device I select to to View As:. For instance if I select View As: iPhone 8 the screen size is 375x667 instead of being 750x1334 like the actual device. I discovered this because I created a square image of 100x100px and thought I would be able to line up 7 across the screen. To my surprise the images took up twice as much screen as I had calculated.
Can anyone let me know why the screen Views in XCode are half that of actual screen size?
Do I just always assume to make my graphics half the size I would actually want them?
Edit: Here's a screenshot of what I am referring to in XCode
When I click on the empty view in the the XCode storyboard pane this is this resolution it displays for the view. Also, when I export my graphics from Illustrator the are exported with the #1x, #2x, and #3x variants. However, when I place an image in the view that is 100x100px it takes up about 1/3 of the screen instead of 1/7 of the screen as I would expect on a iPhone 8 which has a resolution of 750x1334.
Edit #2: So after playing around more with XCode I do see that the resolution for the views are in Points not pixels however, in this screenshot for a iPhone 8+ View:
I would assume with a screen resolution of 1080x1920 #3x the Point resolution would be 360x640 for an iPhone 8+ not 414x736.
It has to do with the difference between points and pixels. On the original iPhone when it was release it was 1 point per pixel but as resolution got better it became 2x pixels per point (4 pixels). Now the resolution is 3x pixels per point on some of the newer devices (9 pixels).
https://www.google.com/amp/s/blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/amp/
I am building an iPhone app using Swift, XCode 7.3.1 in Portrait orientation. We have been provided Visual Displays (from our designer) for the screens that need to be in our app. As developers we need to match the app screen elements exactly to the Visual Displays provided. We have used Auto-Layout but the match for the various elements in the screen is not exact. eg. We are having problems in changing the font size as per the iPhone model etc.
So currently we have a switch statement where we are checking the deviceModel and increasing the size of elements by a fixed percentage for iPhone 6+ and decreasing by a fixed percentage for iPhone 5/5S. Our Visual Display is based on iPhone 6 screen size so we are keeping iPhone 6 as base line.
I am sure there is a better way of doing this.Can some one please help me on this issue.
Okay let me share my way to handle this situation.
My application is designed for :
iPhone 5 - Screen Size 4.0 inch
iPhone 6 - Screen Size 4.7 inch
iPhone 6+ - Screen Size 5.5 inch
My BASE phone is iPhone 5 Screen (4 inch)
So I asked designer to have PSD design having 4 inch size,
and same I have followed while implementing in Xcode's Storyboard
and most important once you have proper design, and font for the layout.
we need to carefully define Auto-Layout.
Note: All the required assets/icons goes in three sizes
1x for iPhone 5
2x for iPhone 6
3x for iPhone 6+
The trick is in the splash.
Default-568h#2x.png 640 x 1136
Default.png 320 x 480
Default#2x.png 640 x 960
Just add in project, only drag and drop no more, you don't need add this splash anywhere, just leave them in the source project. The project search by this names and read with the same design the app in all devices, inclusive ipad.
More info here
First, you don't use a switch based on three possible devices. First, you mess up iPhone 4s users and you mess up gazillions of iPad users (if you don't have an iPad version then the iPad displays a blown up 4s screen). Second, you have no idea what resolutions future devices have. And if you ever want your up to run properly on an iPad, there are two sizes, you should be able to rotate, and then you have five ways to split the screen.
The big mistake is at the very start: That you insist on matching a given design pixel by pixel. Send your designers on a course where they learn how an iOS device works. I'll quote Fogmeister, print this out in large font and hang it on your designer's desks: "They are different devices. Your app will look different on them all. Your app should look different on each of them. Your designer should know this and provide designs that fit each device."
Even if you wanted to have the 5, 6 and 6+ screens look the same except for size, that's bad design. Larger fonts are not just larger. The same font at 36 pt is not just 18 pt under a magnifying glass, there are subtle differences. Thickness of lines should not be scaled up when the size is larger, so you get bad design there.
To actually use the larger screen size, either build against the iOS 9 SDK, or supply launch screens in the required sizes (up to iOS 8, Apple assumes that if you don't have a 6+ sized launch screen for example, then you don't know how to handle the device, so they simulate a smaller one).
Then you read the screen size and use that to scale things, or use auto layout. Auto layout is a beast that you must learn how to handle. It takes time. And make sure that a 6+ can display more information than a 6 or 5, otherwise owners of larger phones will be annoyed with you.
I have a simple view with a text and an Image. I ran this app on iPhone6Plus and iPhone5. Then I made a screenshot of both and enlarged the iPhone5 screenshot such that it matches the size of the screenshot from iPhone6Plus. Here is the result:
As you can se the size of the text the size of the image and there positions are not identical but they should be to look the same on different screen sized.
Here is an example of a weather app running on different screens:
As you can see the sizes and the positions of text and image are identical.
The image is loaded from asset catalog:
imageView.image = UIImage(named: "shower3")
self.view.addSubView(imageView)
imageView.center = self.view.center
I have only created a 128x128 image and put it into the #1x version in the asset cataloge.
Let me rephrase this. I run the wether app on iPhone5 make ascreenshot and iPhone6 make a screenshot. Then I resize both screenshots to the same size. Then I see that both fontsize as well as images dimension are exactly equal on both screenshots. This means that on each device font and image must have different dimensions. How can I do that?
How can I achieve that text and image have identical proportions on different screen sizes? How does the Weather App do it?
Images
I am the creator and one of the developers of the Swift Weather app. The app doesn't use three versions of images because I didn't make those images and it was a Pull Request from another developer. I don't have the origin images.
As #Daniil Korotin mentioned, iOS uses points to calculate image and font sizes. iOS uses let screenScale = UIScreen.mainScreen().scale to retrieve the screen scale and pick up the proper size (1x, 2x or 3x) of the image. If we don't provide the proper size of the image, for example, in SwiftWeather app, we have only 1x version of the image (as the screenshot below), iOS will upscale the image to render on retina devices. On iPhone 6 Plus, it actually does downsampling for 3x assets. Please have a look at iPhone 6 Screens Demystified. In some case, if you don't provide 2x or 3x images, on retina devices, the image upscaled from 1x may looks blurry. We should always provide 1x, 2x and 3x images if possible.
Fonts
iOS renders fonts according to the specified points. It will automatically convert the points to certain pixel based on the devices' screen scale (as mentioned above).
How can I achieve that text and image have identical proportions on different screen sizes? How does the Weather App do it?
The answer is Auto Layout
You can see we set constraints for the image view (used for the weather icon) as below.
The width and height are always 150 points, please notice it is points nor pixels. It will render the same size (for look and feel, not for exactly pixels) for different devices. For your first image (iPhone 6 Plus vs. iPhone 5), it looks different because maybe your simulators have different scale. A better way to check how auto layout elements lay on the screen is to use Preview in Interface Builder.
Open the main storyboard, and click on Assistant Editor. On the right hand side, select Preview (on the top left). And click the plus sign ( on the bottom left) to add different devices. You can see they are identical proportions on different screen sizes.
If you have any questions, please let me know.
Something maybe off topic
If I design the images/assets, I would like to use some vector base tool like Sketch to design the assets and export them to three different sizes. Please have a look my another project iOSAnimationSample. It has a Sketch file for the design.
Sketch design
Export assets to different sizes
In that case, iOS can pick up the proper assets for different devices.
The app you are referring to does not correctly support multiple screen sizes. The interface is scaled up to run on the 6 and 6 plus, which is why everything appears the same size.
Look at the screenshots from your app - the status bar is much smaller on the 6 plus. This is because it is supposed to take up less room on the screen. It's 20 points high on all devices.
Now look at the screenshot from the weather app - the status bars are the same size. Because the weather app does not support multiple screen sizes, iOS simply takes the smaller interface and scales it up to fill the screen.
If you want to achieve the same effect (which you shouldn't) then remove the LaunchScreen.xib file and use a launch image instead. But people don't buy larger phoned screens because they want to have the same content, but bigger. That would be achieved more cheaply by simply holding the phone closer to one's face.
You're supposed to take advantage of larger displays by allowing more content to be shown at once on the screen - more rows of data in a table, more text from a book, more images from a photo library.
In the case of a weather app the extra space should be used to display more rows of an hourly forecast or something, not just a larger version of a fairly useless icon depicting the type of weather.
I suspect it is only game support that means supporting larger screens properly is not already a requirement for app store submission. Supporting the 4 inch screen became mandatory quite quickly, you should expect a similar rule to be introduced for the 6 and 6 plus before too long.
If you want a specific element to always take up 50% of the width of the screen, or a label to always be the same size as an image, then you use autolayout constraints with multipliers. An autolayout constraint is of the basic structure:
attribute of A = (attribute of B * multiplier) + constant
Most of the time the multiplier is left as one, so you're just saying that this is 20 points to the left of that, or whatever, but you can use the multiplier as well, and say that A is the width of B, multiplied by 2 or 0.5 or whatever you like.
iOS uses points to calculate image and font sizes. On non-retina screen 1 point equals 1 pixel, on retina screens — 2 pixels, and for iPhone 6 Plus it is equal to 3 pixels (some downscaling is applied, though). If you want to scale the image and font based on the actual pixel size of the screen, you can get the number of pixel per point like this:
CGFloat screenScale = [[UIScreen mainScreen] scale];
The iPhone 5, 6 and 6 Plus screen aspect ratios are the same, while resolutions differ. If you want to simply keep proportions, then you have to pick a 'base' screen width or height (say, the iPhone 5 screen width, which is 320.0 points) and then calculate the proportion by dividing the actual device screen width (say, iPhone 6 Plus screen width, which is 414.0 points) by that 'base' width (414.0 / 320.0 = 1.29375). You can get the screen size like this:
CGRect screenBounds = [[UIScreen mainScreen] bounds];
Dividing screenBounds's width by base width gives you the proportion. Then you just multiply all the sizes and margins with that proportion (1.29375 in our case for iPhone 6 Plus). Hope you get the idea.
P.S. A good guide to resolutions is here.
P.P.S. And in your case, as skorolkov mentioned below, the app just upscales everything for bigger screens (add/remove splash screens to enable/disable this upscaling).
UPD: Ok, now I see what confuses you. Here's the thing: when Apple initially released iPhone 6 and 6 Plus many apps didn't support their larger screens and bigger resolutions. So they decided that if an app lacks splash screens specifically made for those phones, it should use the iPhone 5 resolution.
That's why you get the exact same pictures after manually resizing screenshots: the system does that too. It simply takes iPhone 5 'picture' and stretches it so that it fits larger screens. The drawback is clear (and visible, especially on iPhone 6 Plus): the fonts and images are blurry and upscaled (system interface elements, like status bar, get upscaled too). So basically you get the iPhone 5 picture on all larger-screened devices (you can check that by taking a screenshot on an iPhone 5, resizing it manually to fit iPhone 6/6 Plus resolution and comparing the actual iPhone 6/6 Plus screenshot to it).
To be clear: that's the behavior you currently get, but it's not good. To keep everything properly scaled using the devices' native resolution, use the method I described above (manual multiplication) or autolayouts with equal height/width set to desired ratios for interface elements.
Weather App is using upscale mode to run on iPhone 6+. You can enable it by removing launch screens for 6/6+.
Go to asset catalog, select your launch image and unset 'iOS 8 or Later' checkbox in Attributes Inspector.
Screenshot - your app has this set
Screenshot from WeatherApp
in programatically (X and Y) we pre define the values in constant :
#define XScale [[UIScreen mainScreen] bounds].size.width / 320.0f
#define YScale [[UIScreen mainScreen] bounds].size.height / 568.0f
Then create UIImageView programatically
var imageView : UIImageView
imageView = UIImageView(frame:CGRectMake(XScale *someValue, YScale * someValue, XScale *someValue, YScale *someValue));
imageView.image = UIImage(named:"image.jpg")
self.view.addSubview(imageView)
based on your screen size we need to set Constant values. We use for iPhone5 and 4s screen.
You need to set Layout constraint to all the views to make them look at same places and sizes in all screens sizes provided that the aspect ratio of screens are same.
Have you tried to remove autoResizingfunctionality from view?
Click on inner arrow to remove autoResize view as per superview
First turn off auto layout, auto resizing and size classes in storyboard.
Click on Images.xcassets icon and select all your graphics. In attribute inspector set Devices property to "Device Specific" and set the checkbox checked against "iPhone" and "Retina 4-inch"
Place all your graphics in 2x image set. You may place a higher resolution image set for better results with iPhone 6/6+.
Design your view for a reference device say iPhone 5 (320x568 portrait).
In your viewDidLoad method paste the following code
self.view.transform=CGAffineTransformScale(CGAffineTransformIdentity,self.view.frame.size.width/320, self.view.frame.size.height/568);
And you will have same result on iPhone 5/5s, iPhone 6/6+.
I've searched a lot but find nothing about frame and dimension. I thought this should be a big topic.
Anyway, when create a view using frame, the whole screen size is 320*460 (320*480), but the dimensions of screen is 720*960. Can someone explain this? How to convert them.
This is only for 3.5 inch non-retina device.
EDIT:
I figured it out. The problem is because the size of iPad and iPhone is different. For iPhone, the dimension is 4:3, but for iPad, the dimension is 1.33.
Check out:
http://www.idev101.com/code/User_Interface/sizes.html
Points are how the screen is measured by apps so if you place something at a position you place it at a point. There are two pixels per point on retina devices.
This is only for 3.5 inch non-retina device.
No, this is the point. 3.5 inch retina devices have a resolution of 640*960.
For development Apple convert this resolution to the old 320*480 dimensions. Why ? To develop the same way for retina and non-retina devices. Except that you have to provide retina image. For a classic 100x100 image named myImage.png you have to provide a 200x200 image named myImage#2x.png. But all the development except that is the same. There are 4 times more pixels per point (ppp) on retina devices than on old iOS devices but it's transparent for the developers.
For the 320*480 vs 320*460 point : this is the status bar. In iOS < 7.0 status bar took 20 pixels height. You always should trust the [UIScreen mainScreen].applicationFrame.size to get the application size within the phone.
Update : you talk about uiimagepickercontroller don't mistake pictures taken from the camera (or from the web) with the screen resolution !
Well, I have basically two questions regarding screen resolution in iOS devices.
1) In iOS documentation, on the Point vs Pixels section, it states the coordinates are passed in to framework as points, and that "One point does not necessarily correspond to one pixel on the screen." as found here: https://developer.apple.com/library/ios/#documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/WindowsandViews/WindowsandViews.html
When they are different? Up until now I was assuming they were equal and passing in pixel coordinates. Is this a parameter that changes from device to device?
2) I'm also a little bit confused about PPI. I know what it means on the hardware screen (if a 10" and a 7" display have the same pixel resolution then the 7" display will have a better image quality since the PPI is higher). But what difference it makes if I save a .png with 72ppi or 96 or even 326? Is it just for printing or does it make any difference visually on my screen?
Thanks
On retina devices (iPhone 4, 4S, or 5, and iPad 3 or 4), there are 2 pixels per point. On non-retina devices, there is 1 pixel per point.
Except for the iPhone 5, all iPhones have a screen size of 320x480 points. The retina iPhones have a screen size of 640x960 pixels (but the same point size as the non-retina devices).
When working with images in iOS, it is the pixel size that matters, not the PPI. Just remember that your #2x images should have twice the width and height of the regular, non-retina images.