如何在Flex Mobile App中翻转时自动调整页面大小

时间:2011-08-16 22:36:42

标签: flex actionscript-3

这可能是一个简单的问题,但由于某些原因,我似乎无法弄清楚如何在Flex移动应用程序中从横向更改为纵向时自动调整页面大小。

即。我有一个显示收集客户信息的菜单的页面,我已经说明了我希望如何使用Portrait,但如果我切换到横向格式,则格式化会导致信息不在屏幕上。

这可能是一个我应该知道答案的问题,但是有没有人对如何做这样的事情有任何想法?

提前感谢任何建议!

示例页面

    <?xml version="1.0" encoding="utf-8"?>
<s:View backgroundColor="0xF7F9FD" xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="Page1">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>


    <s:Group width="100%" height="100%">

        <s:VGroup verticalAlign="top" paddingTop="5" width="100%" height="100%" horizontalAlign="center">
            <s:Image id="OLICLogo" verticalAlign="top" horizontalAlign="left" source="@Embed('PuritanLogo.jpg')"/>
        </s:VGroup>

        <s:VGroup>
            <s:HGroup paddingTop="125" paddingLeft="40">
                <s:Label id="lblJoint" text="Joint Application" paddingTop="10"/>
                <s:CheckBox id="chkBoxJoint"/>  
            </s:HGroup>
        </s:VGroup>

        <s:VGroup>
            <s:HGroup paddingTop="110" paddingLeft="60">
                <s:Label id="lblTitle" paddingLeft="250" text="Personal Information" fontStyle="italic" fontWeight="bold" fontSize="16" paddingTop="10"/>   
            </s:HGroup>
        </s:VGroup>


        <s:VGroup paddingLeft="375" paddingTop="200" horizontalAlign="center">
            <s:Line visible="true" xFrom="70" xTo="70" yFrom="300" yTo="870">
                <s:stroke>
                    <s:SolidColorStroke color="0x000000" weight="2"/>
                </s:stroke>
            </s:Line>
        </s:VGroup>

        <s:VGroup paddingLeft="40" paddingTop="180">
            <s:HGroup>
                <s:Label id="lblClient" fontWeight="bold" fontSize="16" paddingLeft="125" paddingRight="300" text="Client"/>
                <s:Label id="lblSpouse" fontWeight="bold" fontSize="16" text="Spouse"/>
            </s:HGroup>

        </s:VGroup>

        <s:VGroup paddingLeft="50" paddingTop="240">
            <s:Label id="lblCFName" paddingTop="10" text="First Name: "/>
            <s:Label id="lblCMName" paddingTop="20" text="Middle Name: "/>
            <s:Label id="lblCLName" paddingTop="20" text="Last Name: "/>
            <s:Label id="lblCDOB" paddingTop="20" text="DOB: "/>
            <s:Label id="lblCAddress" paddingTop="50" text="Address: "/>
            <s:Label id="lblCCity" paddingTop="20" text="City: "/>
            <s:Label id="lblCState" paddingTop="20" text="State: "/>
            <s:Label id="lblCZip" paddingTop="20" text="Zip Code: "/>
            <s:Label id="lblCEmail" paddingTop="50" text="Email Address: "/>
            <s:Label id="lblCPhone" paddingTop="20" text="Phone Number: "/>
            <s:Label id="lblCCell" paddingTop="20" text="Cell Phone: "/>
        </s:VGroup>

        <s:VGroup paddingLeft="170" paddingTop="240">
            <s:TextInput width="175" id="txtICFName"/>
            <s:TextInput width="175" id="txtICMName"/>
            <s:TextInput width="175" id="txtICLName"/>
            <s:TextInput width="175" id="txtICDOB"/>
        </s:VGroup>

        <s:VGroup paddingLeft="170" paddingTop="430">
            <s:TextInput width="175" id="txtICAddress"/>
            <s:TextInput width="175" id="txtICCity"/>
            <s:TextInput width="175" id="txtICState"/>
            <s:TextInput width="175" id="txtICZip"/>
        </s:VGroup>

        <s:VGroup paddingLeft="170" paddingTop="620">
            <s:TextInput width="175" id="txtICEmail"/>
            <s:TextInput width="175" id="txtICPhone"/>
            <s:TextInput width="175" id="txtICCell"/>
        </s:VGroup>

        <s:VGroup paddingLeft="410" paddingTop="240">
            <s:Label id="lblSFName" paddingTop="10" text="First Name: "/>
            <s:Label id="lblSMName" paddingTop="20" text="Middle Name: "/>
            <s:Label id="lblSLName" paddingTop="20" text="Last Name: "/>
            <s:Label id="lblSDOB" paddingTop="20" text="DOB: "/>
            <s:Label id="lblSAddress" paddingTop="50" text="Address: "/>
            <s:Label id="lblSCity" paddingTop="20" text="City: "/>
            <s:Label id="lblSState" paddingTop="20" text="State: "/>
            <s:Label id="lblSZip" paddingTop="20" text="Zip Code: "/>
            <s:Label id="lblSEmail" paddingTop="50" text="Email Address: "/>
            <s:Label id="lblSPhone" paddingTop="20" text="Phone Number: "/>
            <s:Label id="lblSCell" paddingTop="20" text="Cell Phone: "/>
        </s:VGroup>

        <s:VGroup paddingLeft="530" paddingTop="240">
            <s:TextInput width="175" id="txtISFName"/>
            <s:TextInput width="175" id="txtISMName"/>
            <s:TextInput width="175" id="txtISLName"/>
            <s:TextInput width="175" id="txtISDOB"/>
        </s:VGroup>

        <s:VGroup paddingLeft="530" paddingTop="430">
            <s:TextInput width="175" id="txtISAddress"/>
            <s:TextInput width="175" id="txtISCity"/>
            <s:TextInput width="175" id="txtISState"/>
            <s:TextInput width="175" id="txtISZip"/>
        </s:VGroup>

        <s:VGroup paddingLeft="530" paddingTop="620">
            <s:TextInput width="175" id="txtISEmail"/>
            <s:TextInput width="175" id="txtISPhone"/>
            <s:TextInput width="175" id="txtISCell"/>
        </s:VGroup>

        <s:VGroup paddingTop="800" paddingLeft="325" horizontalAlign="center">
            <s:Button id="btnContinue" click="btnContinue_clickHandler(event)" label="Continue"/>
        </s:VGroup>

    </s:Group>

    <fx:Script>
        <![CDATA[
            protected function btnContinue_clickHandler(event:MouseEvent):void
            {
                navigator.pushView(AFEAW.Page2);
            }

        ]]>
    </fx:Script>

</s:View>

2 个答案:

答案 0 :(得分:2)

Read this article

简而言之,请听听舞台上发出的StageOrientationEvent.ORIENTATION_CHANGE

在你的事件听众中;做东西。

有关StageOrientationEvent

的更多信息

我不确定您的主应用程序代码或视图是否会触发此事件。

答案 1 :(得分:0)

对于移动应用,我尝试使用约束(顶部,底部,左侧,右侧,verticalCenter,horizo​​ntalCenter)和百分比宽度/高度 - 以便在方向更改时我不用太担心。当我担心时,我依赖于观察状态。

如果您使用的是Flex View类,则只有在阻止方向更改时才需要StageOrientationEvent.ORIENTATION_CHANGE。

原因是View类会自动为您设置“纵向”或“横向”视图状态,前提是您的实现只包含portrait/landscape view state。以下是getCurrentState()类的View方法:

public function getCurrentViewState():String
{
    var aspectRatio:String = FlexGlobals.topLevelApplication.aspectRatio;

    if (hasState(aspectRatio))
        return aspectRatio;

    // If the appropriate state for the orientation of the device
    // isn't defined, return the current state
    return currentState;
}

因此,如果您的View班级有这样的州:

<s:states>
    <s:State name="portrait" stateGroups="portraitStates,whatever"/>
    <s:State name="landcsape" stateGroups="landscapeStates"/>
    <s:State name="landscapeWithControls" stateGroups="landscapeStates"/>
</s:states>

然后,您可以在Flex 4中使用这些具有强大视图状态语法的stateGroup名称来处理所有其他定向杂务。

对于具有复杂视图状态的视图,覆盖getCurrentViewState()并添加其他州名称非常方便:

override public function getCurrentViewState():String
{
    var state:String = super.getCurrentViewState();
    if (someCondition)
    {
        state+="withControls";
    }
    return state;
}