Placing iAd banners at the top of a table view

I had a question on my post about adding iAds to an application asking how to show the iAd banner view at the top of the table view rather than at the bottom. Since explaining code changes in the comments of a post is never that easy I thought I would quickly cover it in a new post.

The changes are actually fairly minimal so I will not go through the whole example from scratch. Refer back to the original posting for the full details.

Resizing the table view

The basic idea when displaying an iAd banner view above or below a table view is to introduce a container view to hold both the table and iAd views. The iAd banner view is positioned off screen until we want to display it - which is usually when a new Ad is supplied by the iAd network. When displaying or hiding the iAd banner view the table view is resized to create or hide a space for the iAd.

To ensure the table view resizes correctly you need to set its autosizing mask correctly in the FirstView.xib file. With the iAd placed below the table we make the bottom strut flexible in IB. For the iAd placed above the table make the top strut flexible.

In fact there is no harm in making both the upper and lower struts flexible so that you can easily switch the iAd banner view between positions above and below the table.

Resizing the iAd Banner View

As well as resizing the table view the iAd banner view will also resize when the device orientation changes. When the iAd is as the bottom of the view it needs to have flexible top and right margins. This is set in the createBannerView method of the view controller (FirstViewController.m).

adView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | 
                          UIViewAutoresizingFlexibleRightMargin;

When we move the iAd banner to the top of the view we need to give it a flexible bottom and right margins. So the code becomes:

adView.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin |
                          UIViewAutoresizingFlexibleRightMargin;

Creating the iAd Banner View off-screen

In the original version the iAd banner is positioned offscreen below the end of the table view. Whilst there is really no reason to change that I will modify the createBannerView to position the view offscreen above the table view. This is actually trivial to achieve, you just need to set the y-coordinate of the view frame to be minus the height of the view:

bannerFrame.origin.y = - bannerFrame.size.height;

Showing the iAd Banner View

To show the iAd banner view at the top of the table view, the table view has to be resized and then have its origin moved down by the size of the iAd banner view:

tableFrame.size.height = fullViewHeight - bannerFrame.size.height;
tableFrame.origin.y = bannerFrame.size.height; 

The banner view is then slid down into place by setting its y-coordinate to zero so that it is at the top of the frame filling the space left by the table view:

bannerFrame.origin.y = 0;

Hiding the iAd Banner View

To hide the iAd banner view the table view is resized to fill the view and its origin reset to the top of the frame:

tableFrame.size.height = fullViewHeight;
tableFrame.origin.y = 0;

The banner view is then also moved back to its offscreen postion:

bannerFrame.origin.y = - bannerFrame.size.height;

Wrapping Up

That’s all there is to it. As I say the changes are pretty minimal but I thought it was interesting to see how to modify the app.