HSlider已针对移动设备进行了优化,但VSlider没有 - 正如您在此处看到的:
同时,以移动为主题的HSliderSkin.as看起来非常简单。
所以我在我非常简单的测试项目中将该文件复制到“VSliderSkin.as”中,并且 -
用“VSlider”替换了对“HSlider”的明显引用
在 measure() 方法中交换了“宽度”<->“高度”
在 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 ?