MoPub How to implement iOS Native Ads using MPTableViewAdPlacer with dynamic cell height?

Question

I am using a MPTableViewAdPlacer to implement native ads in iOS UITableView. When initialising the MPTableViewAdPlacer, it asks for a MPStaticNativeAdRendererSettings, which needs to implement a viewSizeHandler. However, this is before any ads are fetched, as the name suggested "Static" Native Ad. I am trying to implement one where the cell height can be calculated after getting the adData, such as the title, image...etc. I've been trying to find a way to implement a dynamic cell height but all the sample app, instructions provided by twitter only shows the static height implementation.

Code below:

-(void)setupAdPlacer {

    MPNativeAdRequestTargeting *targeting = [MPNativeAdRequestTargeting targeting];
    targeting.location = [[CLLocationManager alloc] init].location;

    targeting.desiredAssets = [NSSet setWithObjects: kAdMainImageKey, kAdCTATextKey, kAdTextKey, kAdTitleKey, nil];

    MPStaticNativeAdRendererSettings *settings = [[MPStaticNativeAdRendererSettings alloc] init];

    settings.renderingViewClass = [REPostListViewMoPubAdCell class];
    settings.viewSizeHandler = ^(CGFloat maximumWidth) {
    return CGSizeMake(maximumWidth, 312.0);

    // STATIC HEIGHT
    };

    MPNativeAdRendererConfiguration *config = [MPStaticNativeAdRenderer rendererConfigurationWithRendererSettings:settings];

    self.adPlacer = [MPTableViewAdPlacer placerWithTableView:self.tableView viewController:self adPositioning:positioning rendererConfigurations:@[config]];
    self.adPlacer.delegate = self;

    [self.adPlacer loadAdsForAdUnitID:@"xxxxxxxxxxx" targeting:targeting];
}

Answer 1

You need to decide the height and width based on your screen and tableview. I have setup all the components at runtime and working very well.

I am setting up mopub using.

-(void)setUpMopPubAd
{
    MPServerAdPositioning *positioning = [[MPServerAdPositioning alloc] init];
    self.placer = [MPTableViewAdPlacer placerWithTableView:tableViewContent viewController:self adPositioning:positioning defaultAdRenderingClass:[MoPubAdTableViewCell class]];
    MPNativeAdRequestTargeting *targeting = [MPNativeAdRequestTargeting targeting]; targeting.desiredAssets = [NSSet setWithObjects:kAdIconImageKey, kAdMainImageKey, kAdCTATextKey, kAdTextKey, kAdTitleKey, nil];
    [self.placer loadAdsForAdUnitID:kMoPubKey];
    [tableViewContent mp_setDataSource:self];
    [tableViewContent mp_setDelegate:self];
}

I have created tableviewcell for MoPubAd.

MoPubAdTableViewCell.h

@interface MoPubAdTableViewCell : UITableViewCell<MPNativeAdRendering>

@property (strong, nonatomic) IBOutlet UILabel *titleLabel;
@property (strong, nonatomic) IBOutlet UILabel *mainTextLabel;
@property (strong, nonatomic) IBOutlet UIButton *callToActionButton;
@property (strong, nonatomic) IBOutlet UIImageView *iconImageView;
@property (strong, nonatomic) IBOutlet UIImageView *mainImageView;

MoPubAdTableViewCell.m

@synthesize titleLabel, mainImageView, iconImageView, mainTextLabel,callToActionButton;
- (void)awakeFromNib
{
    // Initialization code
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
    [super setSelected:selected animated:animated];
    // Configure the view for the selected state
}

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self)
    {
        UIView *viewBackground = [[UIView alloc]init];
        [viewBackground.layer setMasksToBounds:YES];
        [viewBackground.layer setBorderWidth:1.0];
        [viewBackground.layer setBorderColor:[[UIColor colorWithRed:165.0/255.0 green:166.0/255.0 blue:167.0/255.0 alpha:1.0]CGColor]];
        [viewBackground setBackgroundColor:[UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 alpha:0.2]];
        if (iPhone4)
        {
            viewBackground.frame = CGRectMake(4, 4, [UIScreen mainScreen].bounds.size.width - 8 , 305 - 8 + 5);
        }
        else if (iPhone5)
        {
            viewBackground.frame = CGRectMake(4, 4, [UIScreen mainScreen].bounds.size.width - 8 , 305 - 8 + 5);
        }
        else if (iPhone6)
        {
            viewBackground.frame = CGRectMake(4, 4, [UIScreen mainScreen].bounds.size.width - 8 , 330 - 8 + 8);
        }
        else if (iPhone6Plus)
        {
            viewBackground.frame = CGRectMake(4, 4, [UIScreen mainScreen].bounds.size.width - 8 , 355 - 8 );
        }
        [self addSubview:viewBackground];
        self.iconImageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, 48, 48)];
//        self.iconImageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, 60, 60)];
        [self.iconImageView.layer setMasksToBounds:YES];
        self.iconImageView.layer.cornerRadius = 5.0;
        [self addSubview:self.iconImageView];

        self.titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(70, 10, 252, 25)];
        [self.titleLabel setFont:[UIFont fontWithName:@"Roboto-Bold" size:15.0]];
        [self.titleLabel setText:@"Title"];
        [self.titleLabel setBackgroundColor:[UIColor clearColor]];
        [self.titleLabel setAdjustsFontSizeToFitWidth:YES];
        [self addSubview:self.titleLabel];

        UILabel *lblSponsored = [[UILabel alloc]initWithFrame:CGRectMake(self.titleLabel.frame.origin.x, self.titleLabel.frame.origin.y + self.titleLabel.frame.size.height , self.titleLabel.frame.size.width, 20)];
        lblSponsored.text = @"Sponsored";
        lblSponsored.font = [UIFont fontWithName:@"Roboto-Regular" size:13.0];
        [lblSponsored setTextAlignment:NSTextAlignmentLeft];
        lblSponsored.textColor = [UIColor lightGrayColor];
        [lblSponsored setBackgroundColor:[UIColor clearColor]];
        [self addSubview:lblSponsored];

        self.mainTextLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 65, [UIScreen mainScreen].bounds.size.width - 20, 35)];
        [self.mainTextLabel setFont:[UIFont systemFontOfSize:14.0f]];
        [self.mainTextLabel setBackgroundColor:[UIColor clearColor]];
        [self.mainTextLabel setText:@"Text"];
        [self.mainTextLabel setNumberOfLines:2];
        [self addSubview:self.mainTextLabel];

        self.mainImageView.contentMode = UIViewContentModeScaleAspectFit;

        if (iPhone4 || iPhone5)
        {
            self.mainImageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, self.mainTextLabel.frame.size.height + self.mainTextLabel.frame.origin.y + 5, [UIScreen mainScreen].bounds.size.width - 20, 157)]; // 268
        }
        else if (iPhone6)
        {
            self.mainImageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, self.mainTextLabel.frame.size.height + self.mainTextLabel.frame.origin.y + 5, [UIScreen mainScreen].bounds.size.width - 20, 185)]; //320 260
        }
        else if (iPhone6Plus)
        {
            self.mainImageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, self.mainTextLabel.frame.size.height + self.mainTextLabel.frame.origin.y + 5, [UIScreen mainScreen].bounds.size.width - 20, 205)]; // 368
        }
        else
        {
            self.mainImageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, self.mainTextLabel.frame.size.height + self.mainTextLabel.frame.origin.y + 5, [UIScreen mainScreen].bounds.size.width - 20, 157)];
        }
        [self.mainImageView setClipsToBounds:YES];
//        [self.mainImageView setContentMode:UIViewContentModeScaleAspectFill];
        [self addSubview:self.mainImageView];

        self.callToActionButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [self.callToActionButton setFrame:CGRectMake([UIScreen mainScreen].bounds.size.width - 105, self.mainImageView.frame.origin.y + self.mainImageView.frame.size.height + 5, 95, 30)];
        [self.callToActionButton.titleLabel setAdjustsFontSizeToFitWidth:YES];
        [self.callToActionButton.layer setMasksToBounds:YES];
//        [self.callToActionButton.layer setBorderWidth:1.0];
        [self.callToActionButton.layer setCornerRadius:5.0];
//        [self.callToActionButton.layer setBorderColor:[[UIColor colorWithRed:165.0/255.0 green:166.0/255.0 blue:167.0/255.0 alpha:1.0]CGColor]];
        [self.callToActionButton setBackgroundColor:[UIColor colorWithRed:0.0/255.0 green:158.0/255.0 blue:255.0/255.0 alpha:1.0]];
        self.callToActionButton.userInteractionEnabled = NO;
        [self addSubview:self.callToActionButton];

        self.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5f];
        self.titleLabel.textColor = [UIColor colorWithWhite:0.86 alpha:1.0f];
        self.mainTextLabel.textColor = [UIColor colorWithWhite:0.86 alpha:1.0f];
        self.titleLabel.font = [UIFont fontWithName:@"Roboto-Bold" size:15.0];
        self.mainTextLabel.font = [UIFont fontWithName:@"Roboto-Regular" size:13.0];

    }
    return self;
}

- (void)layoutAdAssets:(MPNativeAd *)adObject
{
    [adObject loadTitleIntoLabel:self.titleLabel];
    [adObject loadTextIntoLabel:self.mainTextLabel];
    [adObject loadCallToActionTextIntoButton:self.callToActionButton];
//    [adObject loadCallToActionTextIntoLabel:self.callToActionButton.titleLabel];
    [adObject loadIconIntoImageView:self.iconImageView];
    [adObject loadImageIntoImageView:self.mainImageView];
}

+ (CGSize)sizeWithMaximumWidth:(CGFloat)maximumWidth
{
    if (iPhone4 || iPhone5)
    {
        return CGSizeMake(maximumWidth, 305 + 5);
    }
    else if (iPhone6)
    {
        return CGSizeMake(maximumWidth, 330 + 8);
    }
    else
    {
        return CGSizeMake(maximumWidth, 355 );
    }
    return CGSizeMake(maximumWidth, 295 + 15);
}

I hope this will be helpful to you.

Note: Whichever tableview method you are using, use the methods with mp_ prefix in your ViewController.