ドキュメント



JavaFX: JavaFX UIコンポーネントの操作

2 ラベル

この章では、JavaFX APIのjavafx.scene.controlパッケージにあるLabelクラスを使用してテキスト要素を表示する方法について説明します。特定の領域に収まるようテキスト要素を折り返し、グラフィカル・イメージを追加し、視覚的な効果を適用する方法について学習します。

図2-1に、3つの一般的なラベルの使用方法を示します。左側のラベルはイメージ付きのテキスト要素であり、中央のラベルは回転テキスト、右側のラベルは折返しテキストを表しています。

図2-1 ラベルのサンプル・アプリケーション

3つのラベルのJavaFXアプリケーション
「図2-1 ラベルのサンプル・アプリケーション」の説明

ラベルの作成

例2-1に示すように、JavaFX APIでは、アプリケーション内でラベルを作成する、Labelクラスの3つのコンストラクタを提供しています。

例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 アイコンのあるラベル

図2-2の説明が続きます
「図2-2 アイコンのあるラベル」の説明

ボタンのテキストとグラフィカル・コンテンツを定義する場合は、setGraphicTextGapメソッドを使用してその間にギャップを設定できます。

また、setTextAlignmentメソッドを使用すると、レイアウト領域内でラベル・コンテンツの位置を変更できます。setContentDisplayメソッドを適用し、ContentDisplay定数(LFFTRIGHTCENTERTOPBOTTOMのいずれか)を指定すると、テキストへのグラフィックの相対的な位置を定義することもできます。

フォントの設定

図2-1および図2-2の「Search」ラベルを比較します。図2-1のラベルのフォント・サイズのほうが大きくなっています。これは、例2-2に示すコード・フラグメントで、ラベルのフォント設定を指定していないためです。デフォルトのフォント・サイズで表示されています。

デフォルト以外のテキストのフォント・サイズをラベルに適用するには、LabeledクラスのsetFontメソッドを使用します。例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));

テキストの折返し

ラベルを作成する際、表示に必要な分より小さい領域に収める必要が発生する場合があります。レイアウト領域に収まるようテキストを折り返すには、例2-4に示すように、setWrapTextメソッドの値をtrueに設定します。

例2-4 テキスト折返しの有効化

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

label3をアプリケーションのコンテンツに追加すると、図2-3に示すように表示されます。

図2-3 テキスト折返しのあるラベル

テキスト折返しのあるラベル
「図2-3 テキスト折返しのあるラベル」の説明

ラベルのレイアウト領域に制限があり、幅も高さも十分でないとします。必要なテキスト文字列全体を表示できない場合は、ラベルの動作を指定できます。LabeledクラスのsetTextOverrunメソッド、およびいずれかの使用可能な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イベントが発生すると、setScaleXメソッドおよびsetScaleYメソッドに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つの状態を示しています。

図2-4 ラベルのズーム

テキスト折返しのあるラベルの2つの状態
「図2-4 ラベルのズーム」の説明

関連APIドキュメント

ウィンドウを閉じる

目次

JavaFX: JavaFX UIコンポーネントの操作

展開 | 縮小