tencent cloud

Feedback

Custom Avatar UI

Last updated: 2023-05-18 09:54:04

    Demo UI

    
    
    

    Using the demo UI

    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.
    
    

    Key Classes of the Demo

    Path: com.tencent.demo.avater.AvatarResManager.java

    1. Load the avatar resources

    /**
    * Used to load the avatar resources
    *
    * @param xmagicApi: The `XmagicApi` object.
    * @param avatarResName: The name.
    * @param avatarSaveData: The default configuration of the loading model. If there isn’t a default configuration, pass null.
    */
    public void loadAvatarRes(XmagicApi xmagicApi, String avatarResName, String avatarSaveData)

    2. Get the panel data

    /**
    * Get the avatar panel data
    *
    * @param avatarResName: The avatar material name.
    * @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.
    */
    public void getAvatarData(String avatarResName, String avatarSaveData, LoadAvatarDataCallBack avatarDataCallBack)

    3 Get the user’s settings or default settings from the panel data

    // Get the user’s settings or the default settings from the panel file
    public static List<AvatarData> getUsedAvatarData(List<MainTab> mainTabList)

    4. Parse the corresponding avatarData from bindData.

    /**
    * Parse the corresponding avatarData from bindData.
    *
    * @param bindDataList
    * @return Return the corresponding list of avatarData.
    */
    public static List < AvatarData > getAvatarDataByBindData(Map < String, MainTab > mainTabList, List < BindData > bindDataList, boolean isFromSaveData)

    Appendix

    This section provides descriptions of fields in MainTab.java,SubTab.java,AvatarItem.java and BindData.java.

    MainTab

    Field
    Type
    Required
    Description
    id
    String
    Yes
    The globally unique identifier of a main menu option.
    label
    String
    No
    The Chinese name of a main menu option (this is not displayed in the demo).
    labelEn
    String
    No
    The English name of a main menu option (this is not displayed in the demo).
    avatarPanelType
    Int
    Yes
    Panel type:
    0: Dress-up panel
    1: Face customization panel
    2: Background panel
    3: Action panel
    iconUrl
    String
    Yes
    The URL of the icon when not selected.
    checkedIconUrl
    String
    Yes
    The URL of the icon when selected.
    subTabs
    A list of SubTab
    Yes
    The options of the second-level menu.

    SubTab

    Field
    Type
    Required
    Description
    label
    String
    Yes
    The Chinese name of a second-level menu option.
    labelEn
    String
    Yes
    The English name of a second-level menu option.
    category
    String
    Yes
    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.
    items
    A list of AvatarItem
    Yes
    A list of AvatarIcon.

    AvatarItem

    Field
    Type
    Required
    Description
    id
    String
    Yes
    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.
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support