Recipe 9.10.
Sizing Text Fields to Fit Contents
Problem
You want
to size a text field's viewable area to fit the text it
contains.
Solution
Use the autoSize property.
Discussion
You can set the autoSize property of a
text field so it automatically resizes itself in order to fit its
contents. The possible values for autoSize are the
RIGHT, LEFT, CENTER, and NONE
constants of the flash.text.TextFieldAutoSize
class. By default, autoSize is set to NONE,
meaning that the text field does not automatically resize.
Set the property to LEFT if you want
the text field to resize while fixing the upper-left corner's
position. In other words, the text field's lower-right corner is
the point that moves when it expands and contracts:
// These two lines do the same thing
field.autoSize = TextFieldAutoSize.LEFT;
field.autoSize = true;
Set the property to CENTER if you want
the text field to be anchored at its center point. While the top of
the object remains fixed, it expands and contracts downward and
equally to the right and left:
field.autoSize = TextFieldAutoSize.CENTER;
Set the property to RIGHT if you want
the upper-right corner of the text field to remain steady while the
object expands and contracts in the direction of the lower-left
corner:
field.autoSize = TextFieldAutoSize.RIGHT;
When wordWrap is set to false
(the default), then the text field expands horizontally to
accommodate the text. In such a case, the text field expands
vertically only if there are newlines within the text assigned to
the text field. The following example illustrates a text field that
auto sizes to accommodate all the text on one line:
var field:TextField = new TextField( );
field.autoSize = TextFieldAutoSize.LEFT;
field.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor purus, aliquet a, ornare ac, suscipit a, est. Nullam hendrerit molestie erat. Nunc nulla tortor, ullamcorper et, elementum vel, fringilla sed, dui. Praesent fermentum interdum orci.";
addChild(field);
The following adds a newline character to the
text assigned to the text field so that it auto sizes to display
all the text on two lines:
var field:TextField = new TextField( );
field.autoSize = TextFieldAutoSize.LEFT;
field.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor purus, aliquet a, ornare ac, suscipit a, est.";
field.text += "\n";
field.text += "Nullam hendrerit molestie erat. Nunc nulla tortor, ullamcorper et, elementum vel, fringilla sed, dui. Praesent fermentum interdum orci.";
addChild(field);
When wordWrap is set to TRue,
then the text field never expands beyond the value of the
width property (100 by default). If necessary, the text
automatically wraps to a new line if autoSize is set to
RIGHT, LEFT, or CENTER:
var field:TextField = new TextField( );
field.autoSize = TextFieldAutoSize.LEFT;
field.wordWrap = true;
field.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tortor purus, aliquet a, ornare ac, suscipit a, est. Nullam hendrerit molestie erat. Nunc nulla tortor, ullamcorper et, elementum vel, fringilla sed, dui. Praesent fermentum interdum orci.";
addChild(field);
See Also
Recipe
9.6
|