JavaFX UI控件教程(三)之Label

翻译自  Label

本章介绍如何使用Label驻留在javafx.scene.controlJavaFX API包中的类来显示文本元素。了解如何包装文本元素以适合特定空间,添加图形图像或应用视觉效果。

图2-1显示了三种常见的标签用法。左侧的标签是带有图像的文本元素,中间的标签表示旋转的文本,右侧的标签呈现包装的文本。

图2-1带标签的示例应用程序

JavaFX UI控件教程(三)之Label_第1张图片

 

创建标签

JavaFX API提供了三个Label类的构造函数,用于在应用程序中创建标签,如例2-1所示。

示例2-1创建标签

//An empty label
Label label1 = new Label();
//A label with the text element
Label label2 = new Label("Search");
//A label with the text element and graphical icon
Image image = new Image(getClass().getResourceAsStream("labels.jpg"));
Label label3 = new Label("Search", new ImageView(image));

在代码中创建标签后,可以使用以下Labeled类的方法向其中添加文本和图形内容。

  • 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控件教程(三)之Label_第2张图片

为按钮定义文本和图形内容时,可以使用该setGraphicTextGap方法设置它们之间的间隙。

此外,您可以使用该setTextAlignment方法更改其布局区域内标签内容的位置。还可以通过施加限定的图形相对于所述文本的位置setContentDisplay的方法和指定以下之一ContentDisplay:常数LFFTRIGHTCENTERTOPBOTTOM

设置字体

比较图2-1和图2-2中的搜索标签。请注意,图2-1中的标签具有更大的字体大小。这是因为示例2-2中显示的代码片段未指定标签的任何字体设置。它使用默认字体大小呈现。

要提供标签默认值以外的字体文本大小,请使用类的setFont方法Labeled。示例2-3中的代码片段将label1文本的大小设置为30磅,将字体名称设置为Arial。对于label2,将文本大小设置为32磅,将字体名称设置为Cambria。

示例2-3应用字体设置

//Use a constructor of the Font class
label1.setFont(new Font("Arial", 30));
//Use the font method of the Font class
label2.setFont(Font.font("Cambria", 32));

文字换行

创建标签时,有时您必须将其放入小于您需要渲染的空间内。要拆分(换行)文本以使其适合布局区域,请设置方法的truesetWrapText,如示例2-4所示。

示例2-4启用文本环绕

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

将label3添加到应用程序的内容时,将呈现如图2-3所示的内容。

图2-3带有文本换行的标签

假设标签的布局区域不仅受其宽度的限制,还受其高度的限制。当无法呈现整个必需的文本字符串时,您可以指定标签的行为。使用类的setTextOverrun方法Labeled和其中一种可用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(new EventHandler() {
    @Override public void handle(MouseEvent e) {
        label3.setScaleX(1.5);
        label3.setScaleY(1.5);
    }
});

label3.setOnMouseExited(new EventHandler() {
    @Override public void handle(MouseEvent e) {
        label3.setScaleX(1);
        label3.setScaleY(1);
    }
});

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

图2-4缩放标签

JavaFX UI控件教程(三)之Label_第3张图片

 

相关的API文档  

  • Label

  • Labeled

你可能感兴趣的:(javafx)