SAPUI5基础知识22 - 图标(Icons)

1. 背景

SAPUI5 提供了一套丰富的图标库，可以用于增强应用程序的视觉吸引力和用户体验。这些图标是矢量图形，可以在任何分辨率下保持清晰，并且可以自定义颜色和大小。

2. 示例

在 SAPUI5 中，图标可以通过 sap.ui.core.Icon 控件使用，也可以直接在其他控件中使用，如按钮或列表项。

通过Icon控件直接使用:

new sap.ui.core.Icon({
    src: "sap-icon://add",
    size: "2rem",
    color: "#0f0"
});

在这个例子中，我们创建了一个新的 Icon 控件，其源设置为 "sap-icon://add"，这是添加图标的 URI。我们还设置了图标的大小和颜色。

在其他控件中使用:

new sap.m.Button({
    icon: "sap-icon://add",
    text: "Add"
});

在这个例子中，我们在一个按钮控件中使用了添加图标。按钮的文本设置为 "Add"。

SAPUI5 的图标通过特殊的 URI 引用，格式为 “sap-icon://”。例如，添加图标的 URI 是 “sap-icon://add”。

此外，可以通过 color 和 size 属性自定义图标的颜色和大小。颜色可以是任何有效的 CSS 颜色值，大小可以是任何有效的 CSS 尺寸值。

例如，你可以将图标的颜色设置为绿色，并将其大小设置为 2rem：

new sap.ui.core.Icon({
    src: "sap-icon://add",
    size: "2rem",
    color: "#0f0"
});

请注意，不是所有的图标都支持自定义颜色。只有那些设计为可以改变颜色的图标才能改变颜色。

可以在 SAP 图标 Explorer 中查看所有可用的图标。

例如，搜索Add关键字，便可以看到所有相关的图标：

3. 练习

让我们在前序练习的基础上，为我们的<Button>控件和<Dialog>对话框控件添加图标，进一步改善我们程序的UI。

3.1 为Button控件添加图标

打开HelloPanel.view.xml文件，通过icon属性，为<Button>控件添加图标。

sap-icon:// 协议指示应加载图标，标识符world是图标的名称。

改动后HelloPanel.view.xml文件内容如下：

<mvc:View
    controllerName="zsapui5.test.controller.HelloPanel"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
>
    <Panel
        headerText="{i18n>helloPanelTitle}"
        class="sapUiResponsiveMargin"
        width="auto"
    >
        <content>
            <Button
                id="helloDialogButton"
                icon="sap-icon://world"
                text="{i18n>openDialogButtonText}"
                press=".onOpenDialog"
                class="sapUiSmallMarginEnd"
            />
            <Button
                text="{i18n>showHelloButtonText}"
                press=".onShowHello"
                class="myCustomButton"
            />
            <Input
                value="{/recipient/name}"
                valueLiveUpdate="true"
                width="60%"
            />
            <FormattedText
                htmlText="Hello {/recipient/name}"
                class="sapUiSmallMargin sapThemeHighligh-asColor myCustomText"
            />
        </content>
    </Panel>
</mvc:View>

3.2 为Dialog控件添加图标

接下来，让我们为<Dialog>控件添加图标。

打开HelloDialog.fragment.xml文件，在<Dialog>控件的<content>聚合中添加图标，并定义图标的大小，以及设置中等边距。

改动后的HelloDialog.fragment.xml文件内容如下：

<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
>
    <Dialog
        id="helloDialog"
        title="Hello {/recipient/name}"
    >
        <content>
            <core:Icon
                src="sap-icon://hello-world"
                size="8rem"
                class="sapUiMediumMargin"
            />
        </content>
        <beginButton>
            <Button
                text="{i18n>dialogCloseButtonText}"
                press=".onCloseDialog"
            />
        </beginButton>
    </Dialog>
</core:FragmentDefinition>

注：在SAPUI5应用程序的开发过程中，应尽可能使用图标（避免使用图片images），因为图标是矢量图形，可以无损失地扩展，并且无需单独进行加载。

3.3 运行程序

运行改动后的程序，效果如下：

可以看到<Button>控件和<Dialog>对话框控件添加图标，已经成功地显示出来了。

4. 小结

本文介绍了SAPUI5中图标的概念，并通过一个具体的实例展示了其用法。