dentaku_syoumen_small


アプリ開発初心者ですが、Android Studioを使って電卓を作っていきたいと思います。

自分で一からアプリを作るのは今回が初めてですが、最終的にリリースするところまでやっていきたいです。

使用言語はKotlinです。


完成したアプリはリリースする予定なので、コードはあまり載せない方針でいきます。一応コピペ対策で。

無論、初心者が書いたコードに需要は無いですが…



Part1では、メイン画面のレイアウトを大まかに作っていきます。



概要



今回作る電卓は以下の構成にします(予定)。


・メイン画面:計算をする。

・履歴画面:計算履歴を表示する。

・設定画面:設定を行う。



電卓にありがちなM+とかのメモリー機能をつけると頭がパンクしそうなので、計算履歴を保存することによりカバーします。

(メモリー機能が何なのか理解してないだけです)



レイアウトの作成



bandicam 2019-03-05 20-21-31-357


作成したばかりの画面はこんな感じです。

テーマエディターから、アクションバー(画面上部の「電卓」と書いてある所)などの色を変更して、上のようになりました。

無駄にカラフルにするより、白 & 黒で構成する方が綺麗ですよね~。






bandicam 2019-03-05 23-04-20-204


activity_main.xmlとは別に、option.xmlというメニューを作ります。

Menuの中にMenu Itemを2つ配置して、アイコンをつけます。

ここでは元々用意されているベクタ形式の画像を使用しました。

スマホの画面サイズが変わっても画像が粗くなったりしないみたいです。

上の画像の「電卓」の右にあるアイコンがそれです。

設定はともかく、このアイコンで履歴だということが分かり易いのかどうか…


また、オプションメニューは以下のような感じで表示しました。


override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.option, menu)
return true
}







bandicam 2019-03-06 16-42-46-429


次はTextViewを配置します。

式と結果を表示する電卓にしたいので、こんな感じにしました。






bandicam 2019-03-06 17-39-17-579


Buttonを配置します。

電卓のようにボタンが沢山並んでいる場合ではTableLayoutがいいんでしょうけど、特定のボタンの大きさだけを変更する方法が分からなかったので、

LinearLayout(水平)の中にLinearLayout(垂直)を5つ配置するという手段を取りました。


こうすることによりlayout_weightを変更し、比率でボタンのサイズを変更することができます。

bandicam 2019-03-06 17-49-22-264



その他サイズ、マージンなどを微調整し、テキストを変更して完成。

bandicam 2019-03-06 19-13-57-695


Cボタンが左側にある電卓は結構ありますが、右利きの人が多いので右に配置してみました。






次回はデザインを完成させていきます。


(ソースコードは後で綺麗に表示されるよう設定しておきます…)