Working with iOS 7: our experience

18 Sep 2013

New and refreshed Apple’s operating system was presented on September, 10. In this article, we’re going to highlight its main features every development team should pay attention to, and some issues we have already dealt with.

Let’s see what we should double-check to be in line with the newest Apple’s operating system.

Below, we’ve described the main issues mentioned in the official iOS 7 UI Transitions Guide.

Firstly, every app owner should update app’s graphic assets:

  • app icon (iOS 7 requires 120 x 120 pixels for high-res iPhone and iPod touch, and 152 x 152 pixels for high-resolution iPad)
  • forget about shine or a drop shadow on your app icon (iOS 7 doesn’t use it anymore). It still rounds the corners of an icon, but the radius of rounding is different
  • retina display and iPhone 5 support is required for all app’s artwork now.

What is highly recommended?

  • make sure that app content is discernible through translucent UI elements — such as bars and keyboards — and the transparent status bar. In iOS 7, view controllers use full-screen layout.
  • change custom bar button icons. In new OS, they look different (e.g., are of not so heavy appearance).
  • check an app for hard-coded UI elements (like sizes and positions), and replace them with those derived from system-provided values. To help an app respond when layout changes are required, it is recommended to use Auto Layout.
  • keep in mind that iOS 7 allows users to adjust the text size used in apps. That’s why Apple suggests adopting Dynamic Type. When applying Dynamic Type, text responds appropriately to changes made by user.
  • consider new Command Center (used for quick and easy access to settings).
  • reconsider using visual effects like drop shadows and gradients.
  • revisit the use of drop shadows, gradients, and bezels. Because the iOS 7 design concept  is smooth and layered.
  • if necessary, update your app to best practices for iOS 6—such as Auto Layout and storyboards—and ensure that the app doesn’t use deprecated APIs.

UI View Controller issues

In updated iOS 7 version,  UIViewController received new properties: edgesForExtendedLayout, extendedLayoutIncludesOpaqueBars, automaticallyAdjustsScrollViewInsets, topLayoutGuide, bottomLayoutGuide.

In one of our recent projects (travel app) the screen contains scroll view with custom refresh control (ODRefreshControl).

iOS 7

This control uses content insets for positioning itself on the scroll view.

Default value of automaticallyAdjustsScrollViewInsets property is YES. Therefore, content of scroll view appears right under navigation bar (or status bar if navigation bar is hidden).

Thus, in this case refresh control appears 64 pixels higher. How can we fix it? We solved this problem by setting automaticallyAdjustsScrollViewInsets to NO and in Interface Builder (Storyboard) set iOS 6  / iOS 7 deltas (Y - 64, Height - -64).

In another screen we have used custom segmented control (MCSegmentedControl). And when we opened this screen for the first time, we saw that segmented control was hidden.

Having investigated  this issue for some time, we found following lines of code in MCSegmentedControl.m file:

- (void)drawRect:(CGRect)rect
{
    // Only the bordered and plain style are customized
   if (![self _mustCustomize]) {
        [super drawRect:rect];
        return;
    }
   // Customization code
}
- (BOOL)_mustCustomize
{
    return self.segmentedControlStyle == UISegmentedControlStyleBordered
        || self.segmentedControlStyle == UISegmentedControlStylePlain;
}

As we can see from the code sample above, method _mustCustomize has always returned NO for iOS 7.

Apple documentation says: In iOS 7, the segmented control uses a single style, and the segmentedControlStyle property is unused.

And in UISegmentedControl.h we found @property(nonatomic) UISegmentedControlStyle segmentedControlStyle NS_DEPRECATED_IOS(2_0, 7_0, "The segmentedControlStyle property no longer has any effect");

So we had to divide our implementation into two parts: for iOS 6 and for iOS 7.

We decided to do it as follows:

if (floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_6_1)
{
    // Do something for  iOS 6.1 or earlier
}
else
{
    // Do something for iOS 7 or later                    
}

So here is our final code:

- (BOOL)_mustCustomize
{
   if (floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_6_1)
   {
       return self.segmentedControlStyle == UISegmentedControlStyleBordered || self.segmentedControlStyle == UISegmentedControlStylePlain;
   }
   else
   {
       return YES;
   }
}

Xcode 5 provides us with powerful tool for creating different UI for iOS 6 and iOS 7. It’s called iOS 6 / iOS 7 Deltas. UI of your application can somewhat differs in different versions of OSs. You can assign these deltas for each view. So the simplest way to customize your app in most cases is simply to set Y and Height delta for your view controller’s view.

Stay tuned for more stories about iOS 7!

SEE ALSO:

About Lemberg

Lemberg is a UK mobile and web development company with strong client base in the UK, Europe, and the USA.

Starting from 2007, Lemberg has been helping leading design and marketing agencies, start-ups, innovative businesses deliver brilliant digital solutions for a number of the world’s biggest brands.

We provide our clients with impeccable services, including mobile apps creation (iPhone, iPad, Android, Windows Phone), web development (Drupal, front-end, back-end and API development), and support services.

Our goal is to go beyond clients’ expectations: as a technology partner, we take the responsibility for implementing the most ambitious, creative and innovative ideas.