This sample demonstrates one way of modifying the postLayoutTransformOffsets property of an ItemRenderer in a List in order to have the items appear to zoom in when hovered or selected.
The depth and postLayoutTransformOffsets properties of UIComponent can be very useful when you want to make changes to an element in a Group without causing the Group’s layout to reposition all of the elements. For example if you have a VerticalLayout on a Group of elements and then change scaleY on the first element, the layout will appropriately move all of the other items down to make room for the new size of the first element. Sometimes this behavior isn’t ideal and that’s where the postLayoutTransformOffsets property comes in. Any changes you make to a component’s postLayoutTransformOffsets property is done without the layout aware of anything going on. Below is a sample application that demonstrates one case of this. We want the items of a List to grow larger when we hover over them, but we don’t want the other items to get moved around by the layout.
Here is the sample application:
If you look at the code for the ItemRenderer you will see that it defines a default depth value of zero and then defines a higher depth value for the hovered and selected states. This will cause that particular item renderer to be shown on top of everything else which has a lower depth.
Now with the renderer “popped out” in front of the other items we can change the size and position of the renderer to create a sort of zooming in effect when someone hovers over or selects an item.
The List in this sample uses a TileLayout with useVirtualLayout enabled in order to be able to handle large collections of data. I intend on posting more information about virtualization to this blog in the future. In the mean time you can read all about it in the Spark Virtualization Spec.
Note: This sample requires Flex SDK 18.104.22.16857 or higher. You can get the latest SDK builds from opensource.adobe.com.