在動作皮膚按鈕 - 添加邊框

我剛剛開始玩剝皮，我發現它比我遇到的任何其他更難Flex 4 Mobile。它需要在actionscript中完成，因爲我正試圖使用柔性移動按鈕。這是我到目前爲止有：（它非常小，只是改變了背景色）在動作皮膚按鈕 - 添加邊框

package skins { 
    import flash.display.GradientType; 
    import flash.geom.Matrix; 
    import mx.utils.ColorUtil; 
    import spark.components.supportClasses.StyleableTextField; 
    import spark.skins.mobile.ButtonSkin; 
    import spark.skins.mobile.supportClasses.MobileSkin; 

public class CustomButtonSkin extends ButtonSkin { 

    public function CustomButtonSkin() { 
     super(); 
     layoutPaddingLeft = 10; 
     layoutPaddingRight = 10; 
     layoutPaddingTop = 2; 
     layoutPaddingBottom = 2; 
     layoutCornerEllipseSize = 1; 
    } 

    private static var colorMatrix:Matrix = new Matrix(); 
    private static const CHROME_COLOR_ALPHAS:Array = [1, 1]; 
    private static const CHROME_COLOR_RATIOS:Array = [0, 127.5];   

    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void { 
     super.drawBackground(unscaledWidth, unscaledHeight);   

     var chromeColor:uint = getStyle("chromeColor"); 

     if (currentState == "up") { 
     graphics.beginFill(0x1C1C1C); 
     }   
     else{ 
     var colors:Array = []; 
     colorMatrix.createGradientBox(unscaledWidth, unscaledHeight,      Math.PI/2, 0, 0); 
     colors[0] = 0xFFFFFF;//ColorUtil.adjustBrightness2(chromeColor, 70); 
     colors[1] = 0xEEEEEE;//chromeColor;  
     graphics.beginGradientFill(GradientType.RADIAL, colors, CHROME_COLOR_ALPHAS, CHROME_COLOR_RATIOS, colorMatrix);   
     graphics.endFill(); 
     } 
    } 

    } 
}

似乎有沒有在文檔的方式多爲剝皮Flex移動組件純粹的動作。例如，我們如何添加邊框？如果任何人都可以發佈他們的自定義柔性手機皮膚，將非常感激！

來源

2011-07-29 p_mcp

特別要畫一個邊框，我會使用圖形API手動繪製一個邊框。

this.graphics.lineStyle(1, color, alpha, true); 
this.graphics.drawRect(0, 0, width, height);

我有一大堆的博客文章/關於建立移動皮膚/ itemRenderer的，可以幫助你播客：

來源

2011-07-29 14:00:15 JeffryHouser

避免將BorderContainer添加到移動皮膚，因爲它不針對移動設備進行優化，並且可能會導致性能下降。爲了優化ActionScript皮膚，建議將圖形對象繪製。 –

@Steven Shongrunden好點！我修改了我的答案以刪除BorderContainer建議。 – JeffryHouser

的ButtonSkin具有的屬性upBorderSkin和downBorderSkin，您將設置等於在構造函數中FXG圖形資源：

public function CustomButtonSkin() 
{ 
    super(); 
    // your padding settings here 

    upBorderSkin = path.to.fxg.resource.upBorder; 
    downBorderSkin = path.to.fxg.resource.downBorder; 
}

而且你會覆蓋drawBackground一個空的身體，甚至沒有super.drawBackground （）：

override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void 
{ 

}

這是爲了讓您的自定義皮膚不會繪製默認背景。

你甚至不必檢測狀態改變來繪製不同的東西。通過指定邊界外觀屬性，您可以讓ButtonSkin父類檢測狀態更改並繪製適當的圖形。

有關更多信息，請參閱http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.html，特別是使用fxg資源。

來源

2012-11-28 02:07:36

在動作皮膚按鈕 - 添加邊框

回答

相關問題