AccordionList with Expanding Item Renderers

A common use for a List is the master/detail UI pattern. When the user clicks on an item, it expands, revealing more detail about the item. Previously we’ve shown an example of a List with expanding item renderer. This post demonstrates a similar idea except will scroll items into view as they expand.

The AccordionList has a couple of nice features. When an item expands or collapses, it plays a resize animation. When the new selected item expands, it might no longer be fully viewable in the List. For example if you select the bottom viewable item, it would expand downwards, outside of the viewable area of the List. When an item is selected, the AccordionList adjusts the scrollPosition so that the item is always fully viewable.

The AccordionList is a custom List with a custom item renderer (ExpandingItemRenderer). The ExpandingItemRenderer uses states to define the heights in the collapsed and expanded modes. It defines some transitions to animate the resizing. Note that I’m using a custom interpolator (IntegerInterpolator) for the Resize effects. This prevents any wiggling from occurring as the item is resized due to the layout rounding off the position of the item.

The ExpandingItemRenderer also dispatches events when the item starts and ends its expand effect. This notifies the AccordionList to adjust the scroll position so that the item is fully viewable.

Off to the sample which lists the albums of the band Muse. Try expanding the “Haarp” item in both the default Spark List on the left and the AccordionList on the right to contrast the behavior:

View Source

Note: This sample requires Flex SDK 4.5.1 or higher. You can get the latest SDK builds from opensource.adobe.com.

5 thoughts on “AccordionList with Expanding Item Renderers”

  1. I really hope you guys keep up the great work here on this blog after Flex become an Apache project. You’ve saved me quite a few times.

  2. If you want to remove the scrollbars from the list and put it on 100% height, add the following listener and handler to the AccordionList:

    addEventListener( TouchInteractionEvent. TOUCH_INTERACTION_STARTING,
    onTouchStart, true );

    protected function onTouchStart( event:TouchInteractionEvent ):void
    {
    if ( event.relatedObject == scroller )
    {
    event.preventDefault();
    }
    }

Comments are closed.