971-270-0003 info@singlecoilinc.com

Transitioning Your App to iOS 7

With the introduction of iOS 7, Apple made some controversial design decisions which affect not only the end-user, but the developer as well. This may have unwelcome consequences for the look and layout of your app. Today I’ll provide a few tips and tricks for maintaining some of the iOS 6 conventions while building for iOS 7.

 

1.) Prevent iOS 7 Status Bar from overlaying the window content

In iOS 6, the status bar was confined to a discrete, 20-pixel-high section of the screen that floats directly above the app’s main window. In iOS 7, the status bar now overlays that window. This can throw off the UI layout of the entire app.

Apple provides an official fix for those using Autolayout: simply add a “vertical space” constraint equal to 0 to the top-most view, and do this for each view in the storyboard.

If you’re not using Autolayout, however, things are a bit trickier. Apple does provide another “official” solution of sorts. Using a feature called “iOS 6/7 Deltas”, you can specify a positional offset to be used in iOS 7, which can be utilized to push content down and clear up space for the status bar.

To do this, navigate to the Interface Builder. You’ll first want to open your view’s File Inspector (the left-most icon in the Utilities pane). Under the “Interface Builder Document” section, you’ll want to make sure that you’re viewing as iOS 6.1 and earlier.

blog-screenshot1

Next, switch to the Size Inspector. Directly under the Autosizing pane, there will be a section to adjust your deltas. Set the Y delta to -20. In many cases, you’ll also want to adjust the height delta to -20 to account for this offset.

blog-screenshot2

You can now switch back to the File Inspector and choose to view as iOS 7.0 and later. You should be able to see the change in positioning previewed on your storyboard.

 

2.) Change table view cell selected background gradient

In iOS 6, table view cells had a blue gradient background when selected. In iOS 7, this has been replaced with a solid white background. Some designers may have intended for the blue gradient to be integrated as part of the app’s overall color scheme, so preserving this look may be desirable. While Apple doesn’t provide a way to revert to the iOS 6 visual style, this is relatively simple to re-implement manually.

First we’ll create a utility method to draw the gradient:

/**

* Creates a view with the size of the given frame, colored with a vertical gradient

* that starts at #068bf5 and ends at #015ee6 (same colors that were used by the UITableViewCell

* in iOS6)

*/

+(UIView *)gradientBackgroundWithFrame:(CGRect)frame

{
    UIColor *startColor = [UIColor colorWithRed:6/255.f green:139/255.f blue:245/255.f alpha:1];
    UIColor *endColor = [UIColor colorWithRed:1/255.f green:94/255.f blue:230/255.f alpha:1];

    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];

    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = view.bounds;
    gradient.colors = @[(id)[startColor CGColor], (id)[endColor CGColor]];

    [view.layer insertSublayer:gradient atIndex:0];

    return view;
}

Then in the appropriate table view delegate, we’ll use this method like so:


-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // ..snip...
    cell.selectedBackgroundView = [MyUtils gradientBackgroundWithFrame:cell.frame];
    // ..snip..
}

Run your app and select a table cell. It will look just as it did in iOS 6.

iOS Simulator Screen shot Jun 16, 2014, 11.47.36 AM

 

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>