Tilelist custom spacing and theme style in flex

Friends who have used tilelist may know that this component does not set the spacing between items. In addition, theme cannot set the style corner-radius to change the shape like linkbar. The only solution is to override the tilelist component.Drawselectionindicator
AndDrawhighlightindicator
.

 

/** <Br/> * Author Dante <br/> * Email: rubbish86630@yahoo.com.cn <br/> * createdtime: 2009.04.13 <br/> * description: <br/> * This component selects and spans the theme style, and add the padding <br/> ***/<br/> package mylib {</P> <p> Import flash. display. graphics; <br/> Import flash. display. sprite; </P> <p> Import MX. controls. tilelist; <br/> Import MX. controls. listclasses. ilistitemrenderer; <br/> public class mytilelist extends tilelist {</P> <p> [Bindable] <br/> private VaR _ verticalgap: Number = 0; </P> <p> [Bindable] <br/> private VaR _ horizontalgap: Number = 0; </P> <p> Public Function mytilelist () {<br/> super (); <br/>}< br/>/** <br/> * overwrite the mouse and highlight it. <br/> * @ indicator: sprite <br/> * @ X: Number <br/> * @ Y: Number <br/> * @ width: Number <br/> * @ height: number <br/> * @ color: uint <br/> * @ itemrenderer: ilistitemrenderer <br/> * return void <br/> ***/<br/> override protected function drawhighlightindicator (indicator: Sprite, X: Number, Y: Number, width: number, height: Number, color: uint, itemrenderer: ilistitemrenderer): void {<br/> // drawing <br/> var G: Graphics = indicator. graphics; </P> <p> G. clear (); <br/> G. beginfill (color); <br/> // draw an ellipse <br/> G. drawellipse (0, 0, width-_ horizontalgap, height-_ verticalgap); <br/> G. endfill (); </P> <p> indicator. X = x; <br/> indicator. y = y; <br/>}</P> <p>/** <br/> * overwrite the selected highlight <br/> * @ indicator: sprite <br/> * @ X: Number <br/> * @ Y: Number <br/> * @ width: Number <br/> * @ height: number <br/> * @ color: uint <br/> * @ itemrenderer: ilistitemrenderer <br/> * return void <br/> ***/<br/> override protected function drawselectionindicator (indicator: Sprite, X: Number, Y: Number, width: number, height: Number, color: uint, itemrenderer: ilistitemrenderer): void {<br/> // drawing <br/> var G: Graphics = indicator. graphics; </P> <p> G. clear (); <br/> G. beginfill (color); <br/> // draw an ellipse <br/> G. drawellipse (0, 0, width-_ horizontalgap, height-_ verticalgap); <br/> G. endfill (); </P> <p> indicator. X = x; <br/> indicator. y = y; <br/>}</P> <p> // ========================== ====< br/> // set and get <br/> // ========================= ========< br/> public function set verticalgap (value: number): void {<br/> _ verticalgap = value; <br/>}</P> <p> Public Function get verticalgap (): number {<br/> return _ verticalgap; <br/>}</P> <p> public function set horizontalgap (value: number ): void {<br/> _ horizontalgap = value; <br/>}</P> <p> Public Function get horizontalgap (): number {<br/> return _ horizontalgap; <br/>}< br/>}