Create three layout containers

So far, we've created the basic structure of our UI and positioned a few containers and controls. Next, we'll create containers for the three layout types that our app will demonstrate, and add these containers to our UI.

Create the middle container

In main.qml, after the code that declares the lower container of our UI, we create a container that represents the middle section. This container will hold three containers as children, one for each layout type. We use a simple stack layout (you'll see why later), and place the container in the middle of its parent container.

Container {
    layout: StackLayout {}
     
    horizontalAlignment: HorizontalAlignment.Center
    verticalAlignment: VerticalAlignment.Center
    preferredWidth: 725
    preferredHeight: 1080

Create the layout containers

Inside this container, we create three containers for our layouts. We set the layout property appropriately for each, and we use preferredWidth and preferredHeight to size the containers so they fit in the middle section of our UI. We also add a background color (light gray) to each container. This lets us see the actual dimensions of the layout containers more easily.

// A container to show the stack layout
    Container {
        id: stackLayoutContainer
        layout: StackLayout {
            orientation: LayoutOrientation.LeftToRight
        }
        preferredWidth: 725
        preferredHeight: 1050
        background: Color.create(0.3, 0.3, 0.3)
    }
 
    // A container to show the dock layout
    Container {
        id: dockLayoutContainer
        layout: DockLayout {}
        preferredWidth: 725
        preferredHeight: 1050
        background: Color.create(0.3, 0.3, 0.3)
        visible: false
    }
 
    // A container to show the absolute layout
    Container {
        id: absoluteLayoutContainer
        layout: AbsoluteLayout {}
        preferredWidth: 725
        preferredHeight: 1050
        background: Color.create(0.3, 0.3, 0.3)
        visible: false
    }
} // end of middle section Container

Notice that we've used a new property called visible and set it to false for two of the three layout containers. Because the layout containers are the same size and should be placed in the same location in the parent container, we want only one of the layout containers to be displayed at a time. When one of the buttons is clicked, the layout container with the corresponding layout is shown and the other layout containers are hidden (we'll add this functionality later in the tutorial). This is also why we can just use a simple stack layout for the middle container; there will only ever be one child container displayed in it at a time.

Add the images

Now it's time to add the images (and the appropriate layout properties for each) to the layout containers. We start by adding three images to the stack layout container. We created this container above, and gave it an id of stackLayoutContainer, so make sure to add the images there. These images don't need any special layout properties, so we can simply add them to this container using ImageView controls. Remember that we placed these images in the assets/images folder in our project, so we specify asset:///images/cow.png  for the imageSource property to reference them.

// Images for the stack layout container
ImageView { imageSource: "asset:///images/cow.png" }
ImageView { imageSource: "asset:///images/cow.png" }
ImageView { imageSource: "asset:///images/cow.png" }

Next, we add the same three images to the dock layout container. We need to specify a couple of layout properties for these images, namely the horizontal and vertical alignment of the images within the dock layout.

// Images for the dock layout container, each with dock layout properties
ImageView {
    horizontalAlignment: HorizontalAlignment.Left
    verticalAlignment: VerticalAlignment.Center
 
    imageSource: "asset:///images/cow.png"
}
ImageView {
    horizontalAlignment: HorizontalAlignment.Center
    verticalAlignment: VerticalAlignment.Top
 
    imageSource: "asset:///images/cow.png"
}
ImageView {
    horizontalAlignment: HorizontalAlignment.Right
    verticalAlignment: VerticalAlignment.Bottom
 
    imageSource: "asset:///images/cow.png"
}

Lastly, we add images to the absolute layout container. As layout properties for these images, we specify the x and y coordinates for where we want the images to appear inside their parent container.

// Images for the absolute layout container, each with absolute layout
// properties
ImageView {
    layoutProperties: AbsoluteLayoutProperties {
        positionX: 80
        positionY: 300
    }
    imageSource: "asset:///images/cow.png"
}
ImageView {
    layoutProperties: AbsoluteLayoutProperties {
        positionX: 160
        positionY: 200
    }
    imageSource: "asset:///images/cow.png"
}
ImageView {
    layoutProperties: AbsoluteLayoutProperties {
        positionX: 500
        positionY: 750
    }
    imageSource: "asset:///images/cow.png"
}

Build and run the application, and you'll see our UI so far. The label and buttons are displayed in the upper and lower containers, respectively, and the stack layout container is displayed in the middle. The stack layout container is the only layout container that's displayed so far, because we set the visible property of the other two layout containers to false.


Screen showing the sample app with three cow images in a left-to-right stack layout.

Last modified: 2013-12-21

comments powered by Disqus