I would like to ask a question about the highly confusing (at least to me) topic - Size Classes in Xcode 6. I have been trying to get a full understanding of how all this works, but it is still not clear to me.
Before Xcode 6 and the new iPhones, everything was very straightforward. To, Non-Retina and Retina, displays that enabled us to work with always same resolution 320x480 (or 568 for taller devices). Standard and #2x assets made perfect sense. Now however, we have the big ass screens with the same ratio (almost the same), but working area is not the same any more.
Size Classes are supposed to make things possible to fit all of it in one storyboard. But wait.. iPhone 6 uses #2x assets, which, in my understanding, means that the graphics will look smaller on that device than on iPhone 5/5S. And iPhone 6 Plus uses #3x assets, which again aren't gonna look the same. Seems like it is not possible to make, for example, a certain button always be of the same size in relation to, say, full width of the screen. Unless we code that of course, but that would make Size Classes useless.
Am I understanding things correctly or am I missing something? It would be great to hear how you all see it. Maybe you know some good tutorials? I haven't found anything that would explain my doubts.
Thanks in advance!
You can do much of what you're talking about here using a combination of different approaches:
Size classes for different types of devices to cover most large-scale changes in UI configuration (for example, differences between iPad and iPhone). You might use this to change whether a sidebar appears or not, for example.
Autolayout rules that are specific to individual size classes. You might add different autolayout rules for different size classes in order to tweak the layout (for example, you might switch between a horizontal row of buttons and a stacked column of buttons this way, since you can now have different Autolayout rules for different size classes). This technique is extremely powerful once you realize that you don't need to use the same autolayout rules for all size classes anymore.
Asset catalogs to switch out pre-rendered graphics for the different supported resolutions, etc, automatically. Note also that because many older devices don't actually support iOS 8, you don't need to include the really low-res versions anymore unless you need extensive backwards compatibility (and if you do, not all of the size class features are available anyway). I just made a new version of the app that only supports iOS 8, since users on older versions will just get the previous version of the app.
Resizable images: you can now specify resizable areas within images in order to control how they get stretched when applied to things like UIButtons, etc, that may change size according to Autolayout rules. (This is a feature Android has had for quite a while, so it's welcome on iOS.) This means that you can make things look good on a wider variety of screen sizes without having as many separate images or as much precise control over the size of the UI elements.
Programmatic code in the view controllers to tweak anything that you can't achieve any other way.
While it's true that you don't have quite as fined grained control over which devices show what exact layout with size classes, I found that this wasn't really as big a problem as you might think, as the size classes let your view controllers adapt to different devices very seamlessly. The combination of autolayout and size classes is particularly powerful. And it's actually potentially a good thing, because it means less new manual configuration whenever Apple comes out with a different screen size. It's a bit of a pain right now to convert, but probably worth it in the long run. You just have to think about how you set things up a little bit differently. It is a little bit more like Android, where they have long had to contend with lots of different device screen sizes and resolutions, but it's also the sort of natural evolution of the platform where you can't really precisely design for every single physical device as a practical matter (you should still test on them in the simulator, though).
Size classes are not there to just adapt to a larger screen size, they are there for completely different layouts. Like on an iPhone you might show one item and tap to get to the next screen for more information, but on an iPad you show both on the same screen.
For small adjustments, you use auto layout, with different layouts per size class, and the different screen sizes in each size class are handled by the auto layout.
Related
We have an iOS app and we were asked to also support tvOS. All our UI is done in .xib files, but the problem is that all the sizes for views, margins, text, etc. are in points. That was totally fine for the iPhones and iPads, as the points are pixels multiplied by a scale to get them to look the same on all resolutions.
But when we built the app for tvOS, all our views are small and in the center of the pages. I read that this is caused because the resolution for tvOS is 1080p, with a scale of 1x. See article here.
For the UI to look the same, I would like to multiply everything by a scale of 4. By everything, I mean again: view size, text size, margins, spacing, etc.
Is there a way of doing such a thing without completely rewiring the UI?
Its not really a programming question but a design implementation question but anyway im wondering how you choose the text sizes in general according to the screen size. So an example is like before there was auto layout i used to say I want this views width to always be 30% of the superviews width. So no matter on what screen, be it iPhone or iPad, the width of the view will always be 30% of its superview. Now im wondering how would you choose the text size. Whats the rule of thumb for choosing the text size of a UILabel if its going to not look good on an iPhone but will look good on an iPad. What i would really want from everyone is for us to talk about rules of thumbs we use specifically when hitting my current situation. What do you do?
Ok, first of all you should
read the HIG:
Now to add some value with interpretation, there's not inherently a different between iPad and iPhone. IF it's legible on device it should be more or less legible on another, unless you're on the cusp of being legible on the lowest DPI device - a poor decision in any case.
I cannot stress enough you should support and query the system accessibility fonts. I.e. people hard of reading will choose bigger fonts sizes, all of Apple's software and system supports it.
Usually in the iPad, you add more content/spaces but offer the same sizes. Buttons, as a rule can be bit bigger. That will define what looks good, widen margins on the iPad a bit, which I believe is already done.
I'm a bit confused about when to use autolayout and/or size classes for certain situations. On my initial view I have 2 buttons, one "continue with facebook" and one "register via email", stacked vertically. I initially set these to have around 70 height and 18pt font, and it looks great on the newer phones, but on the smaller ones they look enormous and combined (with spacing) end up taking up almost half the screen.
So my first thought was to make the buttons a percentage height of the main view or a subview, but things just started getting really complicated really fast: do I use percentages for the margins and spacing as well? Where does it end? It's a lot of calculations.
But I also don't see how it would be useful to use size classes here, since my app is only in portrait mode, and I can't really target say iPhone 5 vs iPhone 6 in that way.
So do I have to bite the bullet and use percentages to get nice looking buttons on all screens, or should I just suck it up and have really fat ones with a big font on the now less-used phones? And when it comes to font size, is there a generally accepted standard set of sizes (for headers and body text, for example) that looks good on all phones?
did you try use an aspect ratio constraint? if you use that then keep the distance from the edges fixed and it should squash proportionately for the different screen sizes
I am programming an app for iPhone and I am using Auto Layout. I understand how #1x, #2x and #3x works, but what I don't understand is how to handle different screen sizes with Auto Layout.
If I want a scene to look good both on iPhone 6+, iPhone 6 and iPhone 5, I need to take into account the very different sizes of each phone. I can't use the same image size (in points) on all iPhones, because it will look too big on smaller phones, or too small on bigger phones. And I don't even want to imagine the hassle of iPad layout.
How can I solve this? Should I use constraints to make all of my images scale dynamically? This sounds doable, but I'm wondering what the best solution is.
Thank you. I'm really at a loss here.
If you want to keep the propotion on different sizes (for instance an image that has the same apparent size in each device) you can use constraints.
One small trick that I usually do is:
Define an aspect ratio constraint (cmd + click beginning in your view and ending in your view):
And then force your view to increase in width or in height (ie: defining constraints for the left and the right).
It all depends on what you want actually, and the constraints/code will vary in different situations.
you could make the #2x and #3x unproportionally bigger than its #1x counter part, then use the UIImageView's intrinsic size to let it become bigger for the different screen sizes
never tried something like this myself but i dont see a reason why it wouldnt work
I am new to iOS programming and programming in general so this will probably be a fairly easy question to answer for someone who is experienced.
I am making a game using sprite kit and I need to include different background image sizes for the different retina display sizes on the iPhone 4 and 5. I am using a graphics package to create the images in .png format then adding them into the project, the issue I have is that, if I make a 640x1136 size image, it works on the 5, and if I use a 640x960, it works fine on the 4 but leaves blank space around the edge on the 5. (I am running it on the simulator)
If I include two identical images with different names, one for each device, how can I load the right one in? Do I only need high resolution image and can use some code to change how it loads the image in, so that it covers the whole screen without pixelation or loss of quality on both devices?
Any help or advice is appreciated. I apologise if this is a simple question, thanks for your time.
Note:
I found out plenty on the internet about using the #2x suffix for high resolution images, but that's not what I'm looking for. I know how to code for different resolutions, just not two different screen sizes with the same resolution, if that makes any sense.
If you're on iOS 7 SDK which you most likely are, make use of the .xcassets catalogue. It has options for different screen sizes, put the different versions of your image there. And then load image in code.