7 posts in User Interface

Solving the Massive Storyboard Problem

At Two Toasters, we’ve been building iOS interfaces in code for years. Every so often, someone will suggest that we try using Interface Builder and storyboards, but we’ve traditionally found the experience to be frustrating and unproductive. The tools seemed immature and cumbersome, and with all of our experience building UIs by hand, it never really seemed like a worthy undertaking.

Over the last year though, things have begun to change. There were signs at WWDC 2013 that Apple was putting serious effort into improving storyboards and Interface Builder. A few weeks ago, Apple introduced Adaptive Layout and Size Classes in the iOS 8 SDK, and Xcode 6 features many improvements that aim squarely to address the complaints that people have had about Interface Builder. Apple clearly believes Interface Builder and storyboards are a viable tool for building UIs more productively and efficiently.

Continue reading “Solving the Massive Storyboard Problem” »

Translating Autoresizing Masks Into Constraints

Auto Layout has been a great improvement to the layout system on iOS. It allows expressing layout rules more explicitly and reduces the need for custom layout logic. I especially appreciate that you can mix Auto Layout with manual layout in cases where setting a view’s frame expresses the intended behavior more clearly.

Continue reading “Translating Autoresizing Masks Into Constraints” »

Interactive Transitions

In my previous post, I explained how to create custom animated transitions. This time, I’m going to show how to make interactive transitions.

As a quick review from last time, there are three main roles involved in an animated transition: the from and to view controllers and the animation controller. In a non-interactive transition, the animation controller defines a duration and sets up the animations between the two views. Both views are placed inside of a container view during the transition.

Interactive transitions build on this structure by adding a fourth role: the interaction controller. This new role is played by an object that conforms to the UIViewControllerInteractiveTransitioning protocol.

Continue reading “Interactive Transitions” »

Custom Transitions on iOS

This article is the first in a series that shows how to customize view controller transitions on iOS. In part one, the focus is on creating custom animated (non-interactive) transitions.

When using typical iOS apps we navigate from screen to screen frequently. Previously, if you wanted to do anything other than the standard transition animations, you were on your own, but in iOS 7 Apple has provided a new API to let us customize these animations.

Continue reading “Custom Transitions on iOS” »

TWTSideMenuViewController for iOS 7

One of the most common implementations of menu views has been the “Side Drawer”, “basement”, or “Side Menu” made popular in apps such as Facebook and Path. When someone taps the infamous “Hamburger” to open a side menu the main screen slides to the right (or left in some implementations) to reveal another screen below. This works well in iOS 6 and earlier because the status bar exists in a 20pt tall area that is isolated from the rest of the application. In iOS 7, the status bar is overlaid on the screen below it. What does it mean for sidebars or “basement” views in iOS 7?

Soon after iOS 7 was announced at WWDC in June, many designers on Dribbble started playing around with a new approach for doing these menus. Many came to a similar approach where the main screen would scale down and to the right.

Working with the team at Luvocracy, we were inspired by this approach and with a few ideas of our own we created TWTSideMenuViewController.

TWTSideMenuViewController is a container view controller built to manage a menu view and a main view in a beautiful way.

With iOS 7, apps are encouraged to use the whole screen and not rely on the 20pt status bar to be outside of the main screen of your app. This breaks the existing side bar idea in that the status bar with a single style is overlaid on two views, the menu view and the main view.

With TWTSideMenuViewController we solve this by moving and scaling the main view down and away from the status bar. Inspired by iOS 7, we also improved the idea of this scaled down view approach to think of the menu and the main view as a single view with the menu and main view in the same visual plane. We merely change the viewport to focus on different aspects of the application. This can be seen in iOS 7 when you launch an app and zoom into it or when you use the new app switcher.

We think it is a clean approach that looks beautiful in iOS 7. Below is a video of it in action in the Luvocracy iOS app.

Introducing TTAlertView

TTAlertView is a drop-in replacement for UIAlertView that allows the developer to customize the presentation of an alert. TTAlertView uses the familiar interface of UIAlertView, so you don’t have to worry about rewriting any of your code. Just drop it in, add some assets, and bam!: you have a unique, customized alert view for your app!

Using TTAlertView

Using TTAlertView is simple. TTAlertView uses the familiar initWithTitle:​message:​delegate:​cancelButtonTitle:​otherButtonTitles: and show methods to create and display your alert view. From there TTAlertView handles laying out and animating the view.

Lets see some code:

- (void)simpleAlert 
    TTAlertView *alert = [[TTAlertView alloc] initWithTitle:@"A Simple TTAlertView" 
                                                    message:@"... with the default layout!" 
    [alert show];

… which gives you this:

A real simple TTAlertView

Of course, this alert hasn’t been customized at all, so it looks lame. Let’s see what adding in some custom images can do for us…

Customizing TTAlertView

To customize this alert view, we’re going to set the background image for containerView (the box containing the title, message, and buttons). Since TTAlertView handles the layout and, most importantly, the sizing of the containerView, using a resizable UIImage here is best practice — this guarantees that no matter the size of the containerView, the image will be stretched appropriately to fit.

We’re also going to add some button images using TTAlertView’s setButtonBackgroundImage:​forState:​atIndex: method. With this method we will set images for the button’s normal and highlighted states, again using resizable UIImages. (If you’re using textured button images or button images with text baked in, worry not – we’ll cover how to use these types of assets in a future blog post!)

Here’s some more code:

- (void)fancyAlert 
    TTAlertView *alert = [[TTAlertView alloc] initWithTitle:@"A Fancy TTAlertView" 
                                                    message:@"... with images and designs!" 

    // we don't want the background peeking through 
    [alert.containerView setBackgroundColor:[UIColor clearColor]];

    // resizable images work best 
    UIImage *backgroundImage = [bgImage resizableImageWithCapInsets:bgCapInsets]; 
    UIImage *buttonOffImage = [btnOffImage resizableImageWithCapInsets:buttonCapInsets];
    UIImage *buttonOnImage = [btnOnImage resizableImageWithCapInsets:buttonCapInsets];

    [alert.containerView setImage:backgroundImage]; 
    [alert setButtonBackgroundImage:buttonOffImage forState:UIControlStateNormal atIndex:0]; 
    [alert setButtonBackgroundImage:buttonOnImage forState:UIControlStateHighlighted atIndex:0];    

    [alert show];

… and voilá!

A fancy, styled TTAlertView

We’re done here

A quick shout-out to one of our favorite clients: Go Try It On. GTIO provided the assets used in the stylized alert example seen above — the assets were taken from the custom alert view in GTIO’s app, which is where TTAlertView was pioneered!

This is just a taste of TTAlertView’s potential. In future posts we will cover more ways to use TTAlertView, like using fixed-size images, tweaking the layout, and supplying custom view hierarchies. Stay tuned!