0

HSlider已针对移动设备进行了优化,但VSlider没有 - 正如您在此处看到的:

在此处输入图像描述

同时,以移动为主题的HSliderSkin.as看起来非常简单。

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

  1. 用“VSlider”替换了对“HSlider”的明显引用

  2. 在 measure() 方法中交换了“宽度”<->“高度”

  3. 在 layoutContents() 中交换了 "width" <-> "height" 和 "x" <-> "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);
        }
    }
}

当然这不起作用,但是非常接近并且拇指垂直移动 - 它应该:

在此处输入图像描述

有人知道如何完成我的手机皮肤吗?

我也应该创建HSliderTrackSkin.as的副本吗?或者也许可以(ab)在这里使用非移动VSliderTrackSkin.mxml ?

4

1 回答 1

1

您可以创建自己的类,如 CustomVSlider 并放入 HSlider 更改旋转(旋转 = 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>
于 2013-05-01T10:22:31.983 回答