Getting started with iOS dev using #Xamarin Part 2

In early days, iPhones sported a resolution of 320 x 480.. everything was rosy.. Eventually it grew taller by 88px when iPhone 5 came out.. since then for dev purposes the resolution sported by newer devices 5, 5s, 6, 6Plus sport 320×568 res with varying pixel densities.

iPhone 4s is still supported with iOS 8.x this means that developers need to continue supporting 320×480 res while filling the space (88px) for newer devices.

iOS supports 2 layout mechanism

  • Autosizing
  • Autolayout

With Autosizing think of the view as a canvas. You can draw other (sub)views by setting X, Y and Width & Height. If you only have a single subview, resizing subviews isn’t a problem and happens easily (table view, collection view, map view) as long as they expand to fill all available space. But what happens if you have a complex view ? Say a Label, Button, TableView and another Button at the very bottom !

If we used a designer to design the view in storyboard, the view would be rendered as shown below

Screen Shot 2015-04-22 at 11.07.01 iOS Simulator Screen Shot 22 Apr 2015 11.03.22  iOS Simulator Screen Shot 22 Apr 2015 11.03.51

The screenshots show the view in iOS Designer, app running on iPhone 4s and iPhone 5. Its clear that iPhone4s cropped the view as designer had layout set to iPhone5. Now many developers prefer designing the view in code and yes you could look at this.View.Bounds and then create all controls in code but i personally prefer to use designer.

To overcome this issue with Autosizing, Apple introduced Autolayout. Auto layout isn’t something that makes full sense until you battle it out. What one needs to do is define constraints that span across the width and height of the view. You can’t leave one bit otherwise the whole thing falls over.If you tap on a control twice on iOS designer, the design switches auto layout mode (pin-spacing) for the control. Lets have a look. As you can see, the Label control now shows 4 T shaped handles and 2 I shaped handles. You can drag the T shaped handles left, top, right and bottom and associate them with the view border and controls at the top and bottom.

Screen Shot 2015-04-22 at 11.15.15

The screenshots below show the constraints i have set. I modified the size of table to 333 (88 px) less than before and then i added a greater than or equal to constraint with a value 333. This ensure that it will fill the available space.

Screen Shot 2015-04-22 at 11.28.58 iOS Simulator Screen Shot 22 Apr 2015 11.26.01 iOS Simulator Screen Shot 22 Apr 2015 11.54.03

You can also add constraints programmatically and modify them programmatically but i haven’t had the need to go there yet.

For more info on how to use Autolayout and a better primer, have a look at http://developer.xamarin.com/guides/ios/user_interface/designer/designer_auto_layout/ 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s