Question

In Flex Mobile I have a few buttons in the action bar. On devices with very small screen (such as the HTC Wildfire) not all buttons can be shown. Is there a way to tell Flex to hide an element when it doens’t fit? I know it is possible by using states and test the width of the screen but I hope there is another way..

Answer 1

Here’s a really simple Spark layout class that lays out the objects horizontally, dropping any items that won’t fit.

package
{
    import mx.core.ILayoutElement;

    import spark.layouts.supportClasses.LayoutBase;

    public class DroppableHorizontalLayout extends LayoutBase
    {
        private static const PADDING:Number = 5;

        public function DroppableHorizontalLayout()
        {
            super();
        }

        override public function updateDisplayList(width:Number, height:Number):void
        {
//          super.updateDisplayList(width,height); // super method doesn't do anything
            var currentXCoordinate:Number = 0;
            var numKids:int = target.numChildren;
            for (var i:int=0; i < numKids; i++)
            {
                var currentItem:ILayoutElement = target.getElementAt(i);
                var itemWidth:Number = currentItem.getPreferredBoundsWidth();
                if (currentXCoordinate + itemWidth < width)
                {
                    currentItem.setLayoutBoundsSize(itemWidth, currentItem.getPreferredBoundsHeight());
                    currentItem.setLayoutBoundsPosition(currentXCoordinate, 0); // or whatever the Y coordinate should be
                    currentXCoordinate = currentXCoordinate + itemWidth + PADDING;
                }
                else
                {
                    break; // no reason to keep iterating, nothing else will fit...
                }
            }
        }
    }
}

Writing layouts that have all the functionality of a typical Flex layout class is not trivial. But you can certainly do simple things like the above, to iterate over the child objects, set their size/position, and in this case, not bother rendering things that won’t fit.