This component functions as a view group, which contains elements such as Image, Button, Text, and DateTime. You can adjust the coordinate, width, and height settings in <Group> or adjust the positions and sizes of multiple elements in it. In addition, you can add various basic animation elements such as PositionAnimation, RotationAnimation, AlphaAnimation, and SizeAnimation.
<Group name="" x="" y="" w="" h="" alpha="" angle="" visibility="" clip="" layered="">
<Image/>
<Time/>
<DateTime/>
<Text/>
<PositionAnimation/>
<SizeAnimation/>
<RotationAnimation/>
<AlphaAnimation/>
</Group> Parameter | Type | Mandatory | Description |
|---|---|---|---|
name | String | No | Name of a group widget. |
x | Number | No | X coordinate relative to the upper left corner of the screen. |
y | Number | No | Y coordinate relative to the upper left corner of the screen. |
w | Number | No | Width of a group widget. |
h | Number | No | Height of a group widget. |
alpha | Number | No | Transparency, which ranges from 0 to 255. If this parameter is set to 0, images are not displayed. |
rotation (angle) | Number | No | Rotation angle. A 360-degree angle is a full circle. |
visibility | Number | No | Element visibility. Expressions are supported. If this parameter is set to true or a positive value, the element is visible. If this parameter is set to false, 0, or a negative value, the element is invisible. |
clip | String | No | Indicates whether to tailor content. If this parameter is set to true, the width and height of the group control are measured. If the width or height is greater than that specified by w or h, the extra part is cut out. If this parameter is set to false, the width and height of the element are measured. The default value is false. |
layered | String | No | Indicates whether to layer elements. If this parameter is set to true and multiple images can be mixed, the last <Image> tag and only the last one in <Group> must have the hybridMode parameter. |
align | String | No | Horizontal alignment mode. The default value is left. The options are left, center, and right. If a sub-view has its own X coordinate, the X coordinate is not affected by the align parameter. That is, the priority of the X coordinate of the sub-view is higher than that specified by the align parameter. |
alignV | String | No | Vertical alignment mode. The default value is top. The options are top, center, and bottom. If a sub-view has its own Y coordinate, the Y coordinate is not affected by the alignV parameter. That is, the priority of the Y coordinate of the sub-view is higher than that specified by the alignV parameter. |
Example 1: Combine multiple images to control their display at the same time.
<Group x="520" y="120"> <Image x="200" y="230" srcid="#year/1000" src="date.png"/> <Image x="200+20" y="230" srcid="#year/100%10" src="date.png"/> <Image x="200+40" y="230" srcid="#year%100/10" src="date.png"/> <Image x="200+60" y="230" srcid="#year%10" src="date.png"/> <Image x="200+80" y="230" src="date_dot.png"/> <Image x="200+100" y="230" src="date.png" srcid="(#month+1)/10"/> <Image x="200+120" y="230" src="date.png" srcid="(#month+1)%10"/> <Image x="200+140" y="230" src="date_dot.png"/> <Image x="200+160" y="230" src="date.png" srcid="#date/10"/> <Image x="200+180" y="230" src="date.png" srcid="#date%10"/> <Image x="200+210" y="230" src="week.png" srcid="#day_of_week"/> </Group>
Example 2: Combine two images for position and rotation animations.
<Text x="250" y="1800" align="left" alignV="top" color="#ffffff" size="40" text="Combine images for position and rotation animations" />
<Group x="0" y="200" w="160" h="1000" alpha="155" rotation="90" visibility="1" clip="true">
<Image x="300" y="500" align="center" alignV="center" src="ty.png"/>
<PositionAnimation>
<Position x="0" y="0" time="0"/>
<Position x="150" y="0" time="600"/>
<Position x="0" y="0" time="1800"/>
</PositionAnimation>
<Image x="550" y="500" align="center" alignV="center" src="aixin7.png"/>
<RotationAnimation>
<Rotation angle="0" time="0"/>
<Rotation angle="20" time="600"/>
<Rotation angle="0" time="1800"/>
</RotationAnimation>
</Group>