如何使用SDK配置应用程序UI

SDK包含一个UI生成器，可使用它配置应用程序UI的视觉效果。

您可以编辑影响UI元素视觉效果（颜色、纹理及字体）的全局设置来更改UI。这些属性的组合叫做主题。

要替换同一类型的UI元素，可使用小组件包装，即创建的UI元素的容器。

UI生成器包含2个独立部分：

使用主题

主题是一个XsollaUtilsTheme类型的资源。它包含用于UI元素的颜色、字体和纹理列表。每个列表是一组键值对，其中键是主题参数的唯一名称，值是相应的颜色、字体或纹理。

您可以在Settings > Project Settings > Plugins > Xsolla UIBuilder中对主题进行操作：

  • 要设置UI的主题，请在Interface Theme字段中选择主题。
  • 要编辑所选主题，请单击Interface Theme字段旁边的🔎按钮。

注：
如果SDK是通过Epic Games启动器安装，从SDK修改标准主题将影响使用这些主题的其他项目。建议单独为您的应用程序创建一个主题。
  • 要创建新主题，请单击Interface Theme字段旁边的+图标。
  • 要删除选择的主题，请单击Interface Theme字段旁边的×图标。
注：
如果更改了主题参数名称，则需要编辑它的所有小组件。

将UI元素与主题关联

要将UI元素与主题关联：

  1. 在UI元素小组件蓝图中，通过以下方法访问主题：
    • GetCurrentTheme — 返回在插件设置中指定的当前主题。
    • GetTheme — 按照在ThemeClass参数中指定的名称返回主题。
  2. 使用以下方法通过传入主题参数名称获取相应参数的值：
    • GetColor — 获取颜色值。
    • GetFont — 获取字体。
    • GetBrush — 获取纹理。

在演示项目中，每个支持主题的小组件有一组包含主题参数名称，类型为String的参数。这些参数用于为UI元素设置视觉效果。

要查找支持主题的小组件示例，请前往Content Browser > Xsolla Content > Common > Components > Primitives。

使用小组件管理器

小组件管理器是一个机制，可以让您通过更改UI元素的视觉效果和行为将其替换为同一类型的UI元素。

要创建支持小组件管理器的UI，需满足以下条件：

  • 使用指定统一接口为UI元素创建小组件。
  • 在小组件库中定义UI元素小组件的类型名称。
  • 将UI元素的小组件类型传入包装。包装是用于创建UI元素的容器。小组件类型的名称应与库中的名称相同。
  • 创建UI时，请使用包装而不要使用小组件。

小组件包装

包装是一个在包装所在页的区域中创建所需小组件的容器。

创建UI时使用小组件包装可让您自动在整个UI中更改UI元素，只需更改包装中的小组件即可。而使用UI基元的标准流程在此情况中只能手动替换所有小组件。

以下是用于不同小组件类型的包装：

  • W_ButtonWrapper — 用于按钮
  • W_InputWrapper — 用于输入字段
  • W_TextWrapper — 用于文本
  • W_RichTextWrapper — 用于富文本
  • W_ImageWrapper — 用于图片
  • W_CheckBoxWrapper — 用于复选框

在Details面板中，可配置包装创建的小组件的显示参数。在Widget Library Name字段中，应指定小组件类型在当前小组件库中的名称。

可在Content Browser > Xsolla Content > Common > Components > Wrappers中找到小组件包装蓝图。

包装使用小组件管理器方法与小组件交互。

小组件接口

为使UI基元以同普通小组件交互的方式与小组件包装交互，包装使用统一接口。

以下是用于不同小组件类型的包装：

  • BPI_PrimitivesButton — 用于按钮
  • BPI_PrimitivesInput — 用于输入字段
  • BPI_PrimitivesText — 用于文本
  • BPI_PrimitivesRichText — 用于富文本
  • BPI_PrimitivesImage — 用于图片
  • BPI_PrimitivesCheckbox — 用于复选框

可在Details面板的Implemented Interfaces部分配置UI元素小组件的接口。

可在Content Browser > Xsolla Content > Common > Components > Interface中找到小组件接口。

小组件库

小组件库是XsollaUtilsWidgetsLibrary类型的资源，包含一组键值对形式的小组件类。键包含小组件类型的名称，值包含由该键的相应包装创建的小组件类。

小组件库相当于包装和小组件类之间的接口。

BP_DefaultWidgetLibrary默认小组件库包含在SDK中。该库包含演示项目中的一组UI元素。

您可以在Settings > Project Settings > Plugins > Xsolla UIBuilder中对小组件库进行操作：

  • 要安装当前小组件库，请在Widgets Library字段中选择该库。
  • 要编辑所选小组件库，请单击Widgets Library字段旁边的🔎按钮。

注：
如果SDK是通过Epic Games启动器安装，从SDK修改标准小组件库将影响使用该库的其他项目。建议单独为您的应用程序创建一个小组件库。

  • 要创建新小组件库，请单击Widgets Library字段旁边的+图标。
  • 要删除选择的小组件库，请单击Widgets Library字段旁边的×图标。

请使用包装蓝图中的以下方法访问小组件库：

  • GetCurrentWidgetsLibrary — 返回插件设置中指定的当前小组件库。
  • GetWidgetsLibrary — 按照 WidgetLibraryClass参数中指定的名称返回指定的小组件库。

请使用包装蓝图中的GetWidget方法获取库中的小组件类型。

小组件管理器的方法

包装使用以下方法与小组件交互。创建自己的包装和支持主题的小组件时可使用这些方法。

操作按钮的方法

方法名称描述
SetButtonEnabled设置定义按钮是否响应了键盘、鼠标、定时器等事件的按钮状态。
IsButtonEnabled返回定义按钮是否响应了键盘、鼠标、定时器等事件的按钮状态。
GetWidget返回包含该小组件的UI基元列表。用于订阅按钮点击事件。
ConstructButton初始化按钮小组件。由小组件包装使用。
SetExtraData设置按钮的其他数据。每个小组件根据内在逻辑处理收到的数据、展示数据或使用数据。例如，可用一组其他数据将下拉菜单元素列表传入有下拉菜单的按钮。
SetIconData设置一组按钮显示图标。使用此方法指定图标大小以及图标和其他按钮元素之间的距离。
SetButtonSelected设置开关位置。例如：开或关，在购物车中或不在购物车中等。
GetThemeData返回按钮小组件使用的主题参数组。
SetButtonText设置按钮的文本。

操作复选框的方法

方法名称描述
SetIsChecked设置复选框被勾选或未勾选的状态。
GetIsChecked返回复选框的状态。
IsTickHovered检查鼠标是否悬浮在复选框区域。
ConstructCheckbox初始化复选框小组件。由小组件包装使用。
GetWidget返回小组件包含的UI基元列表。用于订阅复选框事件。
GetThemeData返回复选框小组件使用的主题参数组。
SetText设置复选框的文本。
GetText接收复选框的文本。

操作文本或富文本的方法

方法名称描述
GetText返回文本值。
SetText设置文本值。
GetWidget返回小组件包含的UI基元列表。用于订阅文本事件。
GetThemeData返回文本小组件使用的主题参数组。
ConstructText初始化文本小组件。由小组件包装使用。

操作图片的方法

方法名称描述
GetImage返回图片。
SetImage设置图片。
GetWidget返回小组件包含的UI基元列表。用于订阅图片事件。
GetThemeData返回图片小组件使用的主题参数组。
ConstructImage初始化图片小组件。由小组件包装使用。

操作输入字段的方法

方法名称描述
GetText将文本返回输入字段。
SetText设置输入字段的文本。
GetWidget返回小组件包含的UI基元列表。用于输入字段事件。
ConstructInput初始化输入字段小组件。由小组件包装使用。
GetHint返回输入字段的提示文本。
SetHint设置输入字段的提示文本。
SetupFocus设置输入字段的焦点。
GetThemeData返回输入字段小组件使用的主题参数组。
本文对您的有帮助吗？
谢谢！
我们还有其他可改进之处吗？ 留言
非常抱歉
请说明为何本文没有帮助到您。 留言
感谢您的反馈！
我们会查看您的留言并运用它改进用户体验。
为此页面评分
为此页面评分
我们还有其他可改进之处吗？

不想回答

感谢您的反馈！
上次更新时间: 2023年10月10日

发现了错别字或其他内容错误？ 请选择文本，然后按Ctrl+Enter。

报告问题
我们非常重视内容质量。您的反馈将帮助我们做得更好。
请留下邮箱以便我们后续跟进
感谢您的反馈！