Java

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

前回

【Java】Apple風のスタイリッシュな電卓を作ろう!1/2Apple風のスタイリッシュな電卓 https://itech-program.com/java/813 以前こちらの記事で「J...

ボタンで数字入力

このままではボタンを押しても何も起きないので、ボタンに機能を追加していきます。

数字の入力

数字を入力するのですから、ラベルに表示する文字列を変更しないといけません。

今回は、「num」という「String型」の変数を用意し、この値によってラベルの文字列が変更されるようにします。

また、ボタンが押された時の処理は「setOnMousePressed」関数の中に「EventHandler」を設定することで行いますが、よくわからない場合は以下のプログラムの書き方を見て「こういうものなんだ」という風に思ってください。(気にしたら負け的なあれです)

(MyButton.java)

これによって数字が入力されるようになりました。

「…」を無くす

現状、数字を入力し過ぎると表示できる範囲を超えてしまい「…」が表示されます。

この「…」を無くすには、「Label」クラスの「setEllipsisString」関数を使い、「…」の部分を「」(文字無し)に変更します。

(MyLabel.java)

ボタンのエフェクトを追加

このままだと素っ気ないので、ボタンにエフェクトを追加します。

ボタンが押された時に背景色を濃くして、ボタンが押された時の奥行きを表現します。

逆に、ボタンが離されると背景色は元に戻ります

ボタンが離れる処理は「setOnMouseReleased」関数を用います。

これは前回宣言した「GRAY_PRESSED」や「ORANGE_PRESSED」などの定数を使って行います。

(MyButton.java)

このように背景が濃くなります。

電卓で計算する

計算の考え方

この後、「演算子」ボタン「AC・+/-・%」に「.」ボタンに処理を追加するわけですが、その前に電卓における計算の考え方を整理しなくてはいけません。

電卓における計算は、「2項での計算」が重要です。

どんな時でも必ず「2項での計算」になります。

これを図に表してみます。

このように、一度計算して出た結果を次の計算式の第1項目として設定します。

さらにここで重要なのが、電卓での計算には「第1項目を入力する前」「第2項目を入力する前」「第2項目を入力した後」の3つの状態があることです。

この3つの場合分けが今後のボタン処理に大きく影響していきます。

演算子ボタンに処理を追加

先ほどの計算の考え方をもとに、演算子ボタンの処理を作成していきます。

3つの状態に関しては「state」という変数を作成し、それぞれ「0〜2」の3つの数字を割り振ります

そして2つの項を「double」配列型の「item」変数で管理します。

また、どの演算子で計算するかの情報も必要なため「operator」という変数を用います。

(MyButton.java)

演算子ボタンにエフェクトを追加

演算子ボタンにエフェクトを追加します。

Macの電卓では、「=」以外の演算子ボタンに、選択された際に枠が表示されます

(MyButton.java)

残りのボタンの処理

ACボタンの処理

「AC」ボタンは「All Clear」の略です。

「AC」ボタンは、数字が入力されたり演算子ボタンが入力されたりすると、「C(Clearボタン)」の状態になります。

「AC」と「C」の状態だと、処理内容も変わってくるので、以下のプログラムで確認してみてください。

もっとも、実際に実行してみて確認するのが一番わかりやすいですけど。

(MyButton.java)

+/ーボタンの処理

「+/-」ボタンは、表示されている数字の値の符号を逆にします

(MyButton.java)

「.(ドット)」ボタンの処理

「.(ドット)」ボタンでは、表示されている数字に「.(ドット)」を追加し、小数点以下の数字を表現します

(MyButton.java)

%ボタンの処理

「%」ボタンでは、ラベルに表示されている数字を「\(\displaystyle\frac{1}{100}\)」にします。

(MyButton.java)

最後に

これで電卓が完成しました!

今回作った電卓はこちらをクリックするとソースファイル3つとクラスファイル3つをダウンロードすることができます。

ABOUT ME
IT系だんし
プログラミングが大好きな人。 趣味でゲームやツール製作をしながら、プログラミング記事を書き続けています。