0
HSlider был оптимизирован для мобильных устройств, но VSlider нет - как вы можете увидеть здесь:Создание мобильного VSliderSkin для VSlider - с тестом и скриншотами
В том же время мобильные тематические HSliderSkin.as выглядит довольно просто.
Так что я скопировал этот файл в «VSliderSkin.as» в моем очень простой тестовый проект и -
заменить очевидные ссылки на «HSlider» на «VSlider»
в мере() метод места "ширина" < -> "высота"
в layoutContents() места "ширина" < -> "высоты" и "х" < -> "у"
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) использован здесь?
В идеале вы бы создали свой собственный VSliderTrackSkin, основанный на мобильном устройстве HSliderTrackSkin. Две хорошие причины для этого: 1) мобильная версия выполняется в AS3, что намного более оптимально для мобильных устройств, чем на основе MXML, 2) мобильный скин имеет 3 отдельных FXG-актива для трека, который он может использовать на основе DPI устройства, в то время как на MXML-скине используются примитивные графические объекты Spark для рисования дорожки. Обе эти концепции заставят устройство использовать меньшее количество процессорного времени при рендеринге и дают слайдеру тот же вид, что и в HSlider. –
Если в вашем приложении был только один VSlider, я бы не стал беспокоиться о проблемах с производительностью, поскольку они, вероятно, незначительны. Однако внешний вид VSlider больше для меня. Как вы заметили, дорожка меньше в немобильном корпусе, и это, безусловно, будет выглядеть по-разному на устройствах с разными DPI. –