different ui items alignment for tablet

Question

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.

Sandeep Bhandari Sandeep Bhandari · Accepted Answer · 2016-06-03T12:24:39

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 :)

different ui items alignment for tablet

1 Answers