6 posts tagged with two toasters

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!