Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F78569941
User_guide1_3.html
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Wed, Aug 21, 16:39
Size
6 KB
Mime Type
text/html
Expires
Fri, Aug 23, 16:39 (2 d)
Engine
blob
Format
Raw Data
Handle
20066486
Attached To
rINSTCONTROL Instrument Control
User_guide1_3.html
View Options
<html
xmlns:saxon=
"http://icl.com/saxon"
>
<head>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"doc.css"
/>
<link
rel=
"stylesheet"
type=
"text/css"
href=
""
/>
<meta
author=
"The MathWorks Ltd."
/>
<meta
copyright=
"2017 The MathWorks Ltd."
/>
<title>
Sizes and units
</title>
</head>
<body>
<table
class=
"header"
width=
"100%"
border=
"0"
cellspacing=
"0"
cellpadding=
"0"
>
<tr>
<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>
<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>
</tr>
</table>
<br
clear=
"all"
/>
<h2>
1.3: Sizes and units
<a
href=
"User_guide1.html"
><img
src=
"Images/uparrow.png"
border=
"0"
align=
"top"
alt=
"Go back up one level"
/></a></h2>
<p>
In the previous section we noted that when using layouts
you never need to set the position or size of a user-interface
component yourself - the layouts take care of it. So how do
you control the sizes of the components?
</p>
<p>
Each layout that arranges multiple items within its drawing area
has a sizing property: for horizontal boxes this is
<code>
Widths
</code>
and for vertical boxes
<code>
Heights
</code>
; for grids we have both
<code>
Widths
</code>
and
<code>
Heights
</code>
. These all obey the same convention:
</p>
<ol>
<li>
Positive numbers indicate sizes in pixels (similar to "pixel" units)
</li>
<li>
Negative numbers indicate a weighting for variable sizing (similar to "normalized" units)
</li>
</ol>
<p>
By default all sizes are set to -1 (variable size with unit weighting).
</p>
<p>
Let's take a simple example:
</p>
<example>
<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>
();
layout =
<a
href=
"uix.HBox.html"
><code
class=
"FUNCTION"
>
uix.HBox
</code></a>
( 'Parent', f );
<a
href=
"matlab:doc uicontrol"
><code
class=
"FUNCTION"
>
uicontrol
</code></a>
( 'String', 'Button 1', 'Parent', layout );
<a
href=
"matlab:doc uicontrol"
><code
class=
"FUNCTION"
>
uicontrol
</code></a>
( 'String', 'Button 2', 'Parent', layout );
<a
href=
"matlab:doc uicontrol"
><code
class=
"FUNCTION"
>
uicontrol
</code></a>
( 'String', 'Button 3', 'Parent', layout );
</font></pre>
<p
style=
"background-color: #ddddee; margin-left: 20px; margin-right: 20px"
><font
color=
"#000022"
><center><img
src=
"Images/basics_example4.png"
/></center></font></p>
</example>
<p>
We can set the middle element to be twice as wide as the others
(but still variable width) by setting its weight to -2 with the others at -1:
</p>
<example>
<pre
style=
"background-color: #eeeeff; margin-left: 20px; margin-right: 20px"
><font
color=
"#000011"
>
layout.Widths = [-1 -2 -1]
</font></pre>
<p
style=
"background-color: #ddddee; margin-left: 20px; margin-right: 20px"
><font
color=
"#000022"
><center><img
src=
"Images/basics_example5.png"
/></center></font></p>
</example>
<p>
Alternatively we might want the first element to have a
fixed width of 100 pixels with the others filling any remaining
space equally:
</p>
<example>
<pre
style=
"background-color: #eeeeff; margin-left: 20px; margin-right: 20px"
><font
color=
"#000011"
>
layout.Widths = [100 -1 -1]
</font></pre>
<p
style=
"background-color: #ddddee; margin-left: 20px; margin-right: 20px"
><font
color=
"#000022"
><center><img
src=
"Images/basics_example6.png"
/></center></font></p>
</example>
<p>
This ability to mix fixed and variable sized elements is
crucial in interface design. It really comes into its own when building
a hierarchy of layouts, described next.
</p>
<br
clear=
"all"
/><hr/><h3
class=
"hbg"
><a
name=
""
>
</a><a
name=
"1.3.1"
>
</a>
1.3.1:
Minimum sizes
<a
href=
"#Top"
><img
src=
"Images/uparrow.png"
border=
"0"
align=
"top"
alt=
"Go back up one level"
/></a></h3>
<p>
Many of the multi-element layouts also provide a
<code>
MinimumWidths
</code>
or
<code>
MinimumHeights
</code>
property to prevent an element becoming too small. This is measured in
pixels and defaults to one pixel. Take care to ensure that the available
space is at least the sum of the minimum sizes, plus any padding and
spacing.
</p>
<br
clear=
"ALL"
/>
<table
class=
"footer"
width=
"100%"
border=
"0"
cellspacing=
"0"
cellpadding=
"0"
>
<tr>
<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>
<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>
<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>
<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 hierarchies
</font></a></td>
<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>
</tr>
</table>
<font
face=
"Arial"
bgcolor=
"#e4f0f8"
size=
"normal"
underline=
"0"
color=
"#000000"
>
©
2017 The MathWorks Ltd
</font>
<TT>
•
</TT><a
href=
"matlab: termsOfUse"
>
Terms of Use
</a>
<TT>
•
</TT><a
href=
"matlab: helpview([matlabroot,'/patents.txt'])"
>
Patents
</a>
<TT>
•
</TT><a
href=
"matlab: helpview([matlabroot,'/trademarks.txt'])"
>
Trademarks
</a>
</body>
</html>
Event Timeline
Log In to Comment