source: MML/trunk/machine/SOLEIL/common/toolbox/GUILayout/layoutHelp/User guide1_3.html @ 4

Last change on this file since 4 was 4, checked in by zhangj, 11 years ago

Initial import--MML version from SOLEIL@2013
File size: 6.4 KB
Line 
1<html xmlns:saxon="http://icl.com/saxon">
2   <head>
3      <link rel="stylesheet" type="text/css" href="doc.css"/>
4      <link rel="stylesheet" type="text/css" href=""/>
5      <meta author="The MathWorks Ltd."/>
6      <meta copyright="2011 The MathWorks Ltd."/>
7      <title>Sizes and units</title>
8   </head>
9
10   
11    <body>
12      <table class="header" width="100%" border="0" cellspacing="0" cellpadding="0">
13         <tr>
14            <td bgcolor="#e4f0f8"><A href="User guide.html"><font face="Arial" bgcolor="#e4f0f8" size="+0" underline="0" color="#000000"><b>User guide</b></font></A></td>
15            <td width="36" bgcolor="#e4f0f8"><A HREF="User guide1_2.html"><IMG SRC="Images/leftarrow.png" BORDER="0" ALT="previous page"/></A><A HREF="User guide1_4.html"><IMG SRC="Images/rightarrow.png" BORDER="0" ALT="next page"/></A></td>
16         </tr>
17      </table>
18   
19
20      <br clear="all"/>
21         
22      <h2>1.3: Sizes and units&nbsp;<a href="User guide1.html"><img src="Images/uparrow.png" border="0" align="top" alt="Go back up one level"/></a></h2>
23     
24                <p>In the previous section we noted that when using layouts
25                    you never need to set the position or size of a user-interface
26                    component yourself - the layouts take care of it. So how do
27                you control the sizes of the components?</p>
28                <p>Each layout that arranges multiple items within its drawing area
29                    has a sizing property: for horizontal and vertical boxes this
30                    is called <code>Sizes</code>; for grids we have <code>RowSizes</code>
31                and <code>ColumnSizes</code>. These all obey the same convention:</p>
32                <ol>
33                    <li>Positive numbers indicate sizes in pixels (similar to "pixel" units)</li>
34                    <li>Negative numbers indicate a weighting for variable sizing (similar to "normalized" units)</li>
35                </ol>
36                <p>By default all sizes are set to -1 (variable size with unit weighting).</p>
37                <p>Let's take a simple example:</p>
38                <example>
39                <pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">f = <a href="matlab:doc figure"><code class="FUNCTION">figure</code></a>();
40layout = <a href="uiextras.HBox.html"><code class="FUNCTION">uiextras.HBox</code></a>( 'Parent', f );
41<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'String', 'Button 1', 'Parent', layout );
42<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'String', 'Button 2', 'Parent', layout );
43<a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( 'String', 'Button 3', 'Parent', layout );</font></pre>
44                <p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/basics_example4.png"/></center></font></p>
45</example>
46                <p>We can set the middle element to be twice as wide as the others
47            (but still variable width) by setting its weight to -2 with the others at -1:</p>
48                <example>
49                    <pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">layout.Sizes = [-1 -2 -1]</font></pre>
50                <p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/basics_example5.png"/></center></font></p>
51</example>
52                <p>Alternatively we might want the first element to have a
53                fixed width of 100 pixels with the others filling any remaining
54                space equally:</p>
55                <example>
56                <pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">layout.Sizes = [100 -1 -1]</font></pre>
57                <p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/basics_example6.png"/></center></font></p>
58</example>
59
60                <p>This ability to mix fixed and variable sized elements is
61            crucial in interface design. It really comes into its own when building
62        a heirarchy of layouts, described next.</p>
63               
64           
65       
66            <br clear="all"/><hr/><h3 class="hbg"><a name="">&nbsp;</a><a name="1.3.1">
67                        &nbsp;</a>1.3.1:
68                        Minimum sizes&nbsp;<a href="#Top"><img src="Images/uparrow.png" border="0" align="top" alt="Go back up one level"/></a></h3>
69                <p>Many of the multi-element layouts also provide a <code>MinimumSizes</code>
70                    property to prevent an element becoming too small. This is measured in
71                    pixels and defaults to one pixel. If the specified minimum sizes cannot fit
72                within the available space then all element sizes are reduced to fit.</p>
73           
74     
75      <br clear="ALL"/>
76      <table class="footer" width="100%" border="0" cellspacing="0" cellpadding="0">
77         <tr>
78            <td width="18" height="15" bgcolor="#e4f0f8" align="left"><a href="User guide1_2.html"><img src="images/leftarrow.png" border="0" alt="previous page"/></a></td>
79            <td width="40%" height="15" bgcolor="#e4f0f8" align="left"><a href="User guide1_2.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">Types of layout</font></a></td>
80            <td width="20%" height="15" bgcolor="#e4f0f8" align="center"><a href="index.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">[Top]</font></a></td>
81            <td width="40%" height="15" bgcolor="#e4f0f8" align="right"><a href="User guide1_4.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">Layout heirarchies</font></a></td>
82            <td width="18" height="15" bgcolor="#e4f0f8" align="right"><a href="User guide1_4.html"><img src="images/rightarrow.png" border="0" alt="next page"/></a></td>
83         </tr>
84      </table>
85      <font face="Arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">&copy; 2011 The MathWorks Ltd</font>
86      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/license.txt'])">Terms of Use</a>
87      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/patents.txt'])">Patents</a>
88      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/trademarks.txt'])">Trademarks</a>
89   
90   </body>
91</html>
92       
Note: See TracBrowser for help on using the repository browser.