【電卓アプリを作るvol.5】UIをレイアウトする

前回まで・・・
汎用性の高いCalcクラスを作りました
今回は、最低限のUIと電卓として機能するまでを行います。

UIをレイアウトします。
お好みのようにデザインしてください。
基本的には、電卓の液晶画面にあたる部分をTextViewで、
キーはButtonで配置しましたが、
キャンバスで描画する芸術的な電卓もありだと思います。

今後、押したら画像が変わる9パッチのボタン画像や、
レイアウトのサイズに合わせて文字列を自動で拡大・縮小する
ビューもご紹介しようと思いますが、
今回は最低限の作業を行っていきます。

基本的なレイアウトを作りました。

Calcのインスタンス化と液晶表示

Calcクラス型のフィールドを定義します。
calcとしました。
メインアクティビティのオンクリエイト等で、
Calcをインスタンス化します。
Calcで定義したコールバックを受け取れるようにします。

calc = new Calc();
        calc.setListener(new Calc.Callback() {
            @Override
            public void onTextChanged(String string) {
                textView.setText(string);
            }
        });

onTextChangedの引数に入っている文字列が、
電卓の液晶画面に表示すべき文字列です。
まだ、doubleがそのまま文字列になっただけなので、
割り切れない数は、かなり桁数が多くなりますが、
今後、フォーマットして表示できるように改良します。

ボタン操作

ボタン全てにリスナーを付けます。
ボタンが押されたら、それに対応した定数を
calc.input()の引数に渡します。
[＝]キーだったら、calc.input(Calc.KEY_EQUAL);という具合です。
数字キーは、ボタンテキストをそのままint型にして
calc.input(5);のようにします。
もし、和風な電卓で、表示が「壱、弐、参」などにしていたら、
それぞれにも定数を用意する必要があります。
Integer.parseInt("壱");ってできるのかな？（笑）

全てのボタンに適用したら、
何かボタンが押されるたびに、コールバックで文字列が送られてくるので、
それを表示すれば、電卓としては目的達成です！

電卓って、意外とボタンが多いことに気づきます（笑）
以下のように、IDで判断して処理を分けてもいいですが、
文字列で判定すると、ローカライズの際に面倒になる可能性があります。

public void onKeyClick(View v) {
    switch (v.getId()) {
            case R.id.b_00:
                calc.input(Calc.KEY_00);
                break;
            case R.id.b_dot:
                calc.input(Calc.KEY_DOT);
                break;
            case R.id.b_equal:
                calc.input(Calc.KEY_EQUAL);
                break;
            case R.id.b_tasu:
                calc.input(Calc.KEY_TASU);
                break;

　　　　　　・・・

次回は、”計算結果を丸め”て、会社の端数処理基準等に合わせた表示を可能にする、
小数点セレクター・ラウンドセレクターを実装していきます。