Question

HSlider已针对移动设备进行了优化，但VSlider未针对移动设备进行优化 - 您可以在此处看到：

enter image description here

与此同时，以移动设备为主题的HSliderSkin.as看起来非常简单。

所以我在我非常简单的测试项目中将该文件复制到“VSliderSkin.as”并且 -

用“VSlider”取代了对“HSlider”的明显引用
交换“width”＆lt; - ＆gt; “高度”
交换了“width”＆lt; - ＆gt; “高度”和“x”＆lt; - ＆gt; “y” 的

SlideApp.mxml （只需添加到空白的Flex移动项目中）：

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    applicationDPI="160">

    <s:VSlider
        skinClass="VSliderSkin"
        horizontalCenter="0"
        height="80%" />

    <s:HSlider
        skinClass="spark.skins.mobile.HSliderSkin"
        width="100%"
        bottom="10" />

</s:Application>

VSliderSkin.as （与SlideApp.as放在同一个目录中）：

////////////////////////////////////////////////////////////////////////////////
//
//  ADOBE SYSTEMS INCORPORATED
//  Copyright 2010 Adobe Systems Incorporated
//  All Rights Reserved.
//
//  NOTICE: Adobe permits you to use, modify, and distribute this file
//  in accordance with the terms of the license agreement accompanying it.
//
////////////////////////////////////////////////////////////////////////////////

package {
    import flash.display.BlendMode;

    import mx.core.ClassFactory;
    import mx.core.IFactory;

    import spark.components.Button;
    import spark.components.VSlider;
    import spark.skins.mobile.HSliderThumbSkin;
    import spark.skins.mobile.HSliderTrackSkin;
    import spark.skins.mobile.supportClasses.HSliderDataTip;
    import spark.skins.mobile.supportClasses.MobileSkin;

    /**
     *  ActionScript-based skin for VSlider controls in mobile applications.
     * 
     *  <p>The base Flex implementation creates an VSlider with fixed height
     *  and variable width with a fixed-size thumb. As the height of the
     *  VSlider component increases, the vertical dimensions of the visible VSlider remain
     *  the same, and the VSlider stays vertically centered.</p>
     * 
     *  <p>The thumb and track implementations can be customized by subclassing
     *  this skin class and overriding the thumbSkinClass, trackSkinClass,
     *  and/or dataTipClass variables as necessary.</p>
     * 
     *  @langversion 3.0
     *  @playerversion Flash 10
     *  @playerversion AIR 2.5 
     *  @productversion Flex 4.5
     */
    public class VSliderSkin extends MobileSkin
    {    
        //--------------------------------------------------------------------------
        //
        //  Constructor
        //
        //--------------------------------------------------------------------------

        /**
         *  Constructor.
         * 
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5 
         *  @productversion Flex 4.5
         * 
         */    
        public function VSliderSkin()
        {
            super();

            thumbSkinClass = HSliderThumbSkin;
            trackSkinClass = HSliderTrackSkin;
            dataTipClass = spark.skins.mobile.supportClasses.HSliderDataTip;

            blendMode = BlendMode.LAYER;
        }

        //--------------------------------------------------------------------------
        //
        //  Properties
        //
        //--------------------------------------------------------------------------

        /** 
         *  @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        public var hostComponent:VSlider;

        //--------------------------------------------------------------------------
        //
        //  Skin parts 
        //
        //--------------------------------------------------------------------------

        /**
         *  VSlider track skin part
         *
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5 
         *  @productversion Flex 4.5
         */    
        public var track:Button;

        /**
         *  VSlider thumb skin part
         * 
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5 
         *  @productversion Flex 4.5
         */    
        public var thumb:Button;

        /**
         *  VSlider dataTip class factory
         * 
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5 
         *  @productversion Flex 4.5
         */    
        public var dataTip:IFactory;

        //--------------------------------------------------------------------------
        //
        //  Variables
        //
        //--------------------------------------------------------------------------

        /**
         *  Specifies the skin class that will be used for the VSlider thumb.
         * 
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5 
         *  @productversion Flex 4.5 
         */    
        protected var thumbSkinClass:Class;

        /**
         *  Specifies the skin class that will be used for the VSlider track.
         * 
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5 
         *  @productversion Flex 4.5 
         */    
        protected var trackSkinClass:Class;

        /**
         *  Specifies the class that will be used for the VSlider datatip.
         * 
         *  @langversion 3.0
         *  @playerversion Flash 10
         *  @playerversion AIR 2.5 
         *  @productversion Flex 4.5 
         */    
        protected var dataTipClass:Class;

        //--------------------------------------------------------------------------
        //
        //  Overridden methods
        //
        //--------------------------------------------------------------------------

        /**
         *  @private 
         */ 
        override protected function commitCurrentState():void
        {
            if (currentState == "disabled")
                alpha = 0.5;
            else if (currentState == "normal")
                alpha = 1;
        }    

        /**
         *  @private 
         */ 
        override protected function createChildren():void
        {
            // Create our skin parts: track and thumb
            track = new Button();
            track.setStyle("skinClass", trackSkinClass);
            addChild(track);

            thumb = new Button();
            thumb.setStyle("skinClass", thumbSkinClass);
            addChild(thumb);

            // Set up the class factory for the dataTip
            dataTip = new ClassFactory();
            ClassFactory(dataTip).generator = dataTipClass;
        }

        /**
         *  @private 
         *  The HSliderSkin width will be no less than the width of the thumb skin.
         *  The HSliderSkin height will be no less than the greater of the heights of
         *  the thumb and track skins.
         */ 
        override protected function measure():void
        {
            measuredHeight = track.getPreferredBoundsHeight();
            measuredWidth = Math.max(track.getPreferredBoundsWidth(), thumb.getPreferredBoundsWidth());

            measuredMinWidth = Math.max(track.getPreferredBoundsWidth(), thumb.getPreferredBoundsWidth());
            measuredMinHeight = thumb.getPreferredBoundsHeight();
        }

        /**
         *  @private
         */ 
        override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.layoutContents(unscaledWidth, unscaledHeight);

            // minimum height is no smaller than the larger of the thumb or track
            var calculatedSkinWidth:int = Math.max(Math.max(thumb.getPreferredBoundsWidth(), track.getPreferredBoundsWidth()),
                unscaledWidth);

            // minimum width is no smaller than the thumb
            var calculatedSkinHeight:int = Math.max(thumb.getPreferredBoundsHeight(),
                unscaledHeight);

            // once we know the skin height, center the thumb and track
            thumb.x = Math.max(Math.round((calculatedSkinWidth - thumb.getPreferredBoundsWidth()) / 2), 0);
            var calculatedTrackX:int = Math.max(Math.round((calculatedSkinWidth - track.getPreferredBoundsWidth()) / 2), 0);

            // size and position
            setElementSize(thumb, thumb.getPreferredBoundsWidth(), thumb.getPreferredBoundsHeight()); // thumb does NOT scale
            setElementSize(track, track.getPreferredBoundsWidth(), calculatedSkinHeight);
            setElementPosition(track, calculatedTrackX, 0);
        }
    }
}

当然这不起作用，但非常接近并且拇指垂直移动 - 应该如此：

enter image description here

请问有人知道如何完成我的移动皮肤吗？

我是否应该创建HSliderTrackSkin.as的副本？或者也许非移动VSliderTrackSkin.mxml可以在这里使用（ab）？

Answer 1

您可以像CustomVSlider一样创建自己的类，并将更改的旋转放置在HSlider内（ rotation = 90 ）。这对我很有用。希望这能帮助你。

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
applicationDPI="160">

<s:HSlider
    skinClass="spark.skins.mobile.HSliderSkin"
    height="100%" left="50"
    top="100" rotation="90"/>

<s:HSlider
    skinClass="spark.skins.mobile.HSliderSkin"
    width="100%"
    top="300" />
</s:Application>

为VSlider创建移动VSliderSkin - 包含测试用例和屏幕截图

1 个答案: