HSliderはモバイル向けに最適化されていますが、VSliderはそうではありません。
同時に、モバイルをテーマにしたHSliderSkin.asは非常にシンプルに見えます。
そのため、そのファイルを非常に単純なテスト プロジェクトの "VSliderSkin.as" にコピーしました。
「HSlider」への明白な参照を「VSlider」に置き換えました
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のコピーも作成する必要がありますか? それとも、非モバイルのVSliderTrackSkin.mxmlをここで (ab) 使用できますか?