如何使用MPTableViewAdPlacer实现动态单元高度的iOS原生广告?

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.

我正在使用一个MPTableViewAdPlacer来在iOS UITableView中实现原生广告。在初始化MPTableViewAdPlacer时，它会请求一个mpstaticnative肾上腺素设置，它需要实现一个viewSizeHandler。然而，这是在获取任何广告之前，因为这个名字暗示了“静态”原生广告。我正在尝试实现一个在获取adData后可以计算单元高度的方法，比如标题，图片等等。我一直在寻找实现动态单元格高度的方法，但是所有的示例应用程序，twitter提供的说明只显示静态高度实现。

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];
}

3 个解决方案

#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.

您需要根据屏幕和tableview来决定高度和宽度。我在运行时设置了所有的组件，并且工作得很好。

I am setting up mopub using.

我正在使用mopub。

-(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.

我为MoPubAd创建了tableviewcell。

MoPubAdTableViewCell.h

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

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.

注意:无论使用哪个tableview方法，都要在视图控制器中使用带mp_前缀的方法。

#2

After contacting Twitter tech support, I confirmed that currently iOS does not support dynamic cell height. The only way is to size your views according to the best practice as @Vatsal K pointed out in his comments above.

联系Twitter技术支持后，我确认目前iOS不支持动态单元高度。唯一的方法是根据@Vatsal K在上面的评论中指出的最佳实践来评估您的视图。

#3

Update: While the method below works for the stock MoPub Marketplace adapters, I've found a bug in MoPub's SDK that can cause issues with other adapters. Specifically, Facebook's privacy icon view won't appear if you use this method. retrieveAdViewForSizeCalculationWithError calls retrieveViewWithAdapter. This instantiates a new adview for sizing purposes (so this method is also probably not very efficient). The problem arises in that method when it adds a custom network adapters privacy view as a subview. Because MoPub does not instantiate a new adapter, the adapter's privacy view is added as a subview to this template adview and removed from the real adview. Tread carefully.

更新:虽然下面的方法适用于stock MoPub Marketplace适配器，但我在MoPub的SDK中发现了一个bug，它可能会导致其他适配器的问题。具体来说，如果你使用这种方法，Facebook的隐私图标视图将不会出现。retrieveViewWithAdapter retrieveAdViewForSizeCalculationWithError调用。这个实例化了一个用于分级的新的adview(所以这个方法也可能不是很有效)。当该方法将自定义网络适配器隐私视图添加为子视图时，会出现问题。因为MoPub不实例化新的适配器，所以适配器的隐私视图作为子视图添加到模板adview中，并从真正的adview中删除。谨慎行事。

---

I've found a workaround but it relies on a constant not exposed by the MoPub SDK interface.

我找到了一个变通方法，但它依赖于一个不被MoPub SDK接口公开的常量。

If you look at MPStreamAdPlacer

看看MPStreamAdPlacer

- (CGSize)sizeForAd:(MPNativeAd *)ad withMaximumWidth:(CGFloat)maxWidth andIndexPath:(NSIndexPath *)indexPath
{
    id<MPNativeAdRenderer> renderer = ad.renderer;

    CGSize adSize;

    if ([renderer respondsToSelector:@selector(viewSizeHandler)] && renderer.viewSizeHandler) {
        adSize = [renderer viewSizeHandler](maxWidth);
        if (adSize.height == MPNativeViewDynamicDimension) {
            UIView *adView = [ad retrieveAdViewForSizeCalculationWithError:nil];
            if (adView) {
                CGSize hydratedAdViewSize = [adView sizeThatFits:CGSizeMake(adSize.width, CGFLOAT_MAX)];
                return hydratedAdViewSize;
            }
        }
        return adSize;
    }

This method is called by MPTableViewAdPlacer to get the size for the ad. It in turn uses the viewSizeHandler you set when configuring your placer. Notice that if the returned height is equal to MPNativeViewDynamicDimension (-1.0) then it falls back to calling -sizeThatFits: on the ad view.

MPTableViewAdPlacer调用此方法来获取广告的大小。它反过来使用配置placer时设置的viewSizeHandler。注意，如果返回的高度等于MPNativeViewDynamicDimension(-1.0)，则返回到调用-sizeThatFits:在ad视图上。

At this point the ad view has been configured with the data from the ad server so you can implement -sizeThatFits: and return a size appropriate for the content:

此时，ad视图已经配置了来自ad服务器的数据，因此您可以实现-sizeThatFits:并返回适合内容的大小:

// MoPub setup
MPStaticNativeAdRendererSettings *settings = [[MPStaticNativeAdRendererSettings alloc] init];
settings.renderingViewClass = [MyAdView class];
settings.viewSizeHandler = ^(CGFloat maxWidth) {
    return CGSizeMake(maxWidth, -1.0);
};

MyAdView class:

MyAdView类:

- (CGSize)sizeThatFits:(CGSize)size {

    // Inspect the configured labels and images to determine appropriate height for given size.width
    CGFloat height = ...

    return CGSizeMake(size.width, height);
}

Warning

警告

MPNativeViewDynamicDimension is internal MPStaticNativeAdRenderer and so the value and behavior could potentially change without notice. Might be worth adding a check of the linked SDK version and if it changes issue a warning to check that the implementation is still valid

MPNativeViewDynamicDimension是内部的mpstaticnative肾上腺素，所以值和行为可能在没有通知的情况下发生变化。可能值得添加对链接的SDK版本的检查，如果更改，则发出警告，检查实现是否仍然有效