Create three layout containers

So far, we've created the basic structure of our UI and positioned a few containers and controls. Next, we create containers for the three layout types that our app demonstrates 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 holds three containers as children, one for each layout type. We use a simple stack layout (you can see why later) and place the container in the middle of its parent container.

We want to set the size of this container so that it maximizes the space between the top and bottom containers. A common way is to use the preferredWidth and preferredHeight properties to set the size of a control. We use snapped design units to set these values so that we don't rely on explicit pixel values. For more information, see Design units and the UIConfig class.

We use a preferredWidth of ui.sdu(72) and a preferredHeight of ui.sdu(100) because we are assuming that our app is running on a device with a screen resolution of at least 720 x 1280. When you develop apps, it's important to develop for all screen resolutions. We change our project later to make sure that we follow the best practices for resolution independence.

// The middle section container
Container {
    layout: StackLayout {}
     
    horizontalAlignment: HorizontalAlignment.Center
    verticalAlignment: VerticalAlignment.Center
        
    preferredWidth: ui.sdu(72)
    preferredHeight: ui.sdu(100)

Create the layout containers

Inside the middle container, we create three containers for our layouts. We set the layout property appropriately for each, and we use preferredWidth and preferredHeight properties 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 background color 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: ui.sdu(72)
        preferredHeight: ui.sdu(100)

        background: Color.create(0.3, 0.3, 0.3)
    }
 
    // A container to show the dock layout
    Container {
        id: dockLayoutContainer
        layout: DockLayout {}

        preferredWidth: ui.sdu(72)
        preferredHeight: ui.sdu(100)

        background: Color.create(0.3, 0.3, 0.3)
        visible: false
    }
 
    // A container to show the absolute layout
    Container {
        id: absoluteLayoutContainer
        layout: AbsoluteLayout {}

        preferredWidth: ui.sdu(72)
        preferredHeight: ui.sdu(100)

        background: Color.create(0.3, 0.3, 0.3)
        visible: false
    }
} // end of middle section Container

Notice that we use 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 are 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 add this functionality later in the tutorial). This technique lets us use a simple stack layout for the middle container. There is only ever one child container shown in the middle container 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" }

You might receive a message indicating that you should add accessibility information for these images. To learn more, see Building accessibility into your app.

Next, we add the same three images to the dock layout container. We need to specify the horizontal and vertical alignment of the images in 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. We specify the x and y coordinates for where we want the images to appear inside their parent container as layout properties for these images.

If you use an absolute layout and specify the positions of your controls explicitly, you might find that the controls aren't in the right places when your app is viewed in a different resolution. When we run this app on a BlackBerry Q10 smartphone, some of the cows don't appear on the screen. You can use a technique called static asset selection to make to make sure that our UI adapts to different screen resolutions. You learn more about this technique later in the tutorial.

// 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 app to 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: 2015-03-31



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus