Creating a UI with nested layouts
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.
Next, let's match the width of the two large toolbar panels.
Now, let's change the layout.
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.
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.
GridLayout
objects for panels 9 and 10.
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.