創建使用VSlider移動VSliderSkin - 與測試案例和屏幕截圖

Question

HSlider已針對移動設備優化，但VSlider沒有 - 你可以在這裏看到：

同時移動主題HSliderSkin.as看起來很簡單。

所以我複製該文件到「VSliderSkin.as」我非常簡單的測試項目 -

1. 通過「使用VSlider」

2. 取代了明顯提及「使用HSlider」在measure（）方法交換 「寬度」 < - > 「高度」

3. 在layoutContents

   （）交換 「寬度」 < - > 「高度」 和 「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的副本？或者，也許非移動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>