2011-07-20 30 views
1

我正在使用Flash Builder 4.5构建iPhone应用程序。AIR - iPhone上的StageWebView

为了展示广告,我计划使用StageWebView并加载包含广告代码的网页。

假设广告的尺寸为320x50像素。所以ActionScript代码将类似于此:

adView = new StageWebView(); 
adView.loadURL("http://www.myadishere.com/ad.html"); 
var top:Number = navigator.actionBar.measuredHeight + 1 
adView.viewPort = new Rectangle(0, top, 320, 50); 
adView.stage = stage; 

在应用程序中,我设置了applicationDPI =“160”所以当上的iPhone3和iPhone4运行该应用程序显示正常。 但是StageWebView的内容在iPhone4上看起来很小。 如果我做adView.drawViewPortToBitmapData()位图的大小是确定的。

所以问题是如何使StageWebView内容相应地缩放,因此无论屏幕DPI如何,它看起来都不错?

回答

4
You need to scale by yourself. Here is sample code. 


<?xml version="1.0" encoding="utf-8"?> 
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="100%" top="0"> 
    <fx:Declarations> 
    </fx:Declarations> 
    <fx:Script> 
     <![CDATA[ 
      import mx.core.FlexGlobals; 
      import mx.core.IVisualElement; 
      import mx.events.FlexEvent; 

      import spark.components.View; 
      import spark.events.ViewNavigatorEvent; 

      [Bindable] 
      public var htmlText:String; 
      public var url:String; 
      private var swv:StageWebView; 
      private function resizeSWV():void{ 
       var currentFlexScalingFactor:Number=FlexGlobals.topLevelApplication.runtimeDPI/FlexGlobals.topLevelApplication.applicationDPI; 
       if(swv!=null){ 

    //swv.viewPort=new Rectangle(0, stage.stageHeight-height*currentFlexScalingFactor-FlexGlobals.topLevelApplication.tabbedNavigator.tabBar.height*currentFlexScalingFactor,width*currentFlexScalingFactor,height*currentFlexScalingFactor); 

    swv.viewPort=new Rectangle(0, systemManager.screen.height*currentFlexScalingFactor-height*currentFlexScalingFactor-FlexGlobals.topLevelApplication.tabbedNavigator.tabBar.height*currentFlexScalingFactor,width*currentFlexScalingFactor,height*currentFlexScalingFactor); 

       } 
      } 

     ]]> 
    </fx:Script> 
    <s:creationComplete> 
     <![CDATA[ 
     swv=new StageWebView(); 
     resizeSWV(); 
     swv.stage=stage; 


     var htmlString:String=htmlText; 
     var urlL:String=url; 

     swv.loadURL(url); 
     (owner as View).addEventListener(ViewNavigatorEvent.REMOVING, 
     function(event:ViewNavigatorEvent):void{ 
      swv.viewPort=null; 
      swv.dispose(); 
      swv=null; 
     } 
     ); 
     ]]> 
    </s:creationComplete> 
    <s:resize> 
     resizeSWV(); 
    </s:resize> 
</s:Group> 

This is for TabbedViewNavigatorApplication. 
+0

这里的一些信息已经过时。但总的想法是一样的。它对我来说很好4.6-SDK我现在从我的nexus到我的galaxy nexus,到我的xoom,获得了一个好的舞台webview规模。 – brybam

-1

首先,您为什么需要手动设置DPI?问题是,iPhone 4的DPI远远高于160(我认为它是双倍的,但不要拿我的话来说)。为什么不让应用程序根据相对值(百分比)调整大小,甚至根据分辨率采用不同的布局。你总是可以检查Capabilities.pixelAspectRatio看看dpi是什么,并相应地改变事物。

再一次,如果是我,我会使用百分比来处理大多数事情。它调整得更好,整体代码更少。

+0

我可以调整应用程序“手动”,但与StageWebView中的内容的问题依然存在。 在iPhone3上,viewPort的尺寸为320x50像素,但在iPhone4上尺寸为640x100像素 - 我如何才能让网页的内容缩放到视口的大小? – strah

+1

根据视口的大小,您可以让StageWebView加载不同大小的“广告”。无论是这个还是你的广告都可以根据百分比调整大小。 –

+0

如何根据百分比缩放广告(HTML内容)?我试图玩'视口'meta标签。看来这个标签的支持没有在StageWebView中实现。不幸的是,根据DPI加载不同的内容不是一种选择... – strah

2

尝试添加以下代码到你的HTML,在<head>部分:

<meta name="viewport" content="width=XXXpx, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

替代 “XXX” 与您的旗帜/的StageWebView宽度。这应该使照片以您打算的尺寸显示。

0

@OMA我认为StageWebView是一个小错误。当我在(HTML)中放入:

<meta name="viewport" content="initial-scale=x.x"> 

iPhone应用程序崩溃。任何'......规模'都会使应用程序崩溃。没有'......规模'指令,它工作正常。

我此刻的代码是:

<meta name="viewport" content="width=320px, height=50px, user-scalable=no"> 
<style type="text/css"> 

body, html {margin: 0 0; padding: 0 0; overflow: hidden;} 
body {width: 320px; height: 50px;} 
html {height: 50px;} 

这样的工作 - 在不正确的大小ADL节目内容,但在大多数情况下,iPhone本身就说明,它应该是广告。但是有时广告显示在一半大小 - 不知道为什么 - 这是完全一样的HTML页面和相同的AS代码的所有的时间,但该广告显示方式而异

0

下面是我要做的事:

<?xml version="1.0" encoding="utf-8"?> 
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
viewActivate="openSWV(event)" 
viewDeactivate="closeSWV(event)"> 

    <s:states> 
     <s:State name="portrait"/> 
     <s:State name="landscape"/> 
    </s:states> 

    <s:navigationContent> 
     <s:Button icon="@Embed('assets/icons/back.png')" label.landscape="Back" click="navigator.popView()"/> 
    </s:navigationContent> 

    <s:titleContent> 
     <s:Label text="Help" color="#FFFFFF" textAlign="center" fontWeight="bold" width="100%" /> 
    </s:titleContent> 

    <fx:Declarations> 
     <fx:String id="_help"> 
      <![CDATA[ 
      <html> 
      <body> 
      <p>Blah blah blah</p> 
      </body> 
      </html> 
      ]]> 
     </fx:String> 
    </fx:Declarations> 

    <fx:Script> 
     <![CDATA[ 
      import mx.core.FlexGlobals; 
      import mx.events.FlexEvent; 
      import flash.media.StageWebView; 

      private var _swv:StageWebView; 

      private function openSWV(event:Event=null):void { 
       _swv = new StageWebView(); 
       stage.addEventListener(Event.RESIZE, resizeSWV); 

       _swv.stage = stage; 
       resizeSWV(); 

       _swv.loadString(_help, 'text/html'); 
      } 

      private function closeSWV(event:Event=null):void { 
       stage.removeEventListener(Event.RESIZE, resizeSWV); 
       if (! _swv) 
        return; 
       _swv.dispose(); 
       _swv = null; 
      }   

      private function resizeSWV(event:Event=null):void { 
       if (! _swv) 
        return; 

       var scale:Number = FlexGlobals.topLevelApplication.runtimeDPI/FlexGlobals.topLevelApplication.applicationDPI; 

       // align to the right-bottom corner 
       _swv.viewPort = new Rectangle(stage.stageWidth - scale * width, stage.stageHeight - scale * height, scale * width, scale * height); 

      } 
     ]]> 
    </fx:Script> 
</s:View> 

我对齐到右下角,因为我使用了SplitViewNavigator

如果你只是想对齐底部,只需使用:

_swv.viewPort = new Rectangle(0, stage.stageHeight - scale * height, scale * width, scale * height); 
相关问题