Adding an Overlay to a View
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic explains, with a code example how to create a basic instance of the IGOverlayView™ control and display an overlay on a view.

Required background

The following table lists the prerequisite topics required to understanding this topic.

Topic

Purpose

Adding the IG Framework File

This topic explains how to add the IG framework file to a project.


In this topic


Displaying an Overlay with IGOverlayView – Code Example

Description

The IGOverlayView’s power lies in the simple to use API to easily animate in and out views. In this code example you will:

  • Create an instance of the IGOverlayView
  • Add a UIView containing a label to the IGOverlayView
  • Animate the IGOverlayView into view

Preview

The screenshot below shows how the IGOverlayView looks as it renders along the bottom edge of the device.

Code

To start, set the background color of the view controller’s view to white.

In Objective-C:

self.view.backgroundColor = [UIColor whiteColor];

In C#:

this.View.BackgroundColor = UIColor.White;

Next, default constructors create an instance of the IGOverlayView.

In Objective-C:

IGOverlayView *overlayView = [[IGOverlayView alloc] init];

In C#:

IGOverlayView overlayView = new IGOverlayView();

Having created the overlay instance, create the UIView to act as the message container.

In Objective-C:

UIView *messageView = [[UIView alloc] init];
CGRect viewBounds = self.view.bounds;
messageView.frame = CGRectMake((viewBounds.size.width / 2) - 125, viewBounds.size.height - 20, 250, 50);
messageView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleLeftMargin|UIViewAutoresizingFlexibleRightMargin;
messageView.backgroundColor = [UIColor blackColor];
messageView.layer.cornerRadius = 8.0;
messageView.layer.shadowOffset = CGSizeZero;
messageView.layer.shadowOpacity = 0.5;
[overlayView addSubview:messageView];

In C#:

UIView messageView = new UIView();
RectangleF viewBounds = this.View.Bounds;
messageView.Frame = new RectangleF((viewBounds.Size.Width / 2) - 125, viewBounds.Size.Height - 20, 250, 50);
messageView.AutoresizingMask = UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleLeftMargin | UIViewAutoresizing.FlexibleRightMargin;
messageView.BackgroundColor = UIColor.Black;
messageView.Layer.CornerRadius = 8.0f;
messageView.Layer.ShadowOffset = Size.Empty;
messageView.Layer.ShadowOpacity = 0.5f;
overlayView.Add(messageView);

Having added the message view to the overlay, add a label with your message to the message view.

In C#:

UILabel *label = [[UILabel alloc] init];
label.frame = CGRectInset(messageView.bounds, 5, 5);
label.backgroundColor = [UIColor clearColor];
label.textColor = [UIColor whiteColor];
label.font = [UIFont fontWithName:@"TrebuchetMS-Bold" size:17.0];
label.textAlignment = NSTextAlignmentCenter;
label.text = @"Overlay Message";
[messageView addSubview:label];

In Objective-C:

UILabel label = new UILabel();
label.Frame = messageView.Bounds;
label.Frame.Inflate (-5, -5);
label.BackgroundColor = UIColor.Clear;
label.TextColor = UIColor.White;
label.Font = UIFont.FromName ("TrebuchetMS-Bold", 17.0f);
label.TextAlignment = UITextAlignment.Center;
label.Text = "Overlay Message";
messageView.Add (label);

Lastly, on the overlay view, call the showInView:withAnimation: method to animate and show the message view.

In Objective-C:

[overlayView showInView:self.view withAnimation:IGOverlayAnimationSlideBottom];

In C#:

overlayView.ShowInViewWithAnimation (this.View, IGOverlayAnimationType.IGOverlayAnimationSlideBottom);

Related Content

Topics

The following topic provides additional information related to this topic.

Topic

Purpose

This topic provides a conceptual overview of the IGOverlayView control and its key features.