The panel configuration data can be stored anywhere. In the demo, it is in assets. When the panel file is used for the first time, it will be copied to the installation directory.
Mappings between the JSON structures and panel elements:
The items in the JSON file on the left correspond to the top-level menu on the right. clothes corresponds to the first item of the menu.
subTabs on the left corresponds to the second-level menu:
The AvatarData corresponding to the left icon is stored in the resources folder under the material, and the configuration data of the panel displayed on the right is associated with it through the category in the panel data. The SDK will parse the data in the resources folder and put it into the corresponding map, with the key of the map being the value of the category. Therefore, after parsing the panel.json file in the Demo, you can use the method provided by the SDK to obtain the data for association. You can refer to the getAvatarData method in AvatarResManager in the demo, which will parse the panel file and associate it with the attributes returned by the SDK.
* @param avatarDataCallBack: This API accesses files. The operation is performed in a child thread, and the data obtained is returned in a callback in the main thread.
* The returned data already contains the data in the `resources` folder.
The category of a second-level menu option, which is defined in the com.tencent.xmagic.avatar.AvatarCategory class of the SDK.
type
int
Yes
UI type:
0: Represents the icon type, default value.
1: Represents the slider adjustment type.
bindData
A list of BindData
No
Configuration field for dependent properties. This field can be configured under the Subtab node or the AvatarItem node. Configuring it under the Subtab node means that all items under the Subtab node depend on the properties configured in this binData. Configuring it under the AvatarItem node means that only this item will depend on the configuration data in the binData.
For example:
There is a dependency between hairstyle and hair color. When modifying the hairstyle, the hair color that the user previously set needs to be used. In this case, this field needs to be set in the hairstyle.
For the relationship between dresses and tops/pants, when setting a dress, the tops and pants need to be set to none, otherwise the page display will be abnormal. Therefore, this field can be configured under the dress node, please refer to the AvatarTPose_panel.json in the demo for details.
There is a dependency between glasses and lenses, so the corresponding bindData field is configured under each glasses item to associate lens information.
onNoneListener
A list of
BindData
No
Field explanation: Used when there is no selection in the items, the configuration information in this field is used.
For example: for pants, tops, and dresses, this property is configured in the dress. When the user clicks on the dress, no item in the tops and pants is selected. However, when the customer clicks on the top again, at this time, a default pair of pants needs to be set for the avatar (otherwise the avatar will not have pants), and the default pants configured in this field can be parsed and set. Please refer to AvatarTPose_panel.json in the demo for details.
The property ID, which corresponds to the ID in AvatarData returned by the SDK.
icon
String
Yes
The URL of the icon or the color in ARGB format (“#FF0085CF”).
type
Int
Yes
The display type. Valid values: AvatarData.TYPE_SLIDER (slider), AvatarData.TYPE_SELECTOR (icon).
selected
boolean
Yes
If type is AvatarData.TYPE_SELECTOR, this field indicates whether the item is selected.
downloadUrl
String
No
The dynamic download address of the configuration file.
category
String
Yes
Same as category in SubTab.
labels
Map<String, String>
No
The Chinese labels on the left of the panel. This field is not empty if type is AvatarData.TYPE_SLIDER.
enLabels
Map<String, String>
No
The English labels on the left of the panel. This field is not empty if type is AvatarData.TYPE_SLIDER.
bindData
A list of BindData
No
Configuration field for dependent properties. This field can be configured under the Subtab node or the AvatarItem node. Configuring it under the Subtab node means that all items under the Subtab node depend on the properties configured in this binData. Configuring it under the AvatarItem node means that only this item will depend on the configuration data in the binData.
For example:
There is a dependency between hairstyle and hair color. When modifying the hairstyle, the hair color that the user previously set needs to be used. In this case, this field needs to be set in the hairstyle.
For the relationship between dresses and tops/pants, when setting a dress, the tops and pants need to be set to none, otherwise the page display will be abnormal. Therefore, this field can be configured under the dress node, please refer to the AvatarTPose_panel.json in the demo for details.
There is a dependency between glasses and lenses, so the corresponding bindData field is configured under each glasses item to associate lens information.
avatarData
AvatarData
No
The property operation class defined in the SDK.
animation
AvatarAnimation
No
The property operation class defined in the SDK.
BindData
Field
Type
Required
Description
category
String
Yes
Same as category in SubTab.
id
String
Yes
The ID of each property corresponds to the ID in the AvatarData data returned by the SDK.
firstLevelId
String
Yes
The ID of the top-level category to which this data belongs.
avatarData
AvatarData
Yes
The property operation class defined in the SDK.
isTraverseOnSave
Boolean
Yes
When saving, whether to traverse the data in this bindData depends on the specific situation. In general, it needs to be traversed, except for the hairstyle and hair color configured in the hat, and the hat and hair color configured in the hairstyle, which do not need to be traversed.