I've been working through tutorials in order to get the hang of using auto layout. I'd like to start designing more interfaces in code versus using the basic options available in storyboard. However, before I explore this idea, I'd like know if the iOS coordinate system is equal across all devices?
I know that most of the latest and greatest iOS devices have improved retina displays but I'm not sure if that affects the coordinate system.
If the above is true then a second part to this question would be what x and y values can I go up to in the coordinate system before the view is no longer visible?
Obviously different sized devices have different sized screens. The old 3.5" iOS devices were 320x480 points. Then the 4" device were 320x568. And of course all the newer devices are bigger yet. Most iPads are 768x1024 but then there is the iPad Pro, etc.
And there is the difference between points and pixels. Only worry about points. This hides whether the device is the old non-retina, 2x retina, or 3x retina.
But none of this is relevant. You don't need to know any of these sizes. That's the whole point of autolayout and constraints. Even with code, you don't need to know absolute sizes. Ask a view its size. Make decisions based on that size. Apply layout based on the size at runtime without any hard coded knowledge of screen sizes.
Related
I am trying to set the screen resolution of a project to 2048x1536 (retina display on ipad).
I created a new single page app in Xcode using Swift, targeted ipad, set deployment target to various values (from 8 to 11), clicked Requires full screen, and chose only landscape modes.
I changed everywhere I could find in the storyboard, but no matter what I do, it is returning 1024x768. when I to an NSLog print from the ViewDidLoad function.
Can someone possibly shed some light on how to use the ipad to its best resolution?
Jerry
In Xcode the size of elements and the screen are measured in points. Each device has a scale factor that is applied to the points which means developers don't have to target specific screen sizes that have the same ratios.
Apple explain it a bit here:
https://developer.apple.com/library/archive/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html#//apple_ref/doc/uid/TP40010156-CH14-SW7
Graphical representation here too: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
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'm working on a project which particularly in this ViewController, I have set up a scale as a UIImageView and it needs to react on touch events based on that scale and to produce some output. However, my question is, how to implement accuracy for all of the different devices? I was thinking to try with if else statements for every single device (iPhone 4,5,6) and assign the properties based on those conditions. But that would be like dirty coding, or no? Is there any other method for this type of functionality? I need you to give me some opinions or tips just to put me on the right track. Thanks
You can use UIScreen's scale property to determine if the device has a retina screen (#2x or #3x), which will help to some extent. At present, every iPhone has the same number of points per inch (163), with differing numbers of pixels per inch depending on the device. The iPads are a different matter, though, as the iPad Mini has the same point density as an iPhone, but the 9.7" iPad and the iPad Pro have a lower density. I think for the iPads you'll need to detect the specific device to be able to figure out the physical screen size.
What's the size in pixels of the universal storyboard in Xcode? I want to create a custom design in Photoshop so I need to know the size for the universal storyboard.
By default the storyboard size is 600x600px but you should not rely on this. Usually you create a design in 640 x 1136px (#2X resolution) and then create icons for each resolution (#1X, #2X - our base, #3X). DPI resolution doesn't matter is this case, just use default DPI 72.
Here you can find resolutions for various iOS device.
Sounds like you are asking about designing the views in your app, right? You should not design to the universal storyboard size of 600x600 because there will never be a 600x600 device. You should instead design for you target devices. Focus your design around points rather than pixels. Unless you are working on really high end graphics, your app will be built in points.
I design everything based on the iPhone 6 and then allow for some variability in the layouts for the iPhone 6 Plus and the iPhone 5 and then finally the iPhone 4 (as an after thought--just squeeze everything in). iPad layouts (sorry about this) are last on the list.
Here's a great chart showing all of the device sizes: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
As of yesterday I had an app using mostly static sizes to fit an iphone 5 screen (320 points width). It was working fine in iphone 6 as well thanks to the system scaling up automatically.
Then I decided to add a retina hd launch image and everything became a lot smaller on iphone 6. So I decided to modify my whole application to use dynamic sizes and fonts so that it would fit the two iphone types the same way. And now it is working quite good.
But after these few hours of extra work, I keep asking myself the same question... what was the point? Why would you want to use dynamic sizes that fit both iphones when you can make it work for iphone 5 and let the system scale up automatically?
the use is: more screen estate. You can fit more on the screen.. at the least images or maps could be bigger while buttons retain there size -- they normally don't need to be bigger :) same for the keyboard.
you don't just get everything scaled but you can decide what is scaled and what isnt