読者です 読者をやめる 読者になる 読者になる

初心者ai8249の技術ブログ

医療IT科の専門学生です。学んだことをゆるゆる書いていくブログ。

アプリ開発 第六回目

ブログ アプリ

こんばんは。

ai8249です。前回は電卓としての基本的な機能をつけることができたましたね。

今回も機能面を充実させていきたいと思います。

参考にさせていただいたサイトはこちら。

kuguido-fujinka.com

ではいってみましょ〜!

 

小数点を使用して少数計算ができるようにするみたいです。

xmlの「.」ボタンにandroid:onClick="dotButtonOnClick"を追加!!

f:id:ai8249:20161215172058j:plain

 

次はjavaのプログラムにdotButtonOnClicl()メソッドを定義。

少数計算の場合のために10の-n乗を掛けて足すコードを追加、修正。

f:id:ai8249:20161215172207j:plain

 

エミュレーターで1.23と少数表示が出るか確認します。

f:id:ai8249:20161215172546j:plain

ちゃんと表示されました〜。

 

次に0.1+2.3=を押してみると2.3の表示のままです。

f:id:ai8249:20161215172718j:plain

これは演算子と小数点を分けて、小数点ボタンを押されると少数計算中であることを設定するで解決できるみたいです。

 

修正した後エミュレーターで0.1+2.3=を計算すると

f:id:ai8249:20161215173113j:plain

2.4と表示してくれました!!

 

この表示のまま-2.3=と計算すると、、、0.1になりました!!

f:id:ai8249:20161215173235j:plain

 

今度は×2.3=とすると0.23になりました。

f:id:ai8249:20161215173353j:plain

 

更に÷0.1=としてみると…

f:id:ai8249:20161215173500j:plain

計算はちゃんとされていますが、余計な0がいっぱいありますね。

とにかく計算はされているようなので大丈夫みたいです。

 

 

次は数値を3桁ごとにカンマ区切りで表示させます。

整数の場合区切りがあると見やすいですが、小数点の場合見にくいので少数ならば区切りはしないように設定します。

NumberFormatクラスを使用して桁区切りを実装。

エミュレーターで確認すると、、、

f:id:ai8249:20161215173948j:plain

すごい!!ちゃんと区切られていますね!!

 

小数点の場合はどうかというと、、、

f:id:ai8249:20161215174049j:plain

区切りはちゃんと無いです。

 

 

また現状だと複数行になるとボタンのレイアウトが変わってしまうらしいです。

確認してみると、、、

f:id:ai8249:20161215174248j:plain

あらら、完全につぶれてしまいました。

ここでの解決の時、参考サイトでは文字サイズを"30dp"にすると書かれていましたが、エミュレーターで確認してみると小さく見にくかったので、私は"60dp"から"50dp"に変更しました。

 

エミュレータで確認すると1行に収まる桁数が11桁だとわかります。

f:id:ai8249:20161215174734j:plain

 

ボタンのレイアウトを崩さないように表示桁数を11桁に制限します。

すると

f:id:ai8249:20161215174923j:plain

ちゃんと12桁目は表示されなくなりました!!

 

次は少数表示の場合を考えます。

1行で表示出来る少数の最大桁数は12桁です。これを整数部分と少数部分に分けて考え、整数部分の最大表示桁数は12桁、少数部分の最大表示桁数は11桁に設定。

確認してみると…

f:id:ai8249:20161215175454j:plain

少数部分の桁数が12桁以上にならなくなりました!!

参考サイトではここまでで終わっていたので機能面はこれにて終了にしたいと思います。

 

 

次に見た目の部分で少し改良を自分で加えたいと思います。

まず色です!!

一色になってしまうと見にくいなーということで、、、

f:id:ai8249:20161215180309j:plain

数値表示の部分を#00ced1の青緑色へ変更。

ボタンの部分を#f5f5f5の薄灰色へ変更しました!!

赤一色よりうーんと見やすくなりましたね。

 

次はボタンの大きさを数字を20spから25sp、記号を20spから30spへ変更です。

小さな違いですが見やすくなりました!!

f:id:ai8249:20161215180630j:plain

 

 

また、今の表示形式だと境界線がわからないですね。

なので枠線の引き方を調べてみました!!

参考サイトはこちら。

asky.hatenablog.com

まずdrawableディレクトリの下にxmlファイルを作成するらしいです。

File nameにframe_styleと記入。

f:id:ai8249:20161215181126j:plain

 

ファイルの中身はこんな感じに。

f:id:ai8249:20161215181301j:plain

 

数値表示の部分は色が違うので、新しいファイルを作成し中身はこんな感じに。

f:id:ai8249:20161215181557j:plain

 

そして枠線をつけたいボタンにandroid:background="@drawable/frame_style"と記入。

(数値表示の部分は違うファイル名を)

エミュレーターで確認すると、、、

f:id:ai8249:20161215181920j:plain

枠線もちゃんとついた見やすい電卓が完成しました!!

 

ハァ〜やっと完成です。

最初のテーマを転換して電卓をやってきましたが、とにかく最後まで出来たのが嬉しいです。

感想はまた次回にでも。ではさようなら。