Question

我正在使用Flash Builder 4.5构建iPhone应用程序。

为了展示广告，我计划使用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上运行时正确显示应用程序。然而，在iPhone4上，StageWebView的内容看起来很小。如果我 adView.drawViewPortToBitmapData（），位图的大小就可以了。

所以问题是如何使StageWebView内容相应地扩展，所以无论屏幕DPI如何，它看起来都不错？

Answer 1

 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.

Answer 2

尝试在<head>部分

中将以下代码添加到HTML中

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

用您的横幅/ StageWebView宽度替换“XXX”。这应该使图片看起来像你想要的大小。

Answer 3

@OMA我认为StageWebView是一个小小的错误。当（在HTML中）我把：

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

iPhone应用程序崩溃了。任何“......规模”都会使应用程序崩溃。没有'...-scale'指令就可以了。

我目前的代码是：

<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代码，但广告的展示方式各不相同

Answer 4

我是这样做的：

<?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);

Answer 5

首先，为什么需要手动设置DPI？问题是iphone 4 DPI远高于160（我认为它是双倍的，但不要相信我的话）。为什么不根据相对值（百分比）调整应用程序大小，甚至根据分辨率使用不同的布局。您可以随时查看Capabilities.pixelAspectRatio以查看dpi是什么，并相应地更改内容。

同样，如果是我，我会在大多数情况下使用百分比。它可以更好地调整大小，并且整体代码更少。

AIR - iPhone上的StageWebView

5 个答案: