Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS7 Auto Layout, View Resize and iAds

I'm using Auto Layout in my iOS 7 project with the following view hierarchy

Main View
-Container View
---Button
---Button
---ImageView
-Banner View (iAd Banner View)

The Main View and Container View are full width and height of screen. I have Horizontal and Vertical Space Constraints on the Container View sticking to the main view (screen's height and width). And also the subviews of Container View are constrained to the button of the view with a 20px space.

My issue occurs when the Banner View is finally filled and placed at the bottom of the screen, which then I have the Container View subtract the Banner View's Height from its frame height to allow space for the Banner View to show. (code used below) The ideal outcome is the Container View to subtract the height and its subviews constraint update based on this new height ,but what end up happening is the iAD Banner View just overlays the view as shown in the picture.

Code for BannerViewDidLoadAd:

- (void)bannerViewDidLoadAd:(ADBannerView *)banner
{
    CGRect contentFrame = self.containerView.bounds;

    CGRect bannerFrame = self.bannerView.bounds;
    if (self.bannerView.bannerLoaded) {
        contentFrame.size.height = self.containerView.frame.size.height - self.bannerView.frame.size.height;

        bannerFrame.origin.y = contentFrame.size.height;;
    } else {
        bannerFrame.origin.y = contentFrame.size.height;
    }



    [UIView animateWithDuration:animated ? 0.25 : 0.0 animations:^{
        [self.containerView setFrame:contentFrame];
        [self.containerView layoutIfNeeded];
        self.bannerView.frame = bannerFrame;
        self.bannerView.hidden = NO;
    }];

    [self.containerView updateConstraints];
}

Image of iAd overlaying Container View and it's SubViews

iad overlaying

like image 379
William Avatar asked Nov 30 '13 06:11

William


2 Answers

After you create the banner view in code (and add it as a subview of main view), you should add a 0 length spacing constraint between the bottom of the container view, and the top of the banner view (the banner view would need constraints to the two sides of the main view and a height constraint as well). The container view should have 0 length constraints to all four edges of the main view. You should make an IBOutlet to that bottom constraint, and animate that constraint's constant value by an amount equal to the height of the banner view (so it will shrink, and the banner view will move up with it due to its 0 length vertical spacing constraint). So, if the outlet to the bottom constraint was called bottomCon, and the height of the banner view was 100 points, you would animate like this:

[UIView animateWithDuration:animated ? 0.25 : 0.0 animations:^{
        self.bottomCon.constant = 100;
        [self.mainView layoutIfNeeded];
    }];

There's no need to hide and unhide the view, since you will initially place it off the bottom of the screen anyway. Also make sure that you call [bannerView setTranslatesAutoresizingMaskIntoConstraints:NO] right after you create the banner view, or you'll get auto layout errors when you run the app.

like image 136
rdelmar Avatar answered Nov 14 '22 21:11

rdelmar


The response from rdelmar was enough for me to get this working, but I'll add a few things. With auto layout on, there is no need to set the banner's size with setAutoresizingMask:UIViewAutoresizingFlexibleWidth (and currentContentSizeIdentifier is deprecated in iOS 6). Just create the banner object and then pin it into position using the procedure outlined by rdelmar and auto layout takes care of the horizontal sizing.

Here are the constraints I used:

// pin sides to superview
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[_bannerView]-0-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_bannerView)]];

// set height to a constant
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[_bannerView(==66)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_bannerView)]];

// pin contentView to bannerView with 0 length constraint
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[_contentView]-0-[_bannerView]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_contentView,_bannerView)]];

I was concerned about setting a height constraint because the height of the banner will change depending on platform and/or orientation. But it doesn't seem to make any difference what value I set for the height constraint - the banner is always shown with the correct height, so I don't even bother setting it. I am assuming this because there is an intrinsic sizing to the height of the ad banners.

like image 39
Bob Avatar answered Nov 14 '22 20:11

Bob