Question

我需要在底部屏幕的宽度上划出/填充我的横幅广告。

我的代码适用于宽度等于 MOPUB_BANNER_SIZE.width 或 MOPUB_LEADERBOARD_SIZE.width 的设备但在其他设备（iPhone 5/6 /等和一些iPad）上，我唯一的选择是将横幅放在中心位置。这是代码：

if(!_mopubBanner){
    NSString* bannerID;
    const CGSize* bannerSize;
    if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){
        bannerID = @"MopubBannerId";
        bannerSize = &MOPUB_BANNER_SIZE;
    }
    else{
        bannerID = @"MopubLeaderboardId";
        bannerSize = &MOPUB_LEADERBOARD_SIZE;
    }

    _mopubBanner = [[MPAdView alloc] initWithAdUnitId:bannerID size:*bannerSize];
    _mopubBanner.delegate = self;

    CGRect BannerFrameRect;
    if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
    {
        BannerFrameRect = CGRectMake(([[UIScreen mainScreen] bounds].size.width - MOPUB_BANNER_SIZE.width) / 2,
                                    [[UIScreen mainScreen] bounds].size.height - MOPUB_BANNER_SIZE.height,
                                    MOPUB_BANNER_SIZE.width,
                                    MOPUB_BANNER_SIZE.height);
    }
    else
    {
        BannerFrameRect = CGRectMake(([[UIScreen mainScreen] bounds].size.width - MOPUB_LEADERBOARD_SIZE.width) / 2,
                                    [[UIScreen mainScreen] bounds].size.height - MOPUB_LEADERBOARD_SIZE.height,
                                    MOPUB_LEADERBOARD_SIZE.width,
                                    MOPUB_LEADERBOARD_SIZE.height);
    }

    _mopubBanner.frame = BannerFrameRect;
}

我已尝试为BannerFrameRect设置自定义尺寸，但横幅广告只是将其自身调整到新框架的左上角。它没有缩放。

有没有办法调整广告尺寸？

谢谢

Answer 1

请在此处查看MoPub的示例代码：

https://github.com/mopub/mopub-ios-sdk/blob/master/MoPubSampleApp/Controllers/MPLeaderboardBannerAdDetailViewController.m

您可以在UIView中使用自动调整大小，在您的情况下，您只需将以下内容添加到代码中：

<!DOCTYPE html>
<html>
<!-- example on http://torontographic.wordpress.com/ -->
<head>
<meta charset="utf-8" />
<title>Single Fixed Table</title>
<style type="text/css">
body, html {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
  background-color: #333;
    width: 100%;
    height: 100%;
}
* {
    margin: 0px;
    padding: 0px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#container {
    position: absolute;
    left: 50px;
    top: 40px;
    background: cyan;
}
#layersDiv, #layers-table, #container {
    width: 700px;
}
#viewport {
    overflow-x: scroll;
    overflow-y: hidden;
    width: 483px; /* 500 minus 17px scrollbar width */;
    margin-left: 200px;
}
#headerL, #headerR {
    position: absolute;
    height: 25px;
    z-index: 200;
}
#headerL {
    width: 200px;
    background: #f2f5f7;
}
#headerR {
    left: 200px;
    width: 483px; /* 500 minus 17px scrollbar width */;
    overflow-x: hidden;
    background: #f2f5f7;
    overflow: hidden;
}
#layersDiv {
    position: absolute;
    left: 0px;
    top: 0px;
    overflow-x: hidden;
    overflow-y: scroll;
}
#layersDiv, #layers-table, #viewport, #container {
    border-collapse: collapse;
    border-style: hidden;
    height: 180px;
    background: white;
}
#layers-table .layer {
    position: absolute;
    left: 0px;
    width: 200px;
    height: 25px;
}
#layers-table td {
    height: 25px;
    text-align: left;
    border-top: 1px solid Gainsboro;
    border-right: 1px solid Silver;
}
#layers-table {
    margin-top: 25px;
}
.lastrow {
    min-height: 50px;
}
/* timeline ruler*/
#ruler {
    position: relative;
    top: 0;
    left: 0;
    width: 1000px;
    height: 25px;
    background: #f2f5f7;
    border-bottom: #ccc 1px solid;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" 
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
  var ie = !!window.navigator.userAgent.match(/MSIE|Trident|Edge/); //IE screw ups

$("#layersDiv").on('scroll',function(e) { //trick to the single table layout
  if (ie) { $("#viewport").css('overflow-x','hidden'); } //hide horizontal in IE since IE does know how to reflow paint updates.
  var y = $("#layersDiv").scrollTop();
  var h = $("#layersDiv").height();
  $("#viewport").height(h+y);
});
/*IE fires mouseup (or not, depending on which version) when clicking scrollbar. Got to use mouseout*/
$('#layersDiv').on('mouseout',function(e) { if (ie) { $("#viewport").css('overflow-x','scroll'); } });

$('#viewport').on('scroll',function(e) { //need to update ruler position
  $('#headerR').scrollLeft($("#viewport").scrollLeft());
});

$('#layers-table tr:not(:last-child)').on('mousedown',function(e) {
  $('#layers-table td').css( 'background-color','white' );
  $(this).children('td').css( 'background-color','#d8eaf7' );
});

function drawRuler(){
  var canvas = $('#ruler')[0], tick=0, innerTicks=0, count=0; spacing = 10.0,y=0;
  canvas.width=$('#ruler').width(); canvas.height=$('#ruler').height();
  var context= canvas.getContext('2d');
  context.fillStyle = "#808080"; context.strokeStyle="#ccc";
  context.lineWidth = 1; context.font = "11px Arial";
  for(var i=0; i<canvas.width; i++){
    if(innerTicks==3){y=5;tick=25;innerTicks=0}else{y=20;tick=24;innerTicks++}
    var topPos = (i*spacing);
    var x = Math.floor(topPos)+.5;
    context.beginPath();
    context.moveTo(x,y);
    context.lineTo(x,tick);
    if (tick===25) {count++;context.fillText(count+'s',x,15);}
    context.stroke();
  };
}
drawRuler();
}); //end ready
</script>
</head>

<body>

<div id="container">
  <div id="headerL">I don't move </div>
  <div id="headerR">
    <canvas id="ruler">
    </canvas></div>
  <div id="layersDiv">
    <div id="viewport">
      <table id="layers-table">
        <tr id="1">
          <td class="layer">Track 1 </td>
          <td>Audio 1</td>
        </tr>
        <tr id="2">
          <td class="layer">Track 2 </td>
          <td>Audio 2</td>
        </tr>
        <tr id="3">
          <td class="layer">Track 3 </td>
          <td>Audio 3</td>
        </tr>
        <tr id="4">
          <td class="layer">Track 4 </td>
          <td>Audio 4</td>
        </tr>
        <tr id="5">
          <td class="layer">Track 5 </td>
          <td>Audio 5</td>
        </tr>
        <tr id="6">
          <td class="layer">Track 6 </td>
          <td>Audio 6</td>
        </tr>
        <tr id="7">
          <td class="layer">Track 7 </td>
          <td>Audio 7</td>
        </tr>
        <tr id="8">
          <td class="layer">Track 8 </td>
          <td>Audio 8</td>
        </tr>
        <tr id="lastrow" class="nodrag">
          <td class="layer lastrow"></td>
          <td>last row to pad for scrollbar below</td>
        </tr>
      </table>
    </div>
  </div>
</div>

</body>

</html>

希望这有帮助！

Answer 2

您有两个可行的解决方案：

使用自动调整遮罩

_mopubBanner.translatesAutoresizingMaskIntoConstraints = YES;
_mopubBanner.autoresizingMask = UIViewAutoresizingFlexibleWidth;

您可能需要手动设置height，因为您只需要“水平”拉伸。

更好的IMO - 使用Autolayouts。为此，我建议使用PureLayout，因为它非常明确且有用。

_mopubBanner.translatesAutoresizingMaskIntoConstraints = NO;
[_mopubBanner autoPinEdgesToSuperviewEdgesWithInsets:UIEdgeInsetsZero excludingEdge:ALEdgeTop];

调整MoPub iOS横幅广告的大小？

2 个答案: