Introducing Udon Noodle

Way back in 2010, Loren Brichter introduced "pull-to-refresh" to the world via the Tweetie app. It's the perfect gesture to refresh the content in an app.


pull-to-refresh


With Udon Noodle, you can monetize during natural breaks or down time in your app and display an ad while your user is waiting for new content to download.
Thus, Udon Noodle won't interrupt your users' experience.


Udon Noodle
Udon Noodle video

udon-noodle-sample

Integrating Udon Noodle

Udon Noodle is a custom class in the Appsfire SDK called AFAdSDKUdonNoodleControl. It's is an API compatible replacement for UIRefreshControl an it's available on iOS 5.1.1+.
This class uses the Appsfire Sashimi ad format to display an ad in the refresh control view on top of a UIScrollView (can be a UITableView for instance).

Let's take a look how one would implement it in a UITableView.

  1. Create a private property to keep a reference to our Udon Noodle instance and add the AFAdSDKUdonNoodleControlDelegate delegate to your class:

    #import "AFAdSDKUdonNoodleControl.h"
    
    @interface AFTableViewController () <AFAdSDKUdonNoodleControlDelegate>
    @property (nonatomic, strong) AFAdSDKUdonNoodleControl *refreshControl;
    @end
    
  2. Create an instance of AFAdSDKUdonNoodleControl and specify the UIScrollView to use. In our case, we are passing the UITableView (which is a subclass of UIScrollView).

    self.refreshControl = [[AFAdSDKUdonNoodleControl alloc] initWithScrollView:self.tableView forZone:@"ZONE_ID"];
    

ZONE_ID is the zone ID for your Sashimi (in-stream) ads as provided by Appsfire, also used for Udon Noodles.

  1. Set the delegate of the refresh control in order to specify the UIViewController used to present eventual modals like the StoreKit. Without this, users will be redirected to the App Store in order to download the app.

    self.refreshControl.delegate = self;
    

    Implement the -viewControllerForUdonNoodleControl: delegate method to pass you UIViewController:

    - (UIViewController *)viewControllerForUdonNoodleControl:(AFAdSDKUdonNoodleControl *)udonNoodleControl {
      return self;
    }
    
  2. Next, you'll need to add an action for the refresh event. Since AFAdSDKUdonNoodleControl inherits from UIControl and just like UIRefreshControl an action is triggered on UIControlEventValueChanged:

    [self.refreshControl addTarget:self action:@selector(refresh:) forControlEvents:UIControlEventValueChanged];
    

    Make sure your refresh process is finished before calling the endRefreshing method.

    [self.refreshControl endRefreshing]
    
  3. You should then have something like this:


#import "AFAdSDKUdonNoodleControl.h" @interface AFTableViewController () <AFAdSDKUdonNoodleControlDelegate> @property (nonatomic, strong) AFAdSDKUdonNoodleControl *refreshControl; @end @implementation AFTableViewController #pragma mark - UIViewController - (void)viewDidLoad { [super viewDidLoad]; // Creation of the Udon Noodle instance. self.refreshControl = [[AFAdSDKUdonNoodleControl alloc] initWithScrollView:self.tableView]; self.refreshControl.delegate = self; [self.refreshControl addTarget:self action:@selector(refresh:) forControlEvents:UIControlEventValueChanged]; } #pragma mark - Udon Noodle - (void)refresh:(id)AFAdSDKUdonNoodleControl { // Do your refreshing operations... // [...] [self.refreshControl endRefreshing]; } #pragma mark - AFAdSDKUdonNoodleControlDelegate - (UIViewController *)viewControllerForUdonNoodleControl:(AFAdSDKUdonNoodleControl *)udonNoodleControl { return self; } @end

Customization

Themes

Udon Noodle is available in two styles:
- AFAdSDKUNControlStyleLight (default): better fits for light content.
- AFAdSDKUNControlStyleDark: better fits for dark content.

Preview
Udon Noodle styles
Udon Noodle Light (default)
Udon Noodle Dark

You can specify the style you want using the style property of the Udon Noodle instance:

self.refreshControl.style = AFAdSDKUNControlStyleDark;

Tint color

Additionally you can customize the color of the spinner and text using the color property of the Udon Noodle instance:

// Here we set the tint color to yellow.
self.refreshControl.color = [UIColor colorWithRed:233.0 / 255.0 green:218.0 / 255.0 blue:156.0 / 255.0 alpha:1.0];
Preview
Udon Noodle Customization
The color is now set to yellow

Customization via the delegate

AFAdSDKUdonNoodleControl has a delegate method AFAdSDKUdonNoodleControlDelegate which allows the customization of the Sashimi view inside the Udon Noodle, on top of the two style modes mentioned above.

First you'll need to add the AFAdSDKUdonNoodleControlDelegate protocol to you view controller's class

@interface AFTableViewController () <AFAdSDKUdonNoodleControlDelegate>

Then set your view controller to be the AFAdSDKUdonNoodleControl delegate:


- (void)viewDidLoad { [super viewDidLoad]; // [...] // Setting the AFAdSDKUdonNoodleControl instance delegate to the view controller. self.refreshControl.delegate = self; }

Then implement the simple delegate protocol:

#pragma mark - AFAdSDKUdonNoodleControlDelegate

- (void)udonNoodleControl:(AFAdSDKUdonNoodleControl *)udonNoodleControl customizeSashimiView:(AFAdSDKSashimiMinimalView *)sashimiView {
    // Changing the background color to a lighter gray.
    sashimiView.contentBackgroundColor = [UIColor colorWithRed:110.0 / 255.0 green:110.0 / 255.0 blue:110.0 / 255.0 alpha:1.0];

    // Changing the color of the title to yellow.
    sashimiView.titleLabel.textColor = [UIColor colorWithRed:233.0 / 255.0 green:218.0 / 255.0 blue:156.0 / 255.0 alpha:1.0];

    // Changing the color of the icon color to black.
    sashimiView.iconBorderColor = [UIColor blackColor];
}

Preview
Udon Noodle Delegate
Sashimi is customized via the delegate

Rotation and Extended Layout (iOS 7+)

Starting with iOS 7, the default value of edgesForExtendedLayout is UIRectEdgeAll which extends the layout below the navigation elements such as UINavigationBar.

If the value of edgesForExtendedLayout contains UIRectEdgeTop, you will need to tell to the Udon Noodle control to add an offset at the top via the defaultTopContentOffset property.
The best location to add this offset is in viewDidLayoutSubviews which will also handle rotation for you:

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];

    // Udon Noodle adjustments.
    if ([self respondsToSelector:@selector(topLayoutGuide)]) {
        CGFloat topOffset = self.topLayoutGuide.length;
        self.refreshControl.defaultTopContentOffset = topOffset;
    }
}

Custom strings

It is also possible to replace the default text when the Udon Noodle is refreshing via the refreshingStrings property. This property takes an NSArray as input and the refresh control will randomly pick one at refresh time.

self.refreshControl.refreshingStrings = @[@"Refresh in progress...", @"Refreshing brother...", @"Wait for it..."];