About

<#TEMPLATE_INCLUDE_NINEPAGE_ABOUTME#>
  • 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;
    };

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

    Jan

    16

    Feathers3 Alert 一些备注

    • 0 Comments
    • Flash Platform

    Alert 组件实例的创建方式与创建其它组件有点不同,它不是通过调用构造函数来创建的,而是通过调用 Alert.show() 静态方法来创建的,这个方法第三个参数是一个 ListCollection 对象,定义一组按钮 ButtonGroup 对象与铵钮相关的事件回调函数:

    var alert:Alert = Alert.show( "I have something important to say""Warning"new ListCollection(
        [
            { label: "OK", triggered: okButton_triggeredHandler }
        ]) );

    除了能够侦听单个按钮的 Event.TRIGGERED 事件之外,还能侦听整个 Alert 对象的 Event.CLOSE 事件:

    alert.addEventListener( Event.CLOSE, alert_closeHandler );

    事件对象的 data 属性会包含(其实是引用吧)按钮组中与触发事件相关的按钮对象:

    function alert_closeHandler( event:Event, data:Object ):void
    {
        if( data.label == "OK" )
        {
            // the OK button was clicked
        }
    }

    icon 参数是可选的,它可以是任何 Starling 显示对象。

    isModal 参数是可选的,决定是否为模态窗口。

    Alert 显示的时候是通过 PopUpManager 的方法实现的。默认情况下,添加模态窗口时“叠加层(overlays)”的显示对象也是通过 PopUpManager 方法实现的,可以通过静态方法 overlayFactory() 来修改所有 Alert 的模态窗口叠加层。

    Alert.overlayFactory = function():DisplayObject
    {
        var tiledBackground:Image = new Image( texture );
        tiledBackground.tileGrid = new Rectangle();
        return tiledBackground;
    };

    这时调用 PopUpManager.addPopUp() 方法显示 alert 时,这个 overlayFactory() 生成的显示对象就有用了。

    isCentered 参数是可选的,决定 Alert 对象是否居中显示,设为 true 时如果窗口修改大小,它会重新居中。

    customAlertFactory 参数决定一个完全自定义的 Alert :

    function customAlertFactory():Alert
    {
        var alert:Alert = new Alert();
        alert.styleNameList.add( "custom-alert" );
        return alert;
    };
    Alert.show( "I have something important to say""Alert Title"new ListCollection({label: "OK"}), true, true, customAlertFactory );

    类似上面这段代码,可以通过主题文件(theme)来自定义这个名为 “custom-alert” 的 Alert 独特样式。

    可以通过如下代码来修改 alert 窗口中消息内容处的字体样式:

    alert.fontStyles = new TextFormat( "Helvetica"20, 0x3c3c3c );
    alert.disabledFontStyles = new TextFormat( "Helvetica"20, 0x9a9a9a );

    但如果要修改标题和按钮的样式需要先获取 header 与按钮组的引用,再修改。

    一般推荐使用通过主题文件(theme)来实现自定义样式。

    如果想程序化的移除 alert 对象,可以使用如下类似的代码:

    alert.removeFromParent( true );