Laying Out the GUI Laying Out the GUI This section illustrates how to lay out GUi components (i.e, user interface controls, such as push buttons, pop-up menus, static text, etc. )in the gui. we recommend that you create the gui for yourself, as this is the best way to learn how to use GUIDE The section explains how to: Open a completed version layout and code for the example Open a new GUi in the Layout Editor · Add the components Align the objects ayout and code for the Example If you are reading this in the matlab Help browser, you can click the following links to display the GUIDE Layout Editor and the matlAB Editor with a completed version of this example. This enables you to see the values of all component properties and to understand how the components are ssembled to create the gui. You can also see a complete listing of the code that is discussed in the following sections Note The following links execute MATLAB commands and are designed to work within the MAtLAB Help browser. If you are reading this online or in PDF, you should go to the corresponding section in the MatLAB help Browser to use the links Layout Editor with completed GUI layout MATLAB Editor with completed M-file View an Animated Demo The following link displays an animated version of this example. Show guide demonstration
Laying Out the GUI 2-3 Laying Out the GUI This section illustrates how to lay out GUI components (i.e., user interface controls, such as push buttons, pop-up menus, static text, etc.) in the GUI. We recommend that you create the GUI for yourself, as this is the best way to learn how to use GUIDE. The section explains how to: • Open a completed version layout and code for the example • Open a new GUI in the Layout Editor • Set the GUI figure size • Add the components • Align the objects Layout and Code for the Example If you are reading this in the MATLAB Help browser, you can click the following links to display the GUIDE Layout Editor and the MATLAB Editor with a completed version of this example. This enables you to see the values of all component properties and to understand how the components are assembled to create the GUI. You can also see a complete listing of the code that is discussed in the following sections. Note The following links execute MATLAB commands and are designed to work within the MATLAB Help browser. If you are reading this online or in PDF, you should go to the corresponding section in the MATLAB Help Browser to use the links. • Layout Editor with completed GUI layout • MATLAB Editor with completed M-file View an Animated Demo The following link displays an animated version of this example. Show GUIDE demonstration
Example: Creating a GUI Open a New GUI in the Layout Editor Open guide by typing guide at the matlab prompt. This displays the quick Start dialog shown in the following figure Create New GUI Open Existing GU Preview a GUlwith Axes and Menu BLANK Cancel If GUIDE is already open, you can display a similar dialog, without the Open Existing GUI tab, by selecting New from the File menu In the quick Start dialog, select the Blank GUi (default)template. Click OK to display the blank GUIin the Layout Editor, as shown in the following figure You can choose to save your GUi immediately under a different name by selecting Save on startup. Otherwise, GUiDE prompts you to do so the first time you run the gui Set the GUl Figure Size Specify the size of the gui by resizing the grid area in the layout Editor. Click the grid until it is about 4-by-3 inche 2-4
2 Example: Creating a GUI 2-4 Open a New GUI in the Layout Editor Open GUIDE by typing guide at the MATLAB prompt. This displays the Quick Start dialog shown in the following figure: If GUIDE is already open, you can display a similar dialog, without the Open Existing GUI tab, by selecting New from the File menu. In the Quick Start dialog, select the Blank GUI (default) template. Click OK to display the blank GUI in the Layout Editor, as shown in the following figure. You can choose to save your GUI immediately under a different name by selecting Save on startup. Otherwise, GUIDE prompts you to do so the first time you run the GUI. Set the GUI Figure Size Specify the size of the GUI by resizing the grid area in the Layout Editor. Click on the lower-right corner and resize the grid until it is about 4-by-3 inches
Laying Out the GUI l Push Button Ta Toggle Button O Radio Button Ir Edit Text rar Statc Text E Liste Ca Popup Menu Cick corner to resize If you want to set the position or size of the guI to an exact value, do the following 1 Select Property Inspector from the view menu 2 Select the button next to Units and then select inches from the pop-up menu 3 Click the +sign next to Position 4 Type the x and y coordinates of the point where you want the lower left corner of the guI to appear, and its width and height, as shown in the following figure 5 Reset the Units property to characters Note Setting the Units property to characters gives the gui a more consistent appearance across platforms. 25
Laying Out the GUI 2-5 If you want to set the position or size of the GUI to an exact value, do the following: 1 Select Property Inspector from the View menu. 2 Select the button next to Units and then select inches from the pop-up menu 3 Click the + sign next to Position. 4 Type the x and y coordinates of the point where you want the lower left corner of the GUI to appear, and its width and height, as shown in the following figure. 5 Reset the Units property to characters. Note Setting the Units property to characters gives the GUI a more consistent appearance across platforms. Click corner to resize
Example: Creating a GUI 网口区 Position 374534443 height. painters RendererMode f SelectionHighlight Selection Type ormal UIContextMenu <None> Units centimeters points Add the Components Select the components to add from the palette and drag them into the layout area. You can resize components from any corner handle while it is selected Add three push buttons, a static text, a pop-up menu, and an axes. Arrange them as shown in the following figure. Resize the axes component to about 2-by-2 inches by selecting it with the mouse, and then clicking and dragging the lower-right corner 2-6
2 Example: Creating a GUI 2-6 Add the Components Select the components to add from the palette and drag them into the layout area. You can resize components from any corner handle while it is selected. Add three push buttons, a static text, a pop-up menu, and an axes. Arrange them as shown in the following figure. Resize the axes component to about 2-by-2 inches by selecting it with the mouse, and then clicking and dragging the lower-right corner
Laying Out the GUI File Edit View Layout Tools Help 哆回c最鄙以函哈|F Ial Toggle Button Push Button 区 Checkbox Push Button Align the objects You can align components with respect to one another with the alignment tool For example, to align the three push buttons: 1 Select all three push buttons by pressing Ctrl and clicking them. 2 Select Align Objects from the Tools menu to display the alignment Tool 3 Make the following settings in the alignment Tool, as shown in the following 20 pixels spacing between push buttons in the vertical direction Left-aligned in the horizontal direction 4 Click OK 27
Laying Out the GUI 2-7 Align the Objects You can align components with respect to one another with the Alignment Tool. For example, to align the three push buttons: 1 Select all three push buttons by pressing Ctrl and clicking them. 2 Select Align Objects from the Tools menu to display the Alignment Tool. 3 Make the following settings in the Alignment Tool, as shown in the following figure. - 20 pixels spacing between push buttons in the vertical direction. - Left-aligned in the horizontal direction. 4 Click OK