AS3 Scroller, odd interaction with constraint layout?

Question

I have a form that uses constraint layouts (left/right/top/bottom) to position the main form inside a background. When I use the form in a popup TitleWindow, it lays out and sizes the components (and sets the TitleWindow size) as I would expect.

When trying to use the same set of components inside a Scroller, the layout is incorrect - the background gets resized to fit the Scroller, while the interior form is the correct size (but the right/bottom constraints aren't applied).

This simplified program demonstrates the issue. Without the Scroller, the form lays out correctly, and if the WindowedApplication is resized to show the entire form it looks correct.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                        xmlns:s="library://ns.adobe.com/flex/spark" 
                        xmlns:mx="library://ns.adobe.com/flex/mx"
                        width="400" height="400">

    <fx:Declarations>
        <s:SolidColor id="bgFill" color="#8080c0"/>
        <s:SolidColor id="whiteFill" color="#ffffff"/>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            protected function checkSizes():void
            {
                trace('Base is ' + base.width + 'x' + base.height);
                trace('Background is ' + bg.width + 'x' + bg.height);
                trace('Border is ' + border.width + 'x' + border.height);
                trace('Form is ' + form.width + 'x' + form.height);
            }

        ]]>
    </fx:Script>

        <s:Group id="base">
            <s:Rect id="bg"
                    left="0" right="0" top="0" bottom="0"
                    fill="{bgFill}"/>
            <s:Rect id="border"
                    left="10" right="10" top="10" bottom="10"
                    fill="{whiteFill}"/>
            <s:VGroup id="form" left="20" right="20" top="20" bottom="20">
                <s:Button width="600" height="600" 
                          label="Push Me!"
                          click="checkSizes()"/>
            </s:VGroup>
        </s:Group>
</s:WindowedApplication>

Clicking the button shows the component sizes as I'd expect:

Base is 640x640 Background is 640x640 Border is 620x620 Form is 600x600

If I add a scroller to fit the parent window, base, bg and border all fit inside the scroller, rather than being sized to fit as borders around form:

<s:Scroller width="100%" height="100%">
    <s:Group id="base">
        ...

Base is 385x361 Background is 385x361 Border is 365x341 Form is 600x600

Oddly enough, if I put an extra group around base, then everyone lays out correctly...

<s:Scroller width="100%" height="100%">
    <s:Group id="dummy">
        <s:Group id="base">
            ...

Before I start digging through the Scroller and ScrollerSkin source, anyone know if I'm off my rocker and doing something worng in the first scroller example? I'd rather not create extra layers of components that I don't need.

Robin van den Bogaard Robin van den Bogaard · Accepted Answer · 2014-07-09T10:22:19

The scroller restricts its first (and only) child to stay within his bounds, it will move the viewport of that child when you scroll.

Because your main application restricts the size of the scroller to 400x400, the base will never exceed 400x400 aswell.

If you add the dummy, base is free to expand as much as it wants but dummy will be restricted to expand. I hope this explains it a bit. If not ask me more =)

AS3 Scroller, odd interaction with constraint layout?

1 Answers