All iPad screens, iPad 1, iPad 2 ... , iPad Retina and Mini iPad have the same screen ratio. width/height or height/width or width:height
So, Why do we need to use constraints for the iPad views?!
I also believe that in interface builder when you select the view controller, you can view it as iPad or iPhone. there is many iPhone options but only one iPad option. you can do that by clicking the size drop down list in the Attributes Inspector.
Is there any of the iPad screens that have more or less screen points comparing to others? "Screen Points" not "Screen Pixels" if yes, Which one is that?
You don't have to use auto layout, but it's a good idea to. Once you understand it it's faster to work with, more flexible and very powerful for animations. You should also consider device rotation and usage for things like multi-tasking (ios9, use size classes too).
If you Design your Screens in Width Any / height any than your design will run on any iphone and Ipad Screen with autolayout. And it's a good practice too. if you want any change for iphone / ipad screen than you can remove that constraint for particular devices.add particluar constraint for particular devices.
Related
I'm trying to create a iOS app, but I'm stuck on the layout.
I created the home view, but now I see that it's not shown in the right way in the 4S simulator.
I tried with size classes, but it looks like 4S and 6, for example, are in the same size class, and so I can't set a different dimension for views.
My goal is to support all devices, also iPads. Can someone please tell me how to do it?
Size classes mostly used for separation between ipad, apple watch and landscape modes.In potrait mode iphone 4 to iphone 6 all phone device sizes are in same class(regular height and compact width).Autolayout has many different constraints to help you to fit interfaces in same class.You should consider horizontaly/verticaly align, equal width and aspect ratio constraints.They are so flexible for smaller size changes and help you to design adaptive layout.
You should use "Reset to Suggested Constraints" for all views in your View controller. You can also check the simulated metrics for all devices without compiling the the code.
For 4s and 6 by default the size is Inferred. You should try resetting the constraints to check this for iPad as well.
I am just sharing an idea
Option1:
I think You can try adaptive Layouts and in file inspector->simulated Metrics->size-> Inferred. It works in all devices it supports both landscape and Portrait.
Option2: Go for Visual layouts they are easy to understand and they work perfect in all modes of Portrait.
I am think that you use code Instead design in main.storyboard !
for ex: create button with code
(and use Ratio in your code)
by this way i create small app for iPhone & iPad
!
I'm new to ios(android dev). I'm using storyboard, and autolayout.
To optimize application for tablet, i used sizes in storyboard regular width regular height.
I want to align ui items on ipad different than on iphone mode. For example, i have a table of textfields that occupy full width on iphone. On ipad i want to place two or three textfields in one cell. How can i make different ui implemetation for ipad, so the logic shoudl stay the same.
I watched https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LayoutandAppearance.html#//apple_ref/doc/uid/TP40006556-CH54-SW1
But there is no answer there.
Jenya Kirmiza,
Size Class is what you want :) Size classes were introduced with iOS8 in order to avoid the multiple storyboards for universal applications and yet provide an easy way for the developer to design differrent UI for differrent Devices :)
I expect you to know SizeClasses, In case you are not aware each device in its various orientation falls to one of the sizeClass defined by Apple.
One thing important to note here is that iPad in its both the orientation falls to Regular x Regular size class
Where as all iPhones other than iphone 6S and iphone 6s + will fall to
Copact Width x Regular Height - Portrait mode
Compact Width X Compact Height - Landscape Mode
Iphone 6s and 6s + falls to
Copact Width x Regular Height - Portrait mode
Regular Width X Compact Height - Landscape Mode
Now that you are equipted with the information of all size classes lets nail this issue down. When you open the story board at the center of the screen there is option to decide the size class :)
So go ahead open up your story board when you see it by default will be in wAny wAny mode What it means is whatever the components you add and add the constraint to it will be applicable to all the sizeclasses irrespectively.
Hence you see the textField added at the center of the screen appears center in all the devices may it be iPhone ot iPad.
For explaining Ill add two text fields named Firstname and LastName :)
Lets start adding textFields and constraints to them in storyboard keeping wAny wAny mode.
Now I have added two textFields one below the other covering the whole width of the screen in any any mode :) This will work fine for me in all iPhone devices :)
But I want to allign them side by side in iPad. Now we know that iPad belongs to Regular x Regular sizee class in both the orientation :)
So Simply change the size class in storyBoard
Now when you see you will see two textfields added one below the other already :)
Now select those textfields we want to align them differently isnt it :) So will have to remove the constraints already added to them :)
Now move them place next to each other add constraints properly :)
Thats it now run on iPhone and iPad :) You will textFields one below each other in iPhone and one next to other in iPad :)
iPhone Output :
iPad output :
Hope this helps :)
I have to design an app for all iPhone size portrait mode only. I am using storyboard and setting constraints using storyboard itself. What makes me confuse is Size Classes. Since my requirement is iPhone portrait only, I am using Size Class compact Width|regular Height. My question is can I disable the Size Classes cause working only for iPhone portrait mode. If yes, then can I design with Size Classes disabled for all iPhone size. What is the right approach?
Intuitively, prior to size classes, storyboard UI was designed by doing a separate interface for each iPhone size. Since the advent of a broad range of device sizes, size classes have been incorporated. Considering that your app may have to run on older devices, there is still a difference in size between iPhones in portrait mode. Because of this, you would likely have to make a separate interface for each orientation, which I have not tried. I believe the correct approach would be to simply design for the size class that you selected.
If you are only making your application for iPhone portrait not necessary to use the size classes. You just have to set proper contract which are in the size indicator.
It's my opinion for it.
If you are developing for iPad and iPhone size class is the best option.
Size classes deal with the problem of multiple orientations(portrait and landscape) and different devices(iPhone and iPad). You cannot differentiate between two different screen sizes for iPhone using a size class. Similarly you cannot differentiate between iPad mini(portrait) and iPad Air(portrait) on behalf of size classes.
All iPhones in portrait has the same size class behavior i.e Compact(width) | Regular(height), be it 3.5", 4.0", 4.7" or 5.5". Similarly all iPhones in landscape has Regular(width) | Compact(height) size class. Size classes aren't the solution to the problem you are facing.
In order to handle multiple screen sizes for iPhone in portrait, the best bet would be to make use of autolayouts. Pin your views with the boundaries so that they will get stretched or contracted on different screens. Similarly bind your labels with the boundaries of their superview so that they will grow too. Also you can make use of aspect-ratio constraint that will allow to grow your view and images relative to the aspect-ratio of the element rather than increasing them horizontally to end up with an elongated look.
If you are new to autolayouts I will highly recommend watching the following sessions from WWDC2012:
Introduction to Auto Layouts
Auto Layouts by Example
Best Practices for Mastering Auto Layouts
I know to go from the 3.5-4 inch screen with the app you create you have to use auto layout to make it nice on both screens. I was wondering if you had to do the same for the ipad mini - ipad? When i go into the attributes inspector there is no ipad mini choice on the view controller like there is for the 3.5 inch display. With the ipad story board is it a one size fits all type of thing or should I still use auto layout?
Thanks
Shen Hutah
The reason for resizing with the 3.5-4 inch screens is due to a changed aspect ratio. With iPad and iPad mini, they have the same aspect ratio (4:3), so the screens are functionally the same. Unless you're altering the view based on autorotation, there's technically no need to use autolayout.
I am working on a UI that will live on different sizes of iPhone retina ( 3.5 and 4).
I am using storyboards, now in every viewcontroller I add in Interface builder, I can select the size under simulated metrics, and one option says retina iphone 3.5 screen. which is what I chose.
I then setup constraints for the view controller to maintain top and bottom space to superview. Thinking that with this setup it will work fine on iPhone 3.5, and then resize properly to iphone 4 inch screen.
its not working, do I have to resort to code and do this in viewdidload?
Switching from 3.5" to 4" screens is only made for you to take a look what changes with your layout, how is it resizing. Same goes for Portrait and Lanscape orientations in each viewController.
In order to use autoresizing behavior you have to use strurs and springs on ios5.
If your project's deployment target is ios6 it is recomended to use autolayout.Though it is a little bit more complex and hard to understand, especially using autolayout constraints in code, autolayout saves much time that you would spend to make dynamic things resize properly.
I use this same approach. It works well so lobg as you use autolayout correctly. Play around with the constraints and you'll learn quickly how yo do the layouts efficiently.