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

【Java】Apple風のスタイリッシュな電卓を作ろう!1/2

Apple風のスタイリッシュな電卓

JavaFXで電卓を作ろう!!

以前こちらの記事で「JavaFX Scene Builder」を用いた簡易的な電卓の作り方を紹介しましたが、今回は「Apple風のスタイリッシュな電卓」を作っていきます!

ちなみに本家がこちらです。

こちらはMacでの電卓なので、スマホ版とは少し違いますね。

今回はこの電卓を目指して電卓を作っていきます!

ウィンドウを作成

タイトルバー無しウィンドウを作成

それではウィンドウを作成していきます。

Appleの電卓は「231×319」のサイズなのでそれに合わせていきます。

今回作るウィンドウは普通のタイトルバーがついたウィンドウではなく、タイトルバーが無い透明なウィンドウになります。

透明にする理由は後ほど説明します。

(Main.java)

実行しても透明なのでなにも表示されません。

なので、この透明なウィンドウに「Canvas」というクラスを用いてウィンドウを形作っていきます。

(Main.java)

実行するとこのようなウィンドウが表示されます。

上の部分だと見づらいかもしれませんが、下の部分を見ると角が丸くなっているのがわかると思います。

これが背景を透明にする理由です。

通常の不透明なウィンドウだと、ウィンドウの角を丸くする表現ができないのです。

そのため、ウィンドウの背景を透明にし、角が丸くなっている図形を「Canvas」に描画することで、あたかも角が丸くなったウィンドウを作成したかのように見せているのです。

ウィンドウを動かす

すでにお気づきかもしれませんが、現状だとこのウィンドウを手動で動かすことはできません。

なので、手動でウィンドウを動かせるようにします

C++言語でWindowsアプリケーションを作る時は、ちょっとした設定を変えたりするだけでなんとかなるのですが、Javaだとそういう風にはいかないので「マウスイベント」を使った手法で実現します。

(Main.java)

 

マウスを押した時点で、ウィンドウ内のマウスポイントの位置を取得します。

これがウィンドウの座標とのオフセット(数値の差)になります。

そしてドラッグをする時に、移動した位置(パソコン画面内での)からオフセットを引き、それをウィンドウの座標として設定します。

こうすることでウィンドウを動かすことができるようになります。

ボタンの配置

ボタンの配置や動きは「MyButton.java」というファイルを作成し、このファイル内に記述していきます。

19種類のボタン

ボタンは「0〜9」、「AC・+/-・%」、「+・ー・×・÷・=」、「.(小数点)」の19種類があります。

 

つまり、ボタンを表示する際に使用する「Button」クラスのインスタンスが19個必要になります。

なので、「Button」の配列変数を1つ宣言し、配列の個数を19個とします

また、それぞれの配列番号がどのボタンを指すのかがわかりやすい方が後々役に立つので19個の定数を用意します。

(MyButton.java)

ちなみに定数の順番ですが、これはボタンの座標設定の際にプログラムの記述を減らすため、以下のような規則で順番を決定しています。

上から順に、左から右へ流れます。

Buttonのインスタンス化と配置

「Button」クラスのインスタンス化は、「for」文で記述し、プログラムの記述量を減らします。

ただ、「Button」クラスのコンストラクタの引数には「String」型の値が入り、ここに設定した文字列は、ボタンの表示される文字列になるのですが、この文字列は各ボタンによって異なるので「String」の配列変数を用意し、各ボタンに表示させる文字列を設定します。

また、ボタンのサイズですが、「0」ボタンを除いてすべて「57×47」となります。

(MyButton.java)

 

次にボタンをどこに配置するか、つまりボタンの座標を指定します。

(MyButton.java)

座標設定はボタンサイズをもとに計算して行います。

そうすることで「for」文での記述が可能になります。

ただ、「0」ボタン以降の座標位置を計算する場合は、「for」文内に記述すると文章量が長くなるので、「for」文の外に記述します。

ボタンのインスタンス化、座標設定を行うことができたので、「MyButton」コンストラクタを「Main」側で呼び出してボタンを実際に表示させます。

(Main.java)

これを実行させると上記の画像のようになります。

またこの状態だと、デフォルトのデザインでスタイリッシュとは言えませんね。

ボタンの装飾

それでは次はボタンの装飾を行なっていきます。

文字色と背景色の設定

文字色は、「Button」クラスの「setTextFill」関数を呼び出すことで設定することができます。

 

背景色は、「Button」クラスの「setBackground」関数で「Background」を設定することによって設定することができます。

ただ、「Background」のインスタンス化は記述量が多く、変更する際に毎回記述すると読みづらくなってしまう可能性があるので、「Background」の配列変数を作って4つの「Background」を作成します。

この場合も、配列番号を指す定数を定義します。

ちなみに4つは以下の4種類を指します。

・定数名(説明)

GRAY_ NORMAL(通常の背景色「グレー」)

GRAY_PRESSED(ボタンが押下されている時の背景色「濃いグレー」)

ORANGE_ NORMAL(通常の背景色「オレンジ」)

ORANGE_PRESSED(ボタンが押下されている時の背景色「濃いオレンジ」)

(MyButton.java)

一気にらしくなってきました。

ただこれを見てわかる通り、文字の大きさがまだ小さいので、フォントも設定してあげる必要があります。

フォントを設定

次はフォントを設定していきます。

フォントは「setFont」関数で設定します。

「AC・+/-・%」はフォントサイズを「17」に、それ以外は「22」にします。

また、フォント名は「Serif」にします。

(MyButton.java)

ラベルを配置

次は数字を表示するためのラベルを配置します。

ラベルは「MyLabel.java」を作成し、「MyLabel」クラスで管理します。

(MyLabel.java)

次に、作成した「MyLabel」を「Main」側で呼び「Scene」に追加します。

(Main.java)

この状態だと、上の画像の赤い丸で示したところに小さく表示されているので、とても見えにくくなっています。

ラベルを装飾

このままでは数字がほぼ読めないので、ラベルの文字列に装飾を施します。

フォントを設定

まずはフォントを設定します。

フォントは「setFont」関数で設定できます。

フォント名は「Serif」で、フォントサイズは「40」とします。

(MyLabel.java)

文字色を設定

次は文字色を設定します。

文字色は「setTextFill」関数で設定し、白色に設定します。

(MyLabel.java)

これではっきり文字が読めるようになりました。

次回

【Java】Apple風のスタイリッシュな電卓を作ろう!2/2

コメント