This component is used to display text in a specified format. You can set the text size, color, line spacing, and whether to support automatic line feed (when the actual text width exceeds the specified width). In addition, you can set advanced text effects such as marquee text, text shadow, and text display paths.
<Text color="" size="" format="" paras="" textExp="" width="" autoLineFeed="" bold="" spaceTimes="" spaceExtraAdd="" shadowDx="" shadowDy="" Radius="" shadowColor="" marquee="" showTime="" showStyle="" marqueeColor="" tileMode="" canPath=""/>
Parameter | Type | Mandatory | Description |
|---|---|---|---|
color | String | No | Text color, which can be represented in three ways. 1. Use a 6- or 8-digit hexadecimal color code, for example, #FFFFFF or #FFFFFFFF. For an 8-digit hexadecimal color code, the first two digits indicate transparency, and the remaining six digits indicate red, green, and blue respectively. 2. Use the argb(transparency,red,green,blue) function. Each value in the function ranges from 0 to 255. 3. Use a string variable, for example, @abc. You can use a 6- or 8-digit hexadecimal color code without a number sign (#), for example, ffffff, ffffffff, or the argb function to represent the string variable. After color is set, the value of the common attribute alpha is invalid. |
size | Number | No | Text size, in pixels. The value is a positive number. The default value is 40. |
format | String | No | Format. Numeric or string variables can be referenced in text. You can use %d (numeric expression) and %s (string expression) to specify the variable positions, and specify the corresponding variable expressions in the paras parameter. Multiple variables can be referenced. |
paras | String | No | If the format parameter is used, you need to specify the variable expressions corresponding to %d and %s in the paras parameter. Multiple variable expressions must be separated by commas (,). |
textExp (text) | String | No | Text expression, which can directly reference a single variable. Expressions constructed by multiple variables are not supported. For example, if you want to output "The current time is 9:00 am", write textExp="'The current time is '+#hour+'am'" or text="The current time is 9:00 am". The output effects of textExp and text are the same. |
width | Number | No | Text width. If the actual text width exceeds the specified width, extra text will be truncated. However, if you configure automatic line feed, extra text will be displayed in a new line. If you configure the scrolling text effect, extra text will be scrolled at the specified position. |
autoLineFeed | String | No | Indicates whether to support automatic line feed. The options are true (yes) and false (no). The default value is false. If this parameter is set to true, width must be set. Otherwise, lines will not be automatically fed out. |
textalign | String | No | Alignment mode of text in a line fed out. The options are left, right, and center. This parameter takes effect only when autolineFeed is set to true. |
bold | String | No | Indicates whether to use the bold font. The options are true (yes) and false (no). The default value is false. |
spaceTimes | Number | No | Line spacing, which is similar to that in Microsoft Word. The default value is 1. |
spaceExtraAdd | Number | No | Additional line spacing, that is, line spacing to be added on the basis of that specified by spacingMult, in pixels. The default value is 0. |
shadowDx | Number | No | Horizontal offset distance of text shadows, in pixels. |
shadowDy | Number | No | Vertical offset distance of text shadows, in pixels. |
Radius | Number | No | Shadow radius. The recommended value range is 1 to 24. A smaller value indicates a clearer text shadow. The shadow of large text is clearer than that of small text if they have the same shadow radius. If the parameter value is less than or equal to 0, there is no shadow effect. |
shadowColor | String | No | Shadow color. For details about the value, please refer to the description of color. If this parameter is not set, there is no text shadow effect. |
marquee | String | No | Indicates whether to use the marquee text effect. The options are true (yes) and false (no). The default value is false. If both the marquee text effect and text shadow effect are used, the text shadow color will be covered by the marquee text color. |
showTime | Number | No | Interval for marquee text, in milliseconds. |
showStyle | Number | No | Marquee text style. The options are 0 (unidirectional scrolling) and 1 (bidirectional scrolling). The default value is 0. |
marqueeColor | String | No | Marquee text color. For details about the value, please refer to the description of color. |
tileMode | String | No | Tile mode of the marquee text color. The options are as follows:
To clearly identify the difference between the two modes, set the text to more than 7 Chinese characters or more than 10 English characters. |
canPath | String | No | canPath indicates whether to display text by path. The path is defined by a series of PathItem tags. The options are true (yes) and false (no). In the <Text> tag, the x and y parameters respectively indicate the horizontal and vertical coordinates of the start point of the path. The PathItem tag specifies a path, and its parameters are described as follows:
The controlX and controlY parameters are valid only when type is set to quadTo. When type is set to lineTo, controlX and controlY do not need to be set. |
Example 1: Demonstrate the text line spacing, automatic line feed, text shadow, and marquee text effects.
<Text x="100" y="400" size="38" text="Use 1.4 line spacing and support automatic line feed" width="300" autoLineFeed="true" spaceTimes="1" spaceExtraAdd="0.4" Radius="5" shadowDx="3" shadowDy="3" shadowColor="#FFFFFFFF" format="%d unread messages and %d missed calls" paras="#sms_unread_count,#call_missed_count" visibility="#sms_unread_count"/> <Text x="500" y="400" text="Demonstrate the marquee text effect" size="48" color="#ff0000" marquee="true" showTime="100" showStyle="0" tileMode="STRETCH" marqueeColor="#00ff00"/>
Example 2: Demonstrate the text path effect. The text can be displayed in the path defined by a series of PathItem tags.
<Text x="50" y="700" text="This is how text is displayed by path" canPath="true" >
<PathItem type="quadTo" controlX="80" controlY="50" x="120" y="50"/>
<PathItem type="quadTo" controlX="230" controlY="150" x="330" y="300"/>
<PathItem type="quadTo" controlX="430" controlY="400" x="540" y="400"/>
<PathItem type="quadTo" controlX="630" controlY="400" x="700" y="400"/>
<PathItem type="lineTo" x="900" y ="600"/>
</Text>