Renderer unscaledHeight in layoutContents

Question

I'm creating my own renderer and wonder where the value for unscaledHeight (and width) comes from when updateDisplayList is called that in turn calls layoutContents for LabelItemRenderer.
I'm creating a grid item renderer (poor mans version of datagrid) for a mobile application. GridItemRenderer subclasses LabelItemRender. I've studied the code of LabelItemRenderer and IconItemRenderer and I think I understand the basics.
I'm currently using a DataGroup but could just as easily be using a List and my experimentation with list yields the same information. Why are the individual rows so tall? I set the font size smaller hoping that the vertical space each renderer would take would get smaller but it doesn't and I don't understand why.
In my measure() method, I've calculated the measuredHeight to be:
     var verticalPadding:Number = getStyle("paddingTop") + getStyle("paddingBottom");
     measuredHeight = getElementPreferredHeight(ld) + verticalPadding;
With the fontsize set to 16, the measured height comes back as 12. The top and bottom padding I have set to 0.
But when updateDisplayList is called which inturn calls layoutContents, unscaledHeight is set to 66. Even if the font size is set to 28, the unscaledHeight is set to 66. 66 is returned when I debug the application as an Andriod App (Droid 2) on the desktop. If I debug on an actual device like a Motorola Atrix, fontsize 16 yields a measuredHeight of 12 (just like the desktop debug) but the unscaledHeight is set to 44.
I've tried setting the gap in the vertical layout to 0 within the datagroup but that didn't work.
So how can I control that "row" height? What set of values is Flex looking at to come up with "66"?
Thanks!
Randy

Answer 1

I threw the following together using only spark components to hilight the issue. It is a mobile application. To reproduce, just debug the application on the desktop. I happen to use motorola droid 2 but the problem persists with other debug configurations. I'm using flex 4.5.1.
I don't know how else to more clearly describe the problem or how to more easily describe how to reproduce it. I await your explaination as to why the flex provided components seem to be ignoring the values in measure() or if it is working as designed, how one can override this behavior.
The below example shows 2 examples. The first example is a spark list using a spark iconitemrenderer. The 2nd example is using a spark datagroup using a spark labelitemrenderer. Just uncomment one and comment out the other to run the examples:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          title="HomeView">
     <fx:Declarations>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
     </fx:Declarations>
     <fx:Style>          
          .iconItemRendererMessageStyle {
               fontSize: 12;
     </fx:Style>     
     <!-- EXAMPLE OF List with IconItemRenderer      -->
<!--     
     <s:List id="taskList" height="100%" width="100%">
          <s:dataProvider>
               <mx:ArrayCollection>
                    <fx:String>one</fx:String>
                    <fx:String>two</fx:String>
                    <fx:String>three</fx:String>
                    <fx:String>four</fx:String>
               </mx:ArrayCollection>
          </s:dataProvider>          
          <s:itemRenderer>
               <fx:Component>
                    <s:IconItemRenderer labelFunction="getLabel" messageFunction="getMessage" fontSize="12">
                         <fx:Script>
                              <![CDATA[
                                   private function getLabel(item:Object):String {
                                        return "myLabel";
                                   private function getMessage(item:Object):String {
                                        return "myMessage";
                              ]]>
                         </fx:Script>
                    </s:IconItemRenderer>
               </fx:Component>
          </s:itemRenderer>
     </s:List>
-->     
     <!-- EXAMPLE OF DATAGROUP with LableItemRenderer -->
     <s:Scroller width="100%" height="100%">
          <s:DataGroup id="detailsDataGroup" height="100%" width="100%" >
               <s:layout>
                    <s:VerticalLayout useVirtualLayout="false" variableRowHeight="true" rowHeight="12" gap="0"/>
     <!--
          doesn't matter which vertical layout you use
                    <s:VerticalLayout useVirtualLayout="false" variableRowHeight="false"/>
    -->                    
               </s:layout>
               <s:dataProvider>
                    <mx:ArrayCollection>
                         <fx:String>one</fx:String>
                         <fx:String>two</fx:String>
                         <fx:String>three</fx:String>
                         <fx:String>four</fx:String>
                    </mx:ArrayCollection>
               </s:dataProvider>          
               <s:itemRenderer>
                    <fx:Component>
<!--
                         by setting the fontsize to 12 and padding to 0, when you put a break point in LableItemRenderer, the measure
                         method sets measured height to 9 (debugging on the desktop as a droid 2). measure is called 4 times.
                         layoutContents is called 8 times. twice for each record in array collection. The first time it is called for
                         each array element, the unscaledHeight is 0. The 2nd time it is called for each array element,
                         the unscaledHeight is 66 even though the measuredHeight is set to 9.
-->
                         <s:LabelItemRenderer fontSize="12" paddingTop="0" paddingBottom="0"/>
                    </fx:Component>
               </s:itemRenderer>
          </s:DataGroup>
     </s:Scroller>     
</s:View>