JavaFX - UI控件 - 标签




2标签(Label)


本章主要介绍如何使用标签(Label),该类位于JavaFX API的javafx.scene.control包中,用于显示一个文本元素。 接下来会介绍如何让文本元素自动换行来适应受限空间,添加一个图标,或使用视觉特效。

图2 - 1显示了标签的三种常见用法。 左边的标签是一个带图标的文本,中间的展示了旋转效果,右边的使用了自动换行设置。

图2 - 1 标签示例

JavaFX - UI控件 - 标签
这幅图显示了三个标签,他们被放在了同一行。 左边的标签有一个看起来像个放大镜的图标和一个“Search”文本。 中间的标签有一个“Values”文本,且顺时针方向旋转了270度。 右边的标签包含以下文本:“A label that needs to be wrapped.”,因为设置了自动换行,所以文本会自适应占据两行。

创建一个标签

JavaFX API为Label提供了三个构造函数,见代码片段例2 - 1

例2 - 1创建标签

//一个空标签
Label label1 = new Label();
//指定文本的标签
Label label2 = new Label("Search");
//指定文本和图标的标签
Image image = new Image(getClass().getResourceAsStream("labels.jpg"));
Label label3 = new Label("Search", new ImageView(image));

在创建一个标签之后,你可以使用以下方法来设置或者修改文本以及图形内容

  • setText(String text)——指定文本内容

  • setGraphic(Node graphic)——指定图形图标

setTextFill()方法可以设定文本的填充颜色。 看代码片段例2 - 2 ,它创建一个文本标签,为其添加了一个图标,并指定文本填充颜色。

例2 - 2 添加一个图标和文本填充一个标签

Label label1 = new Label("Search");
Image image = new Image(getClass().getResourceAsStream("labels.jpg"));
label1.setGraphic(new ImageView(image));
label1.setTextFill(Color.web("#0076a3"));

运行这段代码,结果如图2 - 2 所示。

图2 - 2 带图标的标签

JavaFX - UI控件 - 标签

当为标签同时设置了文本和图形内容时,可以使用setGraphicTextGap()方法来设置它们之间的间距。

另外,你可以使用setTextAlignment()方法改变其对齐方向[译者注:该方法只对(自动换行或者\n换行的)多行文本起作用,单行文本不起作用]。 你还可以通过setContentDisplay(ContentDisplay value)方法定义图形相对于文本的位置,ContentDisplay的可选值为:居左LEFT,居右RIGHT,居中CENTER,居上TOP,居下BOTTOM。


设置字体

比较图2 - 1图2 - 2中的“Search”标签,图2 - 1的字体大一些。 这是因为代码片段例2 - 2没有设置任何字体,它采用的是用默认字体。

你可以使用setFont()方法来指定一个其他的字体,以区别于非默认字体。 代码片段例2 - 3中label1文本的字体设置为Arial 30,label2设置为Cambria 32。

例2 - 3 字体设置
//使用Font类的构造函数来构造Font对象
label1.setFont(new Font("Arial", 30));
//使用Font类的静态方法来构造Font对象
label2.setFont(Font.font("Cambria", 32));


文字自动换行

当你需要在一个比较小的空间内放置一个标签时,自动换行就可以在适应容器的大小的同时显示更多的内容。调用setWrapText(true)方法即可自动换行,如代码片段例2 - 4

例2 - 4 启用文本自动换行

Label label3 = new Label("A label that needs to be wrapped");
label3.setWrapText(true);

运行这段代码,结果如图2 - 3所示。

图2 - 3 自动换行的文本标签

JavaFX - UI控件 - 标签

如果容器提供给标签的显示区域不仅有宽度限制,还有高度限制,那么你可以指定当无法显示所有的文本内容时标签的显示行为。 使用setTextOverrun(OverrunStyle value)方法,其中OverrunStyle用于指示如何处理不能完全呈现出来的文本。默认显示不全的文本会以...进行提示。 有关更多信息,请参见OverrunStyle的API文档


视觉特效

尽管一个标签是不能编辑的静态内容,但你依然可以对它使用视觉特效或者变换效果。 代码片段例2 - 5中的label2旋转270度,并移动其垂直位置。

例2 - 5 旋转一个标签

Label label2 = new Label ("Values");
label2.setFont(new Font("Cambria", 32));
label2.setRotate(270);
label2.setTranslateY(50);

旋转和位移是JavaFX API典型的变换效果。 此外,你还可以设置一个缩放效果,当用户将鼠标光标悬停于标签上时将其放大显示。

代码片段例2 - 6中对label3设置了一个放大效果。标签上会触发鼠标进入事件(MOUSE_ENTERED),此时通过setScaleXsetScaleY方法设置放大比例为1.5。 当用户将鼠标光标移出标签,会触发鼠标离开事件(MOUSE_EXITED),此时将缩放比例因子还原为1.0,也就是其原始大小。

例2 - 6 缩放效果

label3.setOnMouseEntered((MouseEvent e) -> {
    label3.setScaleX(1.5);
    label3.setScaleY(1.5);
});

label3.setOnMouseExited((MouseEvent e) -> {
    label3.setScaleX(1);
    label3.setScaleY(1);
});

图2 - 4显示了label3的两种状态。

图2 - 4 放大标签

JavaFX - UI控件 - 标签

相关的API文档



JavaFX - UI控件 - 标签,布布扣,bubuko.com

JavaFX - UI控件 - 标签

上一篇:PHP中的多行字符串传递给JavaScript方法两则


下一篇:【足迹C++primer】32、定制操作_2