What You Need to Know When Migrating to Adaptive Layout

With the release of iOS 8 and xCode 6 we received some really cool new tools for building UI on different screen sizes. There are already some comprehensive tutorials about Adaptive Layout. However in practice not everything works out as expected – few cases exist where you will need to craft some workarounds. In this post I’m going to share my experience migrating Task Focus to Adaptive Layout, what issues arose and possible solutions. Its important to say that most of these things will probably be fixed and if you are reading this far in the future some parts of the post might be outdated.

Size Classes for Custom Fonts Don’t Work

If your app uses custom font and you set bigger font for iPad the UI element will use default font and size.Screen Shot 2015-01-10 at 16.01.17

This is a confirmed bug. There are couple of solutions on stackoverflow involving messing with attributes in the storyboard. The most robust for me was creating subclasses of UILabel/UITextView, checking in the constructor if sizes should be overridden(in case if iPad) and if so swapping with the correct instance of UIFont.

@implementation MediumLabel

- (instancetype)initWithCoder:(NSCoder *)coder
{
    self = [super initWithCoder:coder];
    if (self) {
       if ([RuntimeSize sharedRuntimeSize].overrideSizes)
       {
          UIFont* newFont = [UIFont fontWithName:self.font.fontName
                                            size:[RuntimeSize sharedRuntimeSize].medium];
          [self setFont:newFont];
       }
    }
    return self;
}

Instances of UIFont are cached so there’s no performance penalty. All you need to do is set the custom class in the storyboard and you will receive the desired behavior.

 

There is no built-in way to distinguish iPhone 6+ in portrait from smaller iPhones in portrait

The ability to set constraint values for each orientation saves a lot of time compared to older approaches. It seems counterintuitive but you can’t really set constraints only for iPhone 6+ in portrait. This might lead to some awkward layout:

CompareConstraintsIf your constraints are set the conventional way, from top to bottom, all UI elements will probably look gathered at the top on the 5.5 inch display. Fortunately its rather easy to avoid this. Pick the element closest to the vertical center and set its “Vertical Center in Container” constraint. Then use it as a base and set neighboring element constraints relative to it.

This approach will help declutter the top side of the screen. Despite that if we have to get picky – images are still the same size on the 6+ in portrait. Here you could check UITraitCollection’s display scale, interface idiom and if device is in portrait to set appropriate multipliers for image size constraints.

 

Size Class Constraints are not Applied on View Instantiation

This means that if you have some custom UI logic(like drawing) you have to wait until the class constraints are applied to run it. Here’s a concrete example:

I used to have the animation for the progress bar set in -(void)didMoveToSuperview. However this doesn’t play well with size classes. For iPad the bar has twice as big constraint values but they are not set yet in -(void)didMoveToSuperview or -(id)initWithCoder:(NSCoder*)aDecoder. Here the solution is pretty straightforward – move all size dependent code to -(void)layoutSubviews. When this method is called all constraints are applied and you will get the expected view size.

 

Final Thoughts

In the beginning its a bit hard to get used to this new way of constructing UI. In spite of the initial learning curve, I soon realized – supporting different display sizes and orientations is now a breeze. Without a doubt the minimal deployment target for all my personal projects will be set to 8.0. If you have suggestions or comments I’d be happy to have a discussion in the comments.

Posted in iOS, Programming Tagged with: , , , ,
One comment on “What You Need to Know When Migrating to Adaptive Layout
  1. IngeborgX says:

    I must say you have high quality posts here. Your posts can go viral.
    You need initial traffic only. How to get massive traffic?

    Search for: Murgrabia’s tools go viral

Leave a Reply

Your email address will not be published.