スポンサーリンク
スポンサーリンク

【JavaFX】CSSでオシャレなボタンを作成する

JavaFXではNodeと呼ばれる部品をCSSを用いて自由に装飾することができるので、今回はCSSの書き方の説明も交えながら、実際に作って紹介していきます。

ボタンを作成

まず、下の画像をみてください。

これは実際にCSSで装飾を施したものです。今回はこのボタンを目指して実際に作りながら紹介していきます。

まずは「style.css」と「Main.java」を作成してください。

そして次のプログラムを作成します。

(style.css)

(Main.java)

重要なのはマーカー部分の行です。

「getStylesheets」関数を呼び出すことで、適用されているスタイルシートのリストを取得することができます。

今回は「style.css」という名前のCSSファイルを指定していますが、もちろん複数のファイルを追加することだってできます。

次に「getStyleClass」関数で「Button」に適用されているCSSクラスのリストを取得し、「add」関数でクラスを追加します。

こうすることで、「CSS」ファイル内にある「button」クラスの中身が、実際のJavaFXのボタンに反映されるようになります。

 

ただ、現状ではまだ何も書いていないので、実行するとこのようなボタンが表示されます。

これでは非常に質素なので、早速CSSファイルを作成し装飾を施していきます。

CSSで装飾

先ほどのボタンではあまりにも味気ないので、「button」クラスの中身を作っていきます。

ボタンのサイズを設定

(style.css)

幅・高さを設定する場合は「-fx-pref-width・-fx-pref-height」を使用します。

今回は幅・高さをそれぞれ「60px」に設定しました。

ボタンの形を変更

(style.css)

「-fx-background-radius」を使用し、ボタンの角の丸みを設定します。

今回は円形のボタンを作りたいので、角は「60px」の半分、半径「30px」に設定します。

背景色を設定

(style.css)

「-fx-background-color」で背景色を設定することができます。

ただ以下のように記述してしまうと、

このように非常に味気ない感じになってしまうので、「linear-gradient」関数を用いてグラデーションを用いてみました。

「linear-gradient」関数の引数は2つあり、ボタンの一番上の色と一番下の色を設定します。

そうすると、設定した2つの色の間をグラデーションで描画してくれます。

こうすることにより、ボタンに立体感が出ます。

ボタンに影をつける

リアルのボタンは奥行きがあるため、ボタンに影をつけることで再現します。

(style.css)

「-fx-effect」でエフェクトを追加することができます。

今回は影のエフェクトが必要なので、プロパティの値には「dropshadow」関数で指定します。

他にも「innershadow」関数がありますが、これはボタンの内側・外側のどちらに影をつけるかで使い分けます。

今回はボタンの奥行きを出したいので外側に影をつけることができる「dropshadow」関数を用います。

「dropshadow」関数の引数の意味は以下のようになります。

第1引数 ぼかし方の設定

gaussian、one-pass-box、two-pass-box、three-pass-boxの4つの種類があります。

第2引数 影の色

「rgb」関数を用い、「赤・緑・青・アルファ」の値を設定します。アルファ値というのは透明度を決定するものです。

アルファ値が低いと透明になります。

第3引数 影のぼかしカーネルの半径

第4引数 影の拡散

値は「0〜1」の間にしてください。

第5引数 X方向のオフセット

第6引数 Y方向のオフセット

 

このように奥行きが生じ、ボタンらしくなってきました。

ボタンを押す時のエフェクトを作成

ボタンを押した時に「影の変化」・「背景色の変化」を加えることで、ボタンを押す時のリアルさを再現することができます。

(style.css)

一般的なCSSの記述だと、「pressed」ではなく「active」と記述するのですが、JavaFXで使用するCSSは「pressed」なので注意です。

 

まずは背景色の変化ですが、これは通常の背景色より若干明るくしました。

次に影の変化ですが、ボタンを押す際は奥行きが減るので、その分影を小さくします。

 

画像だと伝わりにくいので、実際にボタンを押してその変化を試してみてください。

ちなみに押すとこうなります。

ボタンに画像を貼り付ける

最後に、ボタンに画像を貼り付けて完成させましょう。

今回使用する画像はこちらです。

「icon01.png」という名前で使用します。

また、この画像は私が作ったもので、完全にフリーです。

ご自由にお使いください。

(style.css)

「-fx-background-image」に「url」関数を使って画像を指定します。

ファイル名を間違えると画像が表示されないので、ファイル名をしっかり確認するようにしましょう。

 

「-fx-background-position」で画像の表示位置を設定します。

ボタンに画像を貼り付けるので、できれば中央の方が見栄えがいいですよね。

なので「center」を指定します。

 

最後に「-fx-background-repeat」で画像の表示状態を設定します。

ここになにも設定しないと何度も画像が表示されてしまい、おかしな表示になってしまうので、「stretch」を指定して画像の表示回数を1回に設定します。

 

これでようやく完成しました!

 

もちろんボタンだけではなく、他の様々なNodeに対してもCSSによる装飾が施せますので、是非色々試してみてはいかがでしょうか。

コメント