Open Source Software Online
2019-12-19  Java プログラミング

JavaFXのボタンやメニューにアイコンを表示する

Web では Material Design Icons や FontAwesome などのアイコン ・ セットに人気が集まっています。これらのアイコンは画像ではなく Web フォントとして作成されており、 自由に大きさや色が変えられるという特徴があります。

アイコンにフォントではなく画像を使っていた時代は、 サイズや色ごとに何種類も用意しておかなければならず大変でした。便利になったものです。

Web だけでなく、 デスクトップアプリケーションでもサイズや色が自由に変えられるアイコン使いたいですよね？ JavaFX なら簡単に Material Design Icons や FontAwesome など様々なアイコンが使えちゃうんです！ もちろん、 CSS でサイズや色を自由自在に変えられますよ。

今日は、 JavaFX で様々なアイコン ・ パックが使えるようになるライブラリ Ikonli を紹介します。（Swing でも Ikonli を使用することができますが、 今回は JavaFX での使用方法のみ説明します。）

Ikonli ライブラリを使う手順

JavaFX で Ikonli バージョン 11.3.4 を使う場合、 以下の 2 つのライブラリが必須です。（バージョンによってファイル名のバージョン部分は異なります。）

  • ikonli-core-11.3.4.jar
  • ikonli-javafx-11.3.4.jar

上記に加えて、 使いたいアイコン ・ パックごとに固有のライブラリを追加します。たとえば、 Material Design Icons を使う場合は以下のライブラリを追加します。

  • ikonli-materialdesign-pack-11.3.4.jar

FontAwesome を使うなら以下のライブラリを追加します。

  • ikonli-fontawesome5-pack-11.3.4.jar

複数のアイコン ・ パックを同時に使うこともできます。好きなだけアイコン ・ パックのライブラリを追加してください。

Ikonli のライブラリ （JAR ファイル） は、 上記 URL から直接ダウンロードすることができますが、 JAR ファイルを個別にダウンロードする方法よりも、 Gradle で依存ライブラリを指定する方法をオススメします。

Gradle を使っている場合は、 build.gradle に以下のように依存関係を記述します。

build.gradle
repositories {
	jcenter()
}

dependencies {
	implementation 'org.kordamp.ikonli:ikonli-javafx:11.3.4'
	implementation 'org.kordamp.ikonli:ikonli-materialdesign-pack:11.3.4'
}

ikonli-core は明示的に指定しなくても大丈夫です。ikonli-javafx が ikonli-core に依存しているので、 ikonli-javafx を指定すれば ikonli-core も自動的に適用されます。

上記の例では ikonli-materialdesign-pack を指定していますが、 FontAwesome が使いたいなら ikonli-fontawesome5-pack を指定します。アイコン ・ パックごとのモジュール名は Ikonli のサイトで確認できます。

FXMLでアイコンを指定する

Ikonli のライブラリ （JAR） が参照できたら使い方は簡単です。

アイコン本体である FontIcon クラスは javafx.scene.Node を先祖に持っているので、 シーングラフの大体どこでも使うことができます。（他ノードの親にはなれませんが。）

基本的には、 Button クラスや MenuItem クラスの graphic プロパティに FontIcon を指定することが多いと思います。編集ボタンに鉛筆のアイコンを表示する場合は↓こんな感じです。

FXML
<?import javafx.scene.control.*?>
<?import org.kordamp.ikonli.javafx.FontIcon?>

・・・ 省略 ・・・

<Button fx:id="btnEdit" text="編集">
	<graphic><FontIcon iconLiteral="mdi-pencil"/></graphic>
</Button>

iconLiteral に使いたいアイコンの名前を指定するだけです。Ikonli のサイトから、 それぞれのアイコン ・ パックの Cheat-Sheet というリンクを開けば、 アイコンの見た目とその名前 （name） を調べることができます。

アイコンの名前にはプリフィックスが付いており、 他のアイコン ・ パックとアイコンの名前が重複しないようになっています。Material Design Icons なら mdi-、 FontAwesome5 なら fab- といった具合です。このプリフィックスのおかげで、 複数のアイコン ・ パックを同時に導入しても一意にアイコンを特定できるんですね。

とりえあえずサンプルプログラム

まずは、 何も考えずに FontIcon を FXML に追加したサンプルプログラム全体です。

SampleApp.java
package com.example;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class SampleApp extends Application {

	public static void main(String[] args) {
		launch(args);
	}

	@Override
	public void start(Stage primaryStage) throws Exception {
		primaryStage.setTitle("JavaFX でアイコンを使うサンプル");

		FXMLLoader loader = new FXMLLoader(getClass().getResource("SampleApp.fxml"));
		Parent root = loader.load();
		Scene scene = new Scene(root);
		primaryStage.setScene(scene);
		primaryStage.show();
	}
}

SampleApp.fxml
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.geometry.Insets?>
<?import org.kordamp.ikonli.javafx.FontIcon?>

<StackPane xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml"
		   stylesheets="@SampleApp.css"
		   prefWidth="360" prefHeight="180">
	<BorderPane>
		<top>
			<MenuBar>
				<menus>
					<Menu text="ファイル">
						<MenuItem fx:id="menuFileOpen"
								text="ファイルを開く...">
							<graphic><FontIcon iconLiteral="mdi-folder"/></graphic>
						</MenuItem>
						<MenuItem fx:id="menuFileSaveAs"
								text="名前を付けて保存...">
							<graphic><FontIcon iconLiteral="mdi-content-save"/></graphic>
						</MenuItem>
						<SeparatorMenuItem/>
						<MenuItem fx:id="menuFileExit"
								text="終了">
						</MenuItem>
					</Menu>
				</menus>
			</MenuBar>
		</top>
		<center>
			<ImageView>
				<Image url="/img/duke.png"></Image>
			</ImageView>
		</center>
		<bottom>
			<HBox alignment="CENTER_RIGHT" spacing="10">
				<padding><Insets top="0" right="10" bottom="10" left="0"/></padding>
				<Button fx:id="btnAdd"
						text="新規作成">
					<graphic><FontIcon iconLiteral="mdi-plus"/></graphic>
				</Button>
				<Button fx:id="btnEdit"
						text="編集">
					<graphic><FontIcon iconLiteral="mdi-pencil"/></graphic>
				</Button>
				<Button fx:id="btnDelete"
						text="削除">
					<graphic><FontIcon iconLiteral="mdi-delete"/></graphic>
				</Button>
			</HBox>
		</bottom>
	</BorderPane>

</StackPane>

SampleApp.css
.root {
	-fx-font-family: "Meiryo";
	-fx-font-size: 12px;
}

.button {
	-fx-min-width: 90px;
	-fx-alignment: center-left;
}

このサンプルプログラムを実行した結果がこちらです。

なんだかアイコンがテキストよりも一回り小さいですね…。

アイコンをCSSでカスタマイズしよう

というわけで、 CSS でアイコンの大きさを調整してみましょう。

JavaとCSSの「クラス」は違うもの？
Java の文脈で出てくる 「クラス」 と CSS の文脈で出てくる 「クラス」 は異なるものです。JavaFX では混同を避けるために CSS の文脈で出てくる 「クラス」 のことを 「CSS スタイルクラス」 または 「スタイルクラス」 と呼んでいます。

JavaFX の CSS では Java のクラス名を CSS の要素名として使うことができます。FontIcon クラスに CSS プロパティを適用するには、 CSS の要素名として FontIcon を指定します。

FontIcon には 3 つのプロパティがあります。

プロパティ名説明
-fx-icon-codeアイコンを識別するリテラル （名前） です。
-fx-icon-sizeアイコンのサイズ。単位はピクセルです。
-fx-icon-colorアイコンの色。カラー名称や 16 進トリプレット表記で指定します。

アイコンのサイズと色を変える場合はこんな感じになります。（アイコンの黒が強調され過ぎているような気がしたのでほんの少し明るい色にしてみました。）

SampleApp.css に追加する内容
FontIcon {
	-fx-icon-size: 17;
	-fx-icon-color: #202020;
}

さて、 これでもう一度、 サンプルプログラムを実行してみましょう。

どうですか？ さっきよりも文字とアイコンの大きさのバランスがとれてますよね。分かりにくいですが黒色も少し明るくなりキツさが低減されてます。

アイコンの大きさをいろいろと試した結果、 テキストの大きさ 12 ピクセルに対して FontIcon の大きさ 17 ピクセルがバランスが良さそうでした。

メニューも展開してみましょう。うん、 まあ、 悪くはないですね。

次に、 メニューにフォーカスを当ててみると…

うーん、 これは残念。フォーカスの当たっているメニューの文字色は反転して白になっているのにアイコンは黒のままです。

フォーカス状態に合わせてアイコンの色を変えよう

ご安心ください。Ikonli はきちんと JavaFX プロパティに対応しているので、 CSS 擬似スタイルクラスと連動してアイコンの色を変えることだって簡単にできちゃうんです。

SampleApp.css に追加する内容
.menu-item:focused FontIcon {
	-fx-icon-color: -fx-selection-bar-text;
}

メニューアイテムを表わすスタイルクラス .menu-item にフォーカス状態を示す :focus 擬似スタイルクラスが付いているときの下位にある FontIcon の色を指定しています。指定している -fx-selection-bar-text はビルトイン変数で既定では選択状態のテキストに使われる色を表わしています。

この状態でサンプルプログラムを実行するとこうなります。

いいですね！ フォーカスの当たっているメニューのアイコンが白くなっています。

ついでに、 フォーカスが当たっていないメニューアイコンの色も変えてみましょうか？ :focus 擬似スタイルクラスが付いていないときの色を指定するだけです。

SampleApp.css に追加する内容
.menu-item FontIcon {
	-fx-icon-color: -fx-selection-bar;
}

色指定にはビルトイン変数 -fx-selection-bar を使ってみました。これは、 JavaFX のアクセントカラー （既定では鮮やかな青） と同じになります。

この時点で CSS 全体はこうなっています。

SampleApp.css
.root {
	-fx-font-family: "Meiryo";
	-fx-font-size: 12px;
}

.button {
	-fx-min-width: 90px;
	-fx-alignment: center-left;
}

FontIcon {
	-fx-icon-size: 17;
	-fx-icon-color: #202020;
}
.menu-item FontIcon {
	-fx-icon-color: -fx-selection-bar;
}
.menu-item:focused FontIcon {
	-fx-icon-color: -fx-selection-bar-text;
}

サンプルプログラムを実行してみます。

雰囲気が明るくなりました。

作成したサンプルプログラムは以下のリンクからダウンロードできます。（Gradle プロジェクト形式になっています。）

JavaFX でアイコン ・ フォントを使えるようにする Ikonli ライブラリの紹介は以上です。

最終更新日 2024-12-13
この記事を共有しませんか？
ブックマーク ポスト

JavaFX コンテキストメニューの不自然な振る舞いを直す

2019-12-23

JavaFXアプリケーションのプロセスが終了せずに残ってしまう

2019-10-19
プログラミング （79） Java （53） Windows （46） C/C++ （15） Web （17） Linux （8） データベース （2） Android （6） ソフトウェア （1） ハードウェア （2） SharePoint （6）

JavaFX コンテキストメニューの不自然な振る舞いを直す

2019-12-23

JavaFXのスクロールバーの外観をCSSでカスタマイズする

2020-01-08

JavaFXアプリケーションのプロセスが終了せずに残ってしまう

2019-10-19

EclipseからIntelliJ IDEAに乗り換えた話

2019-10-01

JavaFXの例外処理ベストプラクティス

2019-09-19

Javaはカレントディレクトリを使わない

2019-09-11

IntelliJ IDEAでGradleプロジェクトの実行がエラーになる！？

2019-09-02

書式化したまま編集できるテキストフィールドを作る

2019-08-09

jlinkで他プラットフォームのJREを作成する

2019-07-31

JavaFXアプリケーション開発にはLiberica JDKがオススメ

2019-07-26

JettyでFreeMarkerを使うとテンプレートが見つけられなくなる

2019-07-24

Gradleプロジェクトの雛形をカスタマイズする

2019-07-22