how to create a custom cell renderer for a tile list in flash

丶灬走出姿态 提交于 2019-12-02 13:44:39

To build a custom cell renderer you need extend a class of choice from the available listClasses. ImageCell looks like a good start for your project.

You would:

  1. Extend the list class
  2. add your own bits in(labels/TextField, etc.)
  3. override protected functions to adjust the new Cell to your needs (an example is the drawLayout method where you would need to position your items neatly).

Here's a very basic example:

package
{
    import fl.controls.listClasses.ICellRenderer;
    import fl.controls.listClasses.ImageCell;
    import fl.controls.TileList;
    import fl.data.DataProvider;
    import fl.managers.StyleManager;
    import flash.events.EventDispatcher;
    import flash.events.*;
    import fl.containers.UILoader;

    public class CustomImageCell extends ImageCell implements ICellRenderer
    {  

        public function CustomImageCell() 
        {
            super();

            //do other stuff here

            loader.scaleContent = false;
            loader.addEventListener(IOErrorEvent.IO_ERROR, handleErrorEvent, false, 0, true);

            useHandCursor = true;
        }

        override protected function drawLayout():void
        {
            var imagePadding:Number = getStyleValue("imagePadding") as Number;
            loader.move(11, 5);

            var w:Number = width-(imagePadding*2);
            var h:Number = height-imagePadding*2;
            if (loader.width != w && loader.height != h)
            {
                loader.setSize(w,h);
            }
            loader.drawNow(); // Force validation!

        }
        override protected function handleErrorEvent(event:IOErrorEvent):void {
            trace('ioError: ' + event);
            //dispatchEvent(event);
        }
    }
}

A pretty good example for what you need is on this post. The custom cell provided there:

  1. Supports a custom background( by setting the cell skin )
  2. Uses a label TextField.

HTH

create a file called MyRenderer.mxml,paste this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image id="img" width="123" height="123" />
<mx:Script><![CDATA[
override public function set data (value:Object):void {
    super.data = value;
    // mess with img here
}
]]></mx:Script>
</mx:Box>

in tile list, write this:

<mx:TileList itemRenderer="MyRenderer" ... />
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!