我有一个带有图标和移动皮肤的ToggleButton。
<s:ToggleButton icon="@Embed('/assets/myIcon.png')" skinClass="skins.mobile.ToggleButtonSkin "/>
这是皮肤。
package skins.mobile
{
import flash.display.DisplayObject;
import flash.display.Sprite;
import mx.core.DPIClassification;
import mx.core.mx_internal;
import mx.events.FlexEvent;
import spark.components.supportClasses.StyleableTextField;
import spark.skins.mobile.supportClasses.ButtonSkinBase;
import assets.themes.joy.embed.fxg.MobileButtonDownSkin;
import assets.themes.joy.embed.fxg.MobileButtonUpSkin;
import assets.themes.joy.embed.fxg.MobileSelectedButtonUpSkin;
use namespace mx_internal;
public class ToggleButtonSkin extends ButtonSkinBase
{
public function ToggleButtonSkin()
{
super();
// replace FXG asset classes
upBorderSkin = MobileButtonUpSkin;
downBorderSkin = MobileButtonDownSkin;
upAndSelectedBorderSkin = MobileSelectedButtonUpSkin;
downAndSelectedBorderSkin = MobileSelectedButtonUpSkin;
//default width/height
measuredDefaultHeight = 66;
measuredDefaultWidth = 208;
layoutGap = 7;
}
//--------------------------------------------------------------------------
//
// Variables
//
//--------------------------------------------------------------------------
private var _border:DisplayObject;
private var changeFXGSkin:Boolean = false;
private var borderClass:Class;
private var _downStateFlag:Boolean;
/**
* Read-only button border graphic. Use getBorderClassForCurrentState()
* to specify a graphic per-state.
*
* @see #getBorderClassForCurrentState()
*/
protected function get border():DisplayObject
{
return _border;
}
//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
/**
* Class to use for the border in the up state.
*/
protected var upBorderSkin:Class;
/**
* Class to use for the border in the down state.
*/
protected var downBorderSkin:Class;
/**
* Class to use for the border when selected in the up state.
*/
protected var upAndSelectedBorderSkin:Class;
/**
* Class to use for the border when selected in the down state.
*/
protected var downAndSelectedBorderSkin:Class;
//--------------------------------------------------------------------------
//
// Overridden methods
//
//--------------------------------------------------------------------------
/**
* @private
*/
override protected function commitCurrentState():void
{
super.commitCurrentState();
borderClass = getBorderClassForCurrentState();
if (!(_border is borderClass))
changeFXGSkin = true;
var icon:DisplayObject = getIconDisplay();
//reduce fontSize for down state
if(currentState == "down") {
icon.scaleX = icon.scaleY = .5;
_downStateFlag = true;
} else {
if(_downStateFlag) {
icon.scaleX = icon.scaleY = 1;
_downStateFlag = false;
}
}
// update borderClass and background
invalidateDisplayList();
}
/**
* @private
*/
override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
{
super.layoutContents(unscaledWidth, unscaledHeight);
// size the FXG background
if (changeFXGSkin)
{
changeFXGSkin = false;
if (_border)
{
removeChild(_border);
_border = null;
}
if (borderClass)
{
_border = new borderClass();
addChildAt(_border, 0);
}
}
layoutBorder(unscaledWidth, unscaledHeight);
}
/**
* Position the background of the skin. Override this function to re-position the background.
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 2.5
* @productversion Flex 4.5
*/
mx_internal function layoutBorder(unscaledWidth:Number, unscaledHeight:Number):void
{
setElementSize(border, unscaledWidth, unscaledHeight);
setElementPosition(border, 0, 0);
}
/**
* Returns the borderClass to use based on the currentState.
*/
protected function getBorderClassForCurrentState():Class
{
var cla:Class;
switch(currentState)
{
case "down":
cla = downBorderSkin;
break;
case "up":
cla = upBorderSkin;
break;
case "downAndSelected":
cla = downAndSelectedBorderSkin;
break;
case "upAndSelected":
cla = upAndSelectedBorderSkin;
break;
}
return cla;
}
}
}
当处于“向下”状态时，图标应缩小。但是，似乎在移动按钮外观中，没有iconDisplay属性，因此我无法访问该图标。
如果您查看commitCurrentState()函数，我尝试使用getIconDisplay()进行缩放。但这不起作用。
有谁知道是否有办法扩展图标？
答案 0 :(得分：1)
想出来。缩放需要在layoutContents()而不是commitCurrentState()中进行。
这两个功能应如下所示：
/**
* @private
*/
override protected function commitCurrentState():void
{
super.commitCurrentState();
borderClass = getBorderClassForCurrentState();
if (!(_border is borderClass))
changeFXGSkin = true;
// update borderClass and background
invalidateDisplayList();
}
/**
* @private
*/
override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
{
super.layoutContents(unscaledWidth, unscaledHeight);
// size the FXG background
if (changeFXGSkin)
{
changeFXGSkin = false;
if (_border)
{
removeChild(_border);
_border = null;
}
if (borderClass)
{
_border = new borderClass();
addChildAt(_border, 0);
}
}
layoutBorder(unscaledWidth, unscaledHeight);
//reduce icon size in "down" state
if(currentState == "down") {
var iconDisplay:DisplayObject = getIconDisplay();
if(iconDisplay) {
setElementSize(iconDisplay, iconDisplay.width *.85, iconDisplay.height *.85);
setElementPosition(iconDisplay, (unscaledWidth - iconDisplay.width) / 2, (unscaledHeight - iconDisplay.height) / 2);
}
}
}