flex mobile 配置应用程序以支持软键盘

来源:互联网 发布:网络的弊端英语作文 编辑:程序博客网 时间:2024/06/07 01:39
为支持软键盘,当键盘打开时,应用程序应当可以执行以下操作:
  • 根据剩余可用屏幕空间来调整应用程序大小,以免键盘会与应用程序发生重叠。

  • 滚动获得焦点的文本输入控件的父容器,以确保该控件可见。

配置系统以支持软键盘

在全屏模式下运行的应用程序不支持软键盘。因此,请确保 app.xml 文件中的 <fullScreen> 属性设置为默认值 false

请确保应用程序的呈示模式设置为 CPU 模式。呈示模式由应用程序 app.xml 描述符文件中的 <renderMode> 属性控制。请确保 <renderMode> 属性设置为默认值 cpu,而不是 gpu

注: 默认情况下,app.xml 文件中不包括 <renderMode> 属性。要更改其设置,请将其添加为 <initialWindow> 属性中的一个条目。如果 app.xml 文件中未包含此设置,则其默认值为 cpu

打开软键盘时滚动父容器

Application 容器的 resizeForSoftKeyboard 属性决定着应用程序的大小调整行为。如果 resizeForSoftKeyboard 属性是默认值 false,则键盘可以显示在应用程序的顶部。如果值为 true,则会调整应用程序大小,以减去键盘大小。

要支持滚动,文本输入控件必须使用基于 TextField 的外观,而不是基于 StageText 的外观。可通过相应地将 TextInput 或 TextArea 控件的 skinClass 属性指向 TextInputSkin 或TextAreaSkin 类来达到此目的。

要进行滚动,请将任何文本输入控件的父容器封装在 Scroller 组件中。当打开键盘的组件获得焦点时,Scroller 自动将该组件滚动到视图中。该组件也可以是 Scroller 组件的多个嵌套容器的子代。

父容器必须是 GroupBase 或 SkinnableContainer 类或其子类。获得焦点的组件必须实现 IVisualElement 接口,并且必须可以获得焦点。

通过将父容器封装在 Scroller 组件中,可以在键盘打开的情况下滚动该容器。例如,某个容器中包含多个文本输入控件。然后,您滚动到每个文本输入控件以输入数据。

当关闭键盘时,父容器可能小于可用屏幕空间。如果容器小于可用屏幕空间,Scroller 会将滚动位置恢复为 0,即容器的顶部。

下面的示例中显示的是带有多个 TextInput 控件和一个 Scroller 组件的 View 容器。
<?xml version="1.0" encoding="utf-8"?> <!-- containers\mobile\views\SparkMobileKeyboardHomeView.mxml --> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"         xmlns:s="library://ns.adobe.com/flex/spark"         title="Compose Email">         <s:Scroller width="100%" top="10" bottom="50">         <s:VGroup paddingTop="3" paddingLeft="5" paddingRight="5" paddingBottom="3">             <!-- Use TextField-based skins so that scrolling works. -->            <s:TextInput prompt="To" width="100%" skinClass="spark.skins.mobile.TextInputSkin"/>             <s:TextInput prompt="CC" width="100%" skinClass="spark.skins.mobile.TextInputSkin"/>             <s:TextInput prompt="Subject" width="100%" skinClass="spark.skins.mobile.TextInputSkin"/>             <s:TextArea height="400" width="100%" prompt="Compose Mail" skinClass="spark.skins.mobile.TextAreaSkin"/>         </s:VGroup>     </s:Scroller>         <s:HGroup width="100%" gap="20"               bottom="5" horizontalAlign="left">         <s:Button label="Send" height="40"/>         <s:Button label="Cancel" height="40"/>     </s:HGroup>    </s:View>

VGroup 容器是 TextInput 控件的父容器。Scroller 将 VGroup 封装起来,每个 TextInput 控件在获得焦点时,都将显示在键盘上方。

有关 Scroller 组件的更多信息,请参阅 Scrolling Spark containers。

打开软键盘时调整应用程序大小

如果 Application 容器的 resizeForSoftKeyboard 属性为 true,则应用程序会调整自身大小以在键盘打开时适合可用的屏幕区域。当关闭键盘时,应用程序恢复原有大小。

下例中显示的是一个应用程序的主应用程序文件,该应用程序通过将 resizeForSoftKeyboard 属性设置为 true 来允许调整应用程序大小。
<?xml version="1.0" encoding="utf-8"?><!-- containers\mobile\SparkMobileKeyboard.mxml --><s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"     xmlns:s="library://ns.adobe.com/flex/spark"     firstView="views.SparkMobileKeyboardHomeView"    resizeForSoftKeyboard="true"> </s:ViewNavigatorApplication>

要允许调整应用程序大小,请确保将应用程序 app.xml 描述符文件中 <softKeyboardBehavior> 属性设置为 none<softKeyboardBehavior> 属性的默认值为 none。此默认值将 AIR 配置为移动整个 Stage,来使获得焦点的文本组件可见。

尽管软键盘事件的可靠性足以保证大多时候的自动调整行为可以达到预期效果,但仍应尽量避免将关键的 UI 元素放在软键盘事件失败时软键盘可能遮盖到的位置。例如,请避免在视图的下半部分放置“确定”、“登录”或“提交”按钮。

当基于 StageText 的控件成为动画或参与动画时,运行时会临时将其替换为位图,以便文本与其他项目同步移动。如果该控件具有焦点,这将导致控件临时丢失焦点。在某些情况下,软键盘会在不隐藏软键盘的情况下隐藏或触发 softKeyboardDeactivate 事件。

尤其是当以编程方式将弹出窗口内的基于 StageText 的组件设为焦点,而由于软键盘导致窗口大小动态变化时,该问题特别明显。要避免此情况,请尽量在不会因软键盘而调整大小的弹出窗口内使用基于 StageText 的组件。

如果必须在可调整大小的弹出窗口中使用基于 StageText 的组件,请尝试首先显示软键盘并等待弹出窗口的动画完成,然后再以编程方式将基于 StageText 的组件设为焦点。作为替代方法,可以避免以编程方式在弹出窗口内设置焦点。

配置用于软键盘的弹出窗口

Callout 容器作为弹出窗口显示在移动设备应用程序的顶部。Callout 容器可以包含一个或多个接受键盘输入的组件。有关 Callout 容器的更多信息,请参阅使用 Callout 容器创建 callout。

使用 SkinnablePopUpContainer 容器(Callout 的父类)的属性配置弹出窗口与键盘的交互:

moveForSoftKeyboard 
如果为默认值 true,弹出窗口将在键盘打开时移至键盘上方。

resizeForSoftKeyboard 
如果为默认值 true,弹出窗口将在键盘打开时调整大小以适合键盘上方的可用空间。

如果 SkinnablePopUpContainer 的 moveForSoftKeyboard 或 resizeForSoftKeyboard 属性设置为 true,每当软键盘的可见性发生变化时,该容器都可能移动或发生大小调整。这两种自动行为都可能导致其他组件移动或发生大小变化。

避免这种情况的最简单方法是不将 resizeForSoftKeyboard 设置为 true。如果应用程序不会因软键盘而调整大小,则软键盘不会导致组件从用户手指下的位置移开。但是,这会导致软键盘遮盖一些应用程序的 UI。

如果应用程序需要自动调整大小,请置入交互式组件,这样,当在对其操作时,软键盘可见性的变化便不会导致其从用户手指的位置移开。要做到这一点,需要以下技术:
  • 不要为按钮、复选框或其他较小目标组件设置下约束,也不要将这些组件放置在设置了百分比高度的其他组件下方。

  • 尝试将布局设计为当显示或隐藏键盘时最底层组件的顶部保持固定。

  • 对于内置功能不能实现隐藏软键盘的平台,请提供一个固定的 UI 元素来实现该操作。这可以是专用于隐藏软键盘的按钮,也可以仅仅是足够大的固定空白边缘(可以轻敲该边缘以将焦点从文本组件移开)。

  • 不要垂直排列可能会移动的组件。这么做可能导致在软键盘的可见性发生变化时手势定位到错误的目标。



    原文地址: http://help.adobe.com/zh_CN/flex/mobileapps/WS82181550ec4a666a39bafe0312d9a274c00-8000.html

原创粉丝点击