Tutorial Step 7 Step 9

Creating a UI with nested layouts

Step 8: Changing to GridLayout

In this step, you'll begin working from the inside out, converting panels to more portable layouts and making various fine-tuning adjustments as you go along.

To speed up the process, whenever possible select multiple components to change a common property value for them all at one time. Selecting multiple components in a complicated UI is often much easier done in the component tree than in the UI designer, and it is the only way you can select layout manager components.

Also, if you select multiple components in the component tree and want to choose something from the UI designer right-click menu, you must move the mouse over one of the selected components on top of its middle nib before right-clicking to ensure that you get the correct menu.

Let's start at the top of the design with the toolbars. It helps to get things close to the desired size and look before converting, since the existing size of components sometimes has an effect on the resulting size after conversion.

    First, let's match the horizontal height of all three button panels.

    1. Hold down the Ctrl key and select panels 9, 10, and 11 in the component tree.
    2. In the UI designer, right-click over one of these selected panels and choose Align Top. (Click between two of the buttons to be sure you are over a panel rather than a button.)
    3. With the three panels still selected, right-click again and choose Same Size Vertical.

    Next, let's match the width of the two large toolbar panels.

    1. Hold down the Ctrl key, and in the component tree, select panel 10 first, followed by panel 9. (Panel 10 is selected first since it is the longest, and the first component selected is the one matched. We want panel 9 to match panel 10 so no text will be clipped on any of the buttons.)
    2. Move the mouse to the UI designer over one of these selected panels, right-click and choose Same Size Horizontal.

    Now, let's change the layout.

    1. Holding down the Ctrl key, in the component tree, click each panel that contains toolbar buttons: panel 9, panel 10, and panel 11.
    2. With all three panels selected, change the layout property in the Inspector to GridLayout.

      GridLayout divides the panels into cells of equal size and fills each cell with a component. If the text on any of the buttons gets clipped, then widen the appropriate panels until all the text is visible again.

      Panel 11 only has one component, therefore only gets one cell. If the Help button becomes too large, resize panel 11 to bring it back down to approximately the same size as the other buttons.

      Note: If you need to, you can change the order of the buttons in your GridLayout panels. To do this, right-click a button and choose Move to First or Move to Last. Keep adjusting until they are in the correct order.

    Finally, let's put a little space between the buttons on the two large toolbars. You do this by changing the horizontal gap on the layout manager itself. Notice that the first item under each container in the component tree is its layout manager.

    1. Using the same multiple selection technique as before, select the GridLayout objects for panels 9 and 10.

    2. In the Inspector, change the hgap property to 2.

    Now your toolbars should look similar to this:

    It's not completely right yet, but changing the layout for the next panel layer will fix it.

Tutorial Step 7 Step 9