The correlation system is the core technology of FairyGUI to realize automatic layout. The layout systems provided by other UI frameworks generally only provide various fixed layouts or anchor points, which can only define the relationship between components and containers. The relation of FairyGUI can define the relationship between any two components, and the interaction methods are more diverse.

Set up relation

Select a component, you can see the relation panel appears on the right property bar:

The target of the relation can be any component in the current container, or the container itself (called a container component) being edited.
If the target to be set is a container component, click the drop-down box under “Container” to quickly complete the setting; if it is another component, click “to other components” to enter the interface for selecting the target component. At this time we will You can select the target object from the editing area on the left. After the selection is completed, click “Finish” to complete the setting.

After the target object is set, you can set the relationship between yourself and the target.

The types of relations are: (For the convenience of discussion, it is assumed that they are A and the target element is T)

As another example, a component dynamically added to the stage always keeps the full screen size, which can be called like this

aObject.SetSize(GRoot.inst.width, GRoot.inst.height);
aObject.AddRelation(GRoot.inst, RelationType.Size);

RelationType.Size is equivalent to the combination of RelationType.Width_Width and RelationType.Height_Height. It is emphasized here that the operation of making the component full screen size must be completed by you, that is, SetSize call in the above code. relation does not accomplish this task, because relation does not matter the current size of the component, it only keeps the difference in size when the target changes.

To delete the relation:

// Delete an relation
    aObject.RemoveRelation (targetObject, RelationType.Size);
    // Delete all relations pointing to an object
    aObject.relations.ClearFor (targetObject);


Example one

This is the main interface of a game. The main interface usually needs to be resized to full screen when it is actually displayed. This requires that the interface size be considered when designing. The following figure is the requirements for the layout of individual components in the main interface:

A: Associated with container component “left and right center”
B: Associated with container component “Right-> Right”
C: Associated with the container component “right-> right”, “bottom-> bottom”
D: Associated with the container component “bottom-> bottom” and “center left and right%”
E: Associated with the container component “bottom-> bottom”

Then set this interface to full screen at runtime.

aComponent.SetSize (GRoot.inst.width, GRoot.inst.height);
    // Keep the full screen when the screen changes. This sentence can also be ignored if the screen size is always the same
    aComoponet.AddRelation (GRoot.inst, RelationType.Size);

Example two

This is a game’s NPC information interface. The intro text of the NPC is dynamic, and the text of auto height is used here. The link below is a list. Requires the list to move up or down automatically when the text content changes. We just need to associate the list “top-> bottom” to the text.

Example three

This is a display of the amount of money in the game, requiring that currency icons and text remain centered when the amount changes.

First, the text needs to be set to auto width and height so that the text automatically grows when the amount changes.
The relations used are:
Text: Centered left and right to the container component
Icon: Left-> Left to text