I am attempting to implement a layout in Adobe Flex 4.5 / MXML where I have multiple controls in an HBox that - in total - consume all available horizontal screen estate. Some use a relative with (percentage), some an absolute width (pixels) and one is supposed to consume whatever space is still left, such as:
+----------------------+-----------------------+------+
| 35% | fill parent | 10px |
+----------------------+-----------------------+------+
How would I achieve this in Flex (is there something comparable to Android's layout_width="fillparent"
)?
Due to the fact that there are elements that have an absolute width I cannot easily calculate the width of the filler as a percentage a priori (as it varies with the screen width).
Setting the filler's width to 100% also does not work as this will shrink the 35% area below 35%.
Edit: Applying the updateDisplayList
suggestion from www.Flextras.com's answer below yields the error "Call to a possibly undefined method updateDisplayList" at the line marked in the source excerpt below:
<?xml version="1.0"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationPolicy="auto"
width="100%"
verticalGap="0">
[...]
<fx:Script>
<![CDATA[
[...]
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
^^^^
headerLinkBox1.width = unscaledWidth * 0.375;
headerLinkBox2.width = unscaledWidth * 0.2;
headerLinkBox3.width = unscaledWidth - headerLinkBox4.width - headerLinkBox5.width - headerLinkBox6.width;
headerLinkBox1.x = 0;
headerLinkBox2.x = headerLinkBox1.x + headerLinkBox2.width;
headerLinkBox3.x = headerLinkBox2.x + headerLinkBox3.width;
headerLinkBox4.x = headerLinkBox3.x + headerLinkBox4.width;
headerLinkBox5.x = headerLinkBox4.x + headerLinkBox5.width;
headerLinkBox6.x = headerLinkBox5.x + headerLinkBox6.width;
}
[...]
You make use of the Flex Component lifecycle and write your own layout code in updateDisplayList. Conceptually something like this:
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth, unscaledHeight);
// size the components
comp1.width = unscaledWidth*.35
comp2.width = unscaledWidth-10-comp1.width
comp3.width = 10;
// position the components
comp1.x = 0;
comp2.x = comp1.width;
comp3.x = comp2.x + comp2.width;
}
You'll probably want to set the height of each component to, possibly using the getExplicitOrMeasuredHeight() method.