Androidの簡単な電卓アプリを作ろう レイアウト編

こんにちは、鬱太郎です。今日は、念願のAndroidアプリの作成です。比較的、簡単そうな電卓アプリを（デザインだけ）作ってみましたのでそれをまとめたいと思います。四則演算だけ！マイナスも考慮しないよ！面倒だから！

過去の記事

Android Studioをインストールしていない方はこちら neet-utsu-taro.hatenablog.jp

解説動画

鋭意製作中(´;ω;｀) ごめんなさい！

どんなアプリを作るのかをイメージしよう

簡単な設計図を描いてみよう

なんとなくでよいので簡単な設計図を書きました。下手でごめん！( ;∀;) 見た目だけでなく、いろいろと制約も書いておきます。できるだけ機能を削ったデザインにしておきます。

フロント（デザイン）部分を抜き出してみよう

最初に作った設計図にデザインに特化した説明を書きたしました。

定義

下の様な計算を電卓アプリでしようとします。

a + b = c

その場合、ここの記事では

要素	名称
a	被演算子(左方)
b	被演算子(右方)
c	計算結果および被演算子(右方)
+,-,×,÷,=	演算子

として扱います。

実際に作ってみよう

今回はGUI形式でレイアウトしていきます。よくわからない方はXMLファイルのところに設定ファイルがあるので参考にしてください。もしくは解説動画をご覧ください。

1.数値表示部分とボタン部分を分けるためのLinearLayoutを追加

上の図のように数値表示部分とボタン部分を大きく分けるためにLinearLayout（vertical）を最初にあるConstraintLayoutの中に追加します。

LinearLayoutの各要素を下の表にまとめました。

変数名	値
android:layout_width	match_parent(0dp)
android:layout_height	match_parent(0dp)
android:orientation	vertical
android:layout_marginEnd	16dp
android:layout_marginLeft	16dp
android:layout_marginRight	16dp
android:layout_marginStart	16dp
android:layout_marginTop	24dp
android:weightSum	1
app:layout_constraintBottom_toBottomOf	parent
app:layout_constraintLeft_toLeftOf	parent
app:layout_constraintRight_toRightOf	parent
app:layout_constraintTop_toTopOf	parent

外周から一定のサイズ隙間を作ります。下のgifのように操作しましょう（説明放棄・・・( ;∀;)）。

同様に下、左右の隙間を作ります。もしくは、変数表を参考に数値を記入しましょう。下の図のようになったら完了です。

2.数値表示部分

2-1.上下のレイアウトを分けるためのLinearLayoutを追加

先ほど作ったLinerLayoutの中の一番上に数値表示部分を追加していきます。

LainearLayoutの要素を表にまとめました。

変数名	値
android:layout_width	match_parent
android:layout_height	50dp
android:orientation	vertical

これらの値を入力したら完成です。

2-2.上の部分に被演算子（左方）を表示するTextViewを追加

先ほど作ったLinearLayoutの上部に高さ15dpのTextViewを追加します。

追加するTextViewの要素を表にまとめました。

変数名	値
android:id	sub_number_tv
android:layout_width	match_parent
android:layout_height	15dp
android:text	subNumberTV

これらの値を入力しましょう。その結果が下のスクショです。

2-3.下の部分に演算子用と被演算子（右方）と分けるためのLinearLayoutを追加

先ほど追加したTextViewの下の部分にLinearLayoutを追加します。

LinearLayoutの要素を表にまとめました。

変数名	値
android:layout_width	match_parent
android:layout_height	match_parent
android:orientation	horizontal

この値を入力しましょう。

2-4.演算子用のTextViewを追加

先ほど追加したLinearLayoutの左側に演算子を表示するためのTextViewを追加します。

演算子は一文字なのでフォントサイズ大きめの30spで中央ぞろえにします。詳細を表にまとめました。

変数名	値
android:id	op_tv
android:layout_width	50dp
android:layout_height	match_parent
android:layout_weight	0
android:text	＝
android:textAlignment	center
android:textSize	30sp

入力した結果がこちら

2-5.被演算子（右方）のTextViewを追加

今度は右側にTextViewを追加します。

右から文字が始まることに注意しましょう。

変数名	値
android:id	main_number_tv
android:layout_width	match_parent
android:layout_height	match_parent
android:layout_weight	1
android:text	mainNumberTV
android:textAlignment	textEnd
android:textSize	30sp

入力結果はこちら

2-6.被演算子（右方）の右に詰め物を追加

実際にデザインを作ってみて、右揃えの際にもう少し余白が欲しいと思いました。そこで新しいレイアウトを追加して余白を作ろうと思います。TextViewのmarginやpaddingで事足りますね。勉強不足で申し訳ありません。

ConstraintLayoutの要素は主にwidthの10dpとweightの0です。

変数名	値
android:layout_width	10dp
android:layout_height	match_parent
android:layout_weight	0

下の結果を見るとほんのちょっと隙間が追加されてますね。

3.ボタン部分

3-1ボタンを配置するためのTableLayoutを追加

1章で追加したLinearLayoutの中の下にボタン部分を表示させるTableLayoutを追加します。

TableLayoutは縦横ともにmatch_parentです。

変数名	値
android:layout_width	match_parent
android:layout_height	match_parent
android:layout_margin	10dp
tools:layout_editor_absoluteX	8dp
tools:layout_editor_absoluteY	8dp

入力した結果がこちら

3-2TableLayoutにTableRowを追加

TableLayoutにTableRowを合計5個追加していきます。デフォルトで4個追加されているのであと一個追加しましょう。

気を付ける要素としてそれぞれのTableRowにlayout_weight=0.2と設定することです。TableRowの要素を表にまとめました。各TableRowにこの値を入力していきます。

変数名	値
android:layout_width	match_parent
android:layout_height	match_parent
android:layout_weight	0.2

weightを設定するとしっかりと5等分されていると思います。

3-3TableRowにButtonを追加

各TableRowにボタンを追加していきます。4，4，4，4，2個Buttonを追加していきましょう！

Buttonにはlayout_widthとheightにmatch_parentを設定しておきましょう。追加すると次のようになります。

3-4各Buttonのフィールドを設定

各ボタンにそれぞれのIDや数値、textSizeなどを追加していきます。

追加する値は

変数名	値
android:id	bn
android:layout_width	match_parent
android:layout_height	match_parent
android:layout_weight	1
android:text	n
android:textSize	30sp

です。

nは0~9の数値です。演算子やC、ACなど特殊なものは

text	id
+	bplus
-	bsub
×	bmul
÷	bdev
=	beq
C	bc
AC	bac

としました。その結果がこちらです。

4.数値表示部分とボタン部分の間に詰め物を追加

上のTextViewとTableLayoutが少し近いと思ったので間に隙間を入れます。

ConstraintLayoutの各要素は

変数名	値
android:layout_width	match_parent
android:layout_height	15dp

です。

これにてすべての作業が終了しました。やったぜ！

XMLファイル

GUIで作ったレイアウトの設定ファイルです。これをコピーすれば同じレイアウトが表示されます。

クリックで表示します

apkファイル

今回作った段階でアプリケーションインストーラを作りました。

goo.gl

良ければインストールして「ふーん」と思ってください。

レイアウトしか作ってないのでボタンとか押してもまだ動きませんが…ｗ(´;ω;｀)ｗ

AndroidのOSやブラウザ、ウイルス対策ソフトによってはうまくダウンロードできないかもしれません。 かなしい(´;ω;｀)

ブラウザ変えてダウンロードしてみるとダウンロードできるかも？(‘ω’)

動かしてみよう

レイアウトのビューで不具合がなくても実行してみるとレイアウトが崩れていたりすることもあります。試しに実行してみましょう

正常ですね！ちなみにボタンを押しても何も動きません。レイアウトしか作ってませんからね。

終わりに

自分でレイアウトするのと記事でまとめるのでは労力が段違いですね…

毎日ちょくちょく記事を書き貯めてようやく公開できました！

でもこれからも頑張っていきます

またね(‘ω’)ノ

話は変わりますが、読者登録してくださった方ありがとうございます。嬉しいです(´;ω;｀)

次回の記事

制作中