2014-07-09

Using AutoResize in iOS App Development

When programming the UI of an application, we are inevitable to program an UI with dynamic width and height;




Real Example:
A view contain a footer and content with different text length, some cause 1 lines, so cause 2 lines;



Dynamic Layout in iOS


There are several ways to handle this kind dynamic layout in iOS programming, one of my favourite is using "Auto Resize Mask", it help to adjust the size of the subview and help the subviews sticking to the four borders;


Autoresizing mask constants


Mask related to the auto size
UIViewAutoresizingFlexibleHeight
UIViewAutoresizingFlexibleWidth

Mask related to auto positioning
UIViewAutoresizingFlexibleLeftMargin
UIViewAutoresizingFlexibleRightMargin
UIViewAutoresizingFlexibleBottomMargin
UIViewAutoresizingFlexibleTopMargin

Also see: Diagram about the mask

Note: We don't need type those mask value, usually we work with the interface builder

Tips of using AutoResize


  1. Use with Interface Builder, you can preview the appearance on how it works.
  2. Uncheck the "AutoLayout" of your XIB in interface builder.
  3. Don't modify the size and position on views which are well "autosized", just modify the superview size.

Deal with Autoresize bugs

  • Find out which layout component are resize as you expect and double check the autoresize setting.
  • Check the adjusted size in the layoutSubview method.
  • Can use NSStringFromCGRect to convert the view.frame to String which is easy to print out.



Reference

Adjusting the Size and Position of Views at Runtime (Apple Doc)