Using the IGOverlayView to Display a Toast Message (ObjC)

Torrey Betts / Thursday, April 7, 2016

What is the IGOverlayView?

The IGOverlayView is a powerful and extremely flexible control for displaying any type of view that will overlay another view, with or without animation, when shown or dismissed. A total of 12 overlay animations are included, with 2 of these animation types allowing for custom animations limited by your imagination.

What is a Toast Message?

A toast message is an brief auto-expiring information dialog. Typically used in mobile devices to show visual feedback when turning the volume up/down or application actions such as notifying the user a file has saved.

How Do I Create a Toast Message Using the IGOverlayView?

The first step in creating a toast notification is to initialize the IGOverlayView. The IGOverlayView will provide the transparent dark appearance over a view and animate the toast message to and from the screen.

_overlay = [[IGOverlayView alloc] init];
_overlay.backgroundColor = [UIColor colorWithWhite:0.3 alpha:0.5];

Next, initialize a UILabel with a fixed size and a white background to serve as the toast message. The center property is also set to place the toast message directly in the center of the view. After configuring the UILabel is added as a subview of the IGOverlayView.

_toastLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 200, 100)];
_toastLabel.backgroundColor = [UIColor whiteColor];
_toastLabel.textAlignment = NSTextAlignmentCenter;
_toastLabel.numberOfLines = 0;
_toastLabel.layer.masksToBounds = YES;
_toastLabel.layer.cornerRadius = 8;
_toastLabel.center = CGPointMake(self.view.center.x, self.view.center.y);
[_overlay addSubview:_toastLabel];

How Do I Display the Toast Message?

To display the toast message we need to set the message text and the duration of the message.

int duration = 2;
NSString *message = @"This is a toast message.";
_toastLabel.text = message;

Next the IGOverlayView is animated into view and using the Dispatch API the IGOverlayView will automatically dismiss itself.

[_overlay showInView:self.view withAnimation:IGOverlayAnimationFade];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, duration * NSEC_PER_SEC), dispatch_get_main_queue(),
^{
[_overlay dismiss:IGOverlayAnimationFade];
});

Where Can I Learn More?

The reference links below provide more information about the IGOverlayView.

By Torrey Betts