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 !
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/
So I am currently having some images designed for my app (social stickers Facebook style/ Line) I'm not really sure what resolution the images should be. iPhone 5s is 320*568 pts so a perfect square panning the width of the screen would be 320*320 points and because 5s is retina that would be 640*640 pixels. Is that correct? For a pixel perfect image spanning the width it would be 640*640 pixels?
I saw that iPhone 6 plus is 414*736 pts which scales up by *3 so it's 1242*2208, so would a pixel perfect square spanning the width for the iPhone 6 plus be 1242*1242 pixels?
If I was to get my graphic artist to draw on a 1242*1242 canvas would I lose much quality scaling it down for the iPhone 6 and the iPhone 6 plus?
Not really sure how to go about this. Just want to make sure my square canvas rescales without loss of quality between the 6+,6 and 5. Any help would be greatly appreciated. Thanks!
When you rescale from higher pixels to lower pixels it never lose any quality, so in your case yes you must ask for iPhone 6+ size of images to your designer and you can rescale as per your need, you won't lose any quality for sure.
width for the iPhone 6 plus be 1242*1242 pixels?
Yes you are right, you will need 1242 x 1242 for iPhone 6+.
if you are making a universal app, you will need Retina and Unretina versions of each image for both iPad and iPhone. That is, four different images:
For every piece of art, you generate four sprites.
iPhone Unretina: image.png
iPhone Retina: image#2x.png
iPad Unretina: image-iPad.png
iPad Retina: image-iPad#2x.png
Except for backgrounds, make iPhone Retina art the same size as the iPad Unretina art.
Extract from this article: http://www.gameartguppy.com/how-to-size-game-art/
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
I build and run my old iPad app for IOS 7.
The screen resolution is twice as it was.
I don't want to re write the code to position the controls
There is no storyboard. Everything is in code
Can I have the same resolution in IOS 7 as it was before?
The screen coordinates are still the same, the coordinates are in floating point.
The screen resolution is 2048 x 1536 but if you get the CGRect frame for the entire screen it is is still 1024x768, as GGRect is floating point.
I don't really understand your problem. You shouldn't have any issue with de position of all element because there is no change in the coordinate system.
The thing you need to do is design image with retina size. For exemple if you had an image 2x2 you need the same image with the same proportion but in 4x4.
It sounds like you might be running an iPhone app on the iPad. On the new iPads the iPhone Apps run in 2x mode automatically on iOS 7 using the retina assets.
I have a big problem that is causing all sorts of complications. I want to make native-resolution graphics for my iPhone 5 app using the 326ppi Retina Display quality graphics. However, all of my Views seem to be defaulting at 320px width! So the only option I've been able to find is to make my graphics much larger, and then use the 'redraw' graphics option to make the graphics look somewhat nice.
However, I would much rather just use pixel-for-pixel native resolution images. What can I do to get xcode to show my views with retina display resolutions? I am using the latest xcode and programming for iOS 6.1
Thanks!
In UIKit views are measured in points:
(CGSize){width, height}
. . where width and height are measured in points. On an iPhone 3GS (normal display), this gives the following widths:
(CGSize){320, 480} //screen resolution is 320x480
On an iPhone 4:
(CGSize){320, 480} //screen resolution is 640x960
. . ie - exactly the same. To draw a pixel at position {1,1} on an iPhone 4, the point would be:
(CGPoint}{0.5, 0.5}
Since the resolution on a retina display is exactly double, it makes drawing very easy between devices. UIKit will work out what pixel to set, given the hardware, when you supply floating point numbers. (Similar to the way OpenGL works). . . . it gets a little more complicated when supported 3.5 vs 4 inch screens.
For image assets, just name the resources as follows:
myResource.png - regular
myResource#2x.png - retina display
myResource-568#2x.png - retina display, especially for 4 inch screen. (Eg backgrounds, etc).