How to create such a gridview like below with Actionscript 3?

Each box is a click-able label which toggles the color when clicking.

The total number of labels is dynamical.

How to create such 开发者_开发知识库a grid view with pure actionscript 3?

if i were you i'd created a Box class extending Sprite and then a coords-managing container for them :)

Let's say that each box has its own class, in order to design your view , you will need a few parameters such as :

• number of columns
• horizontal & vertical padding between each label.

Provided your labels are stored in a Vector or an Array , you will then iterate thru whatever contains your labels in order to place them on stage.

The idea here is to remain as flexible as possible so whatever function you use to place the labels, it's a good idea to keep the parameters mentioned above as variables.

Typical use would be:

     private function createGrid
          ( numColumns:int , hPadding:int , vPadding:int ):void
     {
        var xPos:int;
        var yPos:int; 

        for( var i:int ; i < labels.length ; ++i )
        {
             var label:YourLabel = labels[i];

             if( i % numColumns == 0 && i > 0 )
             {
                 //reset the x position & increment the y position 
                 //in order to move to the next line
                 xPos = 0;
                 yPos += vPadding;

             }else if( i > 0) {

                xPos += hPadding; //increment the x position
             }

             label.x = xPos;
             label.y = yPos;

             addChild( label );
         }
     }

You can of course modify this in many ways , let's say that you want to take account of the labels dimensions , or create some tweening to place the labels on stage , you would handle the function differently ...