How do I layer objects in Nativescript?

Question

Layering Objects - How do I do it?

Environment Info : I am using the latest version of Nativescript, and my project is a core Javascript app (no TypeScript )

I am trying to position (and animate) an image. The image will start its animation in the upper left hand side of the Label it is sitting on, and then move diagonally until it hits the Label's bottom boundary.

So far, I can't even get the image to appear where I want. Here is my XML:

View XML*

<Page loaded="pageLoaded" xmlns="http://www.nativescript.org/tns.xsd">

    <ActionBar title="Home">
    </ActionBar>
    <ScrollView>
        <GridLayout rows="60, *, 60" width="100%" height="100%"
            backgroundColor="lightgray">
            <Label text="Label 1" row="0" col="0" backgroundColor="red" />

            <StackLayout height="100%" row="1">
                <Image
                    src="http://john.123globalelectronicsllc.com/downloads/bird.png"
                    row="1" width="40" height="40" />
                <Label height="50%" text="TOP" tap="{{topTap}}"
                    backgroundColor="green">
                </Label>
                <Label height="50%" text="BOTTOM" tap="{{bottomTap}}"></Label>

            </StackLayout>

            <Label text="Footer bottom" row="2" col="0"
                backgroundColor="blue" />

        </GridLayout>
    </ScrollView>
</Page>

Screenshot:

As you see, the little bird isn't cooperating. It needs to be top left.

Can anyone help get me going on this little project? Thanks for looking...

Here is a PlayGround Link to the code:

Link https://play.nativescript.org/?template=play-js&id=9P3Bhr&v=21

Answer 1

For alignment (make label stay in left), you should use horizontalAlignment="left" on the Image.

If you want to overlay the StackLayout over the rest of the content, you can do:

        <GridLayout rows="60, *, 60" width="100%" height="100%"
            backgroundColor="lightgray">
            <Label text="Label 1" row="0" col="0" backgroundColor="red" />

            <StackLayout height="100%" row="0" rowSpan="3">
                <Image horizontalAlignment="left" verticalAlignment="top"
                    src="http://john.123globalelectronicsllc.com/downloads/bird.png"
                    width="40" height="40" />
                <Label height="50%" text="TOP" tap="{{topTap}}"
                    backgroundColor="green">
                </Label>
                <Label height="50%" text="BOTTOM" tap="{{bottomTap}}"></Label>

            </StackLayout>

            <Label text="Footer bottom" row="2" col="0"
                backgroundColor="blue" />

        </GridLayout>

Notice the rowSpan attribute. You can then animate this StackLayout . If you just want to animate the image, you can do the same with the Image, use verticalAlignment="top" and horizontalAlignment="left" , and then animate it. If it hides behind content, remember to set zIndex to a higher value.