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 :)
Related
I have got rather general question about making Adaptive Layout in iOS App.
When creating new project in Xcode you have ability to choose with which screen size you can start working:
I have noticed that if you place a square UIView on iPhone SE screen and then connect Leading, Trailing, Top and Bottom constraints - this view displays correctly on every other screen. But if you perform same actions on iPhone X, then this same shape would be corrupted on smaller screens.
So, my questions are:
Which iPhone screen size to choose, when starting making iOS app in
order not to face headaches with constraints on other screens and to
make pixel perfect UI?
If I receive design prepared for iPhone X screen, can I prepare it
firstly for iPhone SE screen and will it be displayed correctly on
bigger screens in this case?
What are screen sizes you use in your projects most frequently?
Actually there is no difference in choosing which 1 , what you need is to make your thoughts when making constraints to be generic , and that means every static width/height will appear similar in all devices , and every proportional 1 will look according to the device size , personally i like to use iphone 5 ( please forget about iphone 4 or you'll have to make the main view a scrollview because of the very small height of that device ) , also you can toggle the device to see how the constraints you set ( in the choosen 1 ) are look in the other device
You don't need to 'choose' a size. This is just a display setting and you can change it at any time to preview your layout on different devices.
You need to make your constrains in a logical way that will naturally adapt when change screen sizes.
I have developed an app with Xcode 7 and I placed all my views for all iPhones in portrait. Now using Xcode 8 I want update the constraints for supporting iPads in portrait. How I am supposed to to that? Copy/Paste views and start from scratch? I can't see any other solution.
PS. Note that views for iPhone 7 Plus to iPhone 4S appears fine.
No need of copying the views. The Xcode SizeClasses aids you in designing the app for various devices.
I suppose you may have used the Any Width Any Height (wAny hAny) or the Compact Width Regular Height (wC hR) to design the portrait orientation screens. Now use the Regular Width Regular Height (wR hR) size class to design the iPad screens. Size classes will automatically switch sensing the device rather than programatically selecting one among the two storyBoards designed for iPhones and iPads.
Select the wR-hR size class. Select your view in the Document Outlinein the storyBoard. In the Attribute Inspector install the view for the current size class (wR hR). the view will appear in the storyboard scene. Set the suitable constraints and you are good to go.
PS: Of course you must set the constraints again unless you have designed the iPhone screens in wAny hAny size class. If so that works in iPads too and you needn't work on any other size class.
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.
I want to have two different layouts. The first layout must be applied to iPhone-3.5inch, and the second one to all the other device sizes. However, the layout I set for the compact width/compact height does not seem to take over the other layout even when I test with an iPhone-3.5inch. How can I make the first one be applied to a small device, while the other to the bigger ones?
according to documentation compact width/compact height is size class for All iPhone models except iPhone 6Plus In landscape mode.
If you want to know whether the device is with 3.5inch screen you must do it in code.
I'm developing iOS 8 universal app, I'm using adaptive layer to develop app, all going well.
But, I struck at iPad design, because I used equal width and height for all devices using constraints, its looking good for iPhone devices, but iPad also is showing as like iPhone design, so I need to increase button sizes, so can I use a separate constrains for iPhone and iPad buttons on single storyboard app in iOS 8 with Swift language.
One more doubt is, how to handle dynamic buttons on same storyboard application with auto layouts and constrains
Thanks in Advance.
You can select Regular width|Any Height size class and set the size and constraints for the button specific to iPad. According to Apple docs :
Views, constraints, and fonts are added from the size classes in the same way they would be chosen for display on a screen. Items from Any|Any are used unless those items are changed or uninstalled in more specific size classes. In that case, the most specific item is used. For example, in the iPhone nib, modified items in the Compact|Regular size class take precedence over items in Compact|Any. And modified items in Compact|Any take precedence over items in Any|Any.
Regular width|Any Height size class is taken in run time for iPad and Any|Any is taken for iPhone.