About

<#TEMPLATE_INCLUDE_NINEPAGE_ABOUTME#>
  • Jan

    17

    1、ScreenNavigator 的主要用于页面之间的导航,默认与 Starling 舞台大小相同,但可以手动设置宽与高。

    通过 addScreen() 方法添加 ScreenNavigatorItem 对象,用一个字符串作为 ID 与之关联。

    2、ScreenNavigatorItem 构造函数第一个参数可以传入一个类,也可以是实例对象,一般情况下推荐使用类。

     传入的类,一般需要实现 IScreen 类(但不是必须的),推荐直接简单的扩展 Screen、PanelScreen、ScrollScreen 类使用(它们都有一个 owner 属性指向 ScreenNavigator 对象)。

    3、显示指定的屏幕时调用 showScreen() 方法并传入字符串 ID。

    4、要访问 ScreenNavigator 对象中当前正在使用的页面,可以用 activeScreen 属性。

    5、clearScreen() 方法会移除 ScreenNavigator 当前的显示页面。

    6、页面之间交换的切换可以简单的通过事件与 setScreenIDForEvent() 方法实现(常规的还是调用 showScreen())。

    7、页面切换时可以调用大量的过渡动画效果类,每一个类下面有一种或多种静态方法,类似一个淡入的效果:

    this._navigator.transition = Fade.createFadeInTransition();

    动画管理器类(TransitionManager)也可以用于页面切换时的过渡动画效果控制,但这里的 transition 属性是一个函数类型。

    8、ScreenNavigator 可以侦听导航组件过渡动画的开始与结束事件 FeathersEventType.TRANSITION_START、FeathersEventType.TRANSITION_COMPLETE

    如果是侦听某个指定/特定的页面过渡动画,可以对 Screen 相关的页面侦听以下事件:

    FeathersEventType.TRANSITION_IN_START
    FeathersEventType.TRANSITION_IN_COMPLETE 
    FeathersEventType.TRANSITION_OUT_START
    FeathersEventType.TRANSITION_OUT_COMPLETE.

     这也是第2条中推荐简单的扩展 Screen、PanelScreen、ScrollScreen 类原因之一。

    另外需要小心一点,既便没有使用过渡动画相关的类,有可能也会派发 FeathersEventType 相关的事件(在一个页面被开始添加或一个页面被移除时发生)。

    9、ScreenNavivatorItem 对象可以给 properties 属性进行赋值(属性注入),注入的属性修饰词要使用 public (它会发生在构造之后,添加到舞台之前):

    this._optionsData = new OptionsData();

    var optionsItem:ScreenNavivatorItem = new ScreenNavigatorItem( OptionsScreen );
    optionsItem.properties.options = this._optionsData;

    //在 OptionsScreen 类中定义public 的 options,与 optionsItem.properties.options 匹配
    protected var _options:OptionsData;

    //更新数据
    public function get options():OptionsData
    {
        return this._options;
    }

    //如果果不是简单的更新数据,同时还要需要更新屏幕,调用invalidate()方法后,feathers组件会draw()重绘
    public function set options( value:OptionsData ):void
    {
        if(this._options == value)
        {
            return;
        }
        this._options = value;
        this.invalidate( INVALIDATION_FLAG_DATA );
    }

    其实也可以在构造阶段注入与页面相关的初始化参数(ScreenNavivatorItem 构造函数的第三个参数)。不管哪一种注入方式,都需要注意一正点传入的参数值是值类型还是引用类型。

    10、ScreenNavivatorItem 还提供了其它一些高级功能,比如使用 setFunctionForEvent() 回调一个函数,类似代码:

    var mainMenuItem:ScreenNavigatorItem = new ScreenNavigatorItem( MainMenuScreen );
    ///这个用于切换页面至 ID 为 OPTIONS 常量引用的页面
    mainMenuItem.setScreenIDForEvent( MainMenuScreen.SHOW_OPTIONS, OPTIONS );

    //这个用于回调函数
    mainMenuItem.setFunctionForEvent( MainMenuScreen.LINK_TO_HOME_PAGE, openHomePageLink );

    protected function openHomePageLink():void
    {
        navigateToURL( new URLRequest( "http://www.example.com/" )"_blank" );
    }

    11、开发者可以使用 signals(as3-signals 库)机制取代 AS3 事件导航,这个 signals 库并不是 Feathers 进行开发时必要的库,但 Feathers 会自动检查是否编译进了这个库,如果发现这个库被编译进去了,ScreenNavivator 调用事件时会有一些特殊的检测过程(信号会优先于事件)。

    ScreenNavivatorItem 第二个参数名称虽然是 events ,但它的类型却是 Object 类型,所以传入时可以是 Event 对象或 Signals 对象。

    12、StackScreenNavigator 基本使用方法与 ScreenNavigator 类似,特点是带有历史堆栈记录,可以简单的返回前面访问过的页面,允许通过 push 或 pop 来管理页面。

    13、TabNavigator 基本使用方法与 ScreenNavigator 类似,特点是带了一个工具条,允许通过工具条来导航页面。

    Jan

    17

     Feathers2.x 中包含了 Scale9Image、Scale3Image、TiledImage 这些组件。

    以前使用流程基本上是:

    Texture→Scale3Texture→Scale3Image

    Texture→Scale9Texture→Scale9Image

    Texture→TiledTexture→TiledImage 

    现在,从 Feathers3 开始, Feathers2.x 中 Scale9Image、Scale3Image、TiledImage 这些组件都没了。通过升级版的(迁移的) Starling 2.0 Image 对象的 scale9Grid 与 tileGrid 属性可以直接实现了。

    TiledImage 纹理缩放时,可能会产生一些透明的边隙,使用 TexturePacker 的 “Extrude” 设置较大的值可以解决这种问题。

    Jan

    17

    Feathers3 Drawers 一些备注

    • 0 Comments
    • Flash Platform

    1、Drawers 默认会将尺寸大小设为与 Starling 舞台大小一样,但也可以手动设置修改,指定明确的尺寸值。

    2、主内容容器(main content,content 属性引用)的尺寸会自动与 Drawers 对象保持相同尺寸。

    main content 一般为屏幕导航类容器组件,如 ScreenNavigator 组件。

    Jan

    17

    Feathers3 ImageLoader 一些备注

    • 0 Comments
    • Flash Platform

    ImageLoader 包装了 starling.display.Image 类(使用组合的方式,非继承关系)。可以给 source 提供纹理或 URL 字符串等。

    1、每个 ImageLoader 对象通过 URL 加载纹理图时,既便是相同的 URL 地址,也会创建新的纹理对象。比如 List 和 GroupedList 自定义的项呈现器中带有 ImageLoader 对象,调用相同的 URL ,会有额外的网络带宽开销、并影响性能。将纹理先存储起来再使用是一个比较好的方式(TextureCache)。

    2、pixelSnapping 属性能让像素更清晰。

    3、delayTextureCreation 属性设为 true,可以控制图像加载到内存,但不立即传输到 GPU 进行纹理创建。

    a、在滚动类容器中可以让滚动效果平滑、提高性能。只要一旦设为 false 会立即提交至 GPU 进行纹理创建并显示,如果是在滚动过程中,会产生卡顿感。

    b、delayTextureCreation 为 true 时,甚至可以使用 textureQueueDuration 指定特定的时间后提交 GPU 纹理创建。

    4、maintainAspectRatio 属性可以保持纹理图像的比例(这可能在左右两边或上下两边产生全透明的区域)。

    5、isLoaded 判断纹理是否已经加载。

    6、scaleFactor 可以对纹理进行缩放。

    7、color 跟 Starling 中 Image 对象的一样功能。

    8、smoothing 平滑设置。

    Jan

    17

    Feathers3 AnchorLayout 一些备注

    • 0 Comments
    • Flash Platform

    AnchorLayout 锚布局对象一般用在普通的 Feathers 容器控件对象中定位子对象的,一般如果带有数据提供者(data providers)、自带自动布局 layouts 的不会去用它,比如 List,GroupedList 这些组件不会用这种锚布局。

    锚布局同时支持尺寸与位置的布置,它比较好用的一个属性是 bottomAnchorDisplayObject,子对象如果是兄弟关系就可以进行相对定位,如:

    var button2:Button = new Button();
    button2.label = "Another Button";
    container.addChild( button2 );

    var layoutData2:AnchorLayoutData = new AnchorLayoutData();
    layoutData2.right = 10;
    layoutData2.bottom = 10;
    layoutData2.bottomAnchorDisplayObject = button1;//相对于 button1 对象进行锚布局
    button2.layoutData = layoutData2;

    Jan

    16

    HorizontalLayout 与 VerticalLayout :“水平”与“垂直”这两种自动布局对象是比较常用的。基本上大同小异,只是方向不同。Feathers 的容器组件如果带有 layout 属性,那么就支持使用这两种自动布局方式。

    1、两种对象都支持 horizontalAlign 与 verticalAlign 对齐方式,但被对齐对象的尺寸在方向上必须小于容器在同一个方向上的尺寸。比如 HorizontalLayout 对象如果想让这两个属性起作用,子对象的宽度必须小于设置了 layout 属性的容器对象的宽度。

    2、与对应的 HorizontalLayoutData、VerticalLayoutData 结合使用,可以支持百分比的方式布局子对象。如:

    var button1:Button = new Button();
    button1.label = "1";
    var button1LayoutData:HorizontalLayoutData = new HorizontalLayoutData();
    button1LayoutData.percentWidth = 25;//这个按钮水平方向占百分之25的宽度
    button1.layoutData = button1LayoutData;
    container.addChild(button1);

    var button2:Button = new Button();
    button2.label = "2";
    var button2LayoutData:HorizontalLayoutData = new HorizontalLayoutData();
    button2LayoutData.percentWidth = 75;//这个按钮水平方向占百分之75的宽度
    button2.layoutData = button2LayoutData;
    container.addChild(button2);

    还能方便的结合绝对尺寸与自动尺寸布局,如:

    var button1:Button = new Button();
    button1.label = "1";
    button1.width = 300;//绝对宽度300像素
    container.addChild(button1);

    var button2:Button = new Button();
    button2.label = "2";
    var button2LayoutData:HorizontalLayoutData = new HorizontalLayoutData();
    //虽然它写了100%,但它并不会与父容器的宽度相同,会先减去绝对尺寸对象(宽度300像素),剩下的才是它的
    button2LayoutData.percentWidth = 100;
    button2.layoutData = button2LayoutData;
    container.addChild(button2);

    HorizontalLayout 与 HorizontalLayoutData 对象结合自动布局时,也可以同时设置 percentHeight 的值,但子对象排序的方向是水平的(VerticalLayout 与 VerticalLayoutData 也一样支持 percentWidth 设置,但子对象排序是垂直方向的)。

    下面这样在同一个子对象上混合使用“绝对与相对”也可以

    var button1:Button = new Button();
    button1.label = "1";
    button1.width = 300;//宽度是300像素
    var button1LayoutData:HorizontalLayoutData = new HorizontalLayoutData();
    button1LayoutData.percentHeight = 100;//但高度是100%
    button1.layoutData = button1LayoutData;
    container.addChild(button1);

    var button2:Button = new Button();
    button2.label = "2";
    var button2LayoutData:HorizontalLayoutData = new HorizontalLayoutData();
    button2LayoutData.percentWidth = 100;//宽度占用了父容器减去300像素后剩余的全部宽度
    button2.layoutData = button2LayoutData;
    container.addChild(button2);

    通过 HorizontalLayoutData 构造函数可以快速的设置宽与高的相对百分比:

    new HorizontalLayoutData( 50100 )//width: 50%, height: 100%

    如果 HorizontalLayoutData 构造函数中传入 NaN 值表示在某个方向不设置百分比:

    button1.width = 300;
    button1.layoutData = new HorizontalLayoutData( NaN, 100 );

    但百分比的值总是优先使用的,如果既设置了对象的绝对尺寸,又同时通过 layoutData 属性设置了对象的百分比布局,那么起作用的是相对百分比布局,绝对尺寸设置将被忽略。

    3、默认情况下如果一个容器支持使用“虚拟化布局”(跟 Flex 列表项呈现器重用机制一样),那么 useVirtualLayout 默认为 true。一般来说很少被禁用。

    a、LayoutGroup 与 ScrollContainer 组件没有虚拟化布局的属性设置。

    b、默认情况下,启用虚拟化布局对象时的尺寸某一方向上宽度或高度相同,这有助于提高性能。

    c、设置 hasVariableItemDimensions  为 true 可以让每个项渲染器的尺寸不同,typicalItem 属性引用的对象被用于估算尺寸,但只有当数据真正被呈现的时候,才计算真实的尺寸用于精确的定位坐标。

    4、通过布局类能重新改变内置组件的布局,比如 List 和 GroupedList 默认都是垂直方面的,但也可以改成水平方向的。

    Jan

    16

    Feathers3 LayoutGroup 一些备注

    • 0 Comments
    • Flash Platform

    1、LayoutGroup 是一个轻量级的容器,无滚动条。默认通过手动方式绝对布置子对象的坐标,但也支持使用“自动布局对象”自动化布置子对象的坐标。

    通过 layout 属性可以与 HorizontalLayout 或 VerticalLayout 等自动化布局对象让子对象自动布局。

    2、LayoutGroup 不要子对象必须是 Feathers UI 的组件,可以是 Starling 显对象。

    3、LayoutGroup 默认情况下它的宽与高值是子对象的区域宽与高,但也可以手动修改宽与高。

    a、手动修改尺寸如果比子对象显示的区域还要小,子对象默认不会被“裁切”掉,但可以通过 clipContent 属性设为 true 进行裁切,但渲染性能会下降一些。

    b、clipContent 设为 true 之后 skipUnchangedFrames 属性依旧会起作用。

    4、LayoutGroup 最主要的皮肤相关的功能基本上就只有一个 backgroundSkin(背景皮肤)。

    比如一个 Starling 的 Image 对象,它会自动拉伸以匹配 LayoutGroup 宽与高。

    Jan

    16

    Callout 很类似 Alert 对象,也是通过调用一个静态的 show() 方法来显示的,参数基本类似,但有一个“目标源(origin)”参数用于定位 show() 显示的对象。

    TextCallout 扩展了 Callout  类,show() 的时候只渲染了一个文本对象。

    Jan

    16

    Button 的 Event.TRIGGERED 事件只有当 touch 开始与结束都在按钮上时才触发,如果在 touch 开始时,如鼠标或手指移到按钮的外面再释放(结束),那么是不会触发 Event.TRIGGERED 事件的;但如果 touch 开始后,鼠标或手指移到按钮外面,再移回到按钮上面,再结束,它还是会继续触发 Event.TRIGGERED 事件。

    ToggleButton 和 Button 大同小异。Event.CHANGE 事件可以侦听按钮的“开关”状态。Check 与 Radio 组件是 ToggleButton 子类,使用也类似。

    ButtonGroup 是一组水平或垂直布局的按钮组。dataProvider 会自动识别 ListCollection 对象中的字段。比如如下代码:

    group.dataProvider = new ListCollection(
    [
        { label: "One", triggered: oneButton_triggeredHandler },
        { label: "Two", triggered: twoButton_triggeredHandler },
        { label: "Three", triggered: threeButton_triggeredHandler },
    ]);

    ButtonGroup 对象会自动识别出 label 字段用于按钮的文本显示。其它类似:icon、isToggle、isSelected等这些字段都是可以用的(包括事件相关的字段比如 triggered、change 都可以用)。

    Jan

    16

    Feathers3 AutoComplete 一些备注

    • 0 Comments
    • Flash Platform

    AutoComplete 扩展了 TextInput 类,用于在输入时会弹出一个带有推荐选项的下拉列表。

    LocalAutoCompleteSource 默认会自动匹配包含输入的字符,既便输入的字符是属于单词的中间部份。如下代码中输入“ap”,除了匹配 Apple 外(这个 Apple 会自动被转换成小写的),还会匹配Grape。

    input.source = new LocalAutoCompleteSource( new ListCollection(new <String>
    [
        "Apple",
        "Banana",
        "Cherry",
        "Grape",
        "Lemon",
        "Orange",
        "Watermelon"
    ]));

    LocalAutoCompleteSource 还可以这样子自定义匹配方法:

    var source:LocalAutoCompleteSource = new LocalAutoCompleteSource();
    source.compareFunction = function( item:Object, textToMatch:String ):Boolean
    {
        return item.toString().toLowerCase().indexOf(textToMatch.toLowerCase()) == 0;
    };

    不过这个组件在移动开发时好像并没有多大用处……