ニートが学ぶプログラミング

ニートの日記。プログラムのことやら、くだらないこと、思ったことをまとめていきます。頑張って毎日更新するぞぉ_(:3」∠)_ 更新が連続して途切れたら察してください。

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

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

過去の記事

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

解説動画

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

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

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

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

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

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

f:id:neet-utsu-taro:20170914085806p:plain

定義

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

a + b = c

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

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

として扱います。

実際に作ってみよう

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

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

f:id:neet-utsu-taro:20170914131942p:plain

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

f:id:neet-utsu-taro:20170914132612p:plain

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のように操作しましょう(説明放棄・・・( ;∀;))。 f:id:neet-utsu-taro:20170914102757g:plain

同様に下、左右の隙間を作ります。もしくは、変数表を参考に数値を記入しましょう。下の図のようになったら完了です。 f:id:neet-utsu-taro:20170914101704p:plain

2.数値表示部分

f:id:neet-utsu-taro:20170914133401p:plain

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

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

f:id:neet-utsu-taro:20170914134045p:plain

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

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

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

f:id:neet-utsu-taro:20170914134931p:plain

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

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

f:id:neet-utsu-taro:20170914140344p:plain

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

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

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

f:id:neet-utsu-taro:20170914141544p:plain

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

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

f:id:neet-utsu-taro:20170914142206p:plain

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

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

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

f:id:neet-utsu-taro:20170914142722p:plain

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

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

f:id:neet-utsu-taro:20170914143417p:plain

演算子は一文字なのでフォントサイズ大きめの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

入力した結果がこちら

f:id:neet-utsu-taro:20170914144350p:plain

2-5.被演算子(右方)のTextViewを追加

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

f:id:neet-utsu-taro:20170914145027p:plain

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

変数名
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

入力結果はこちら

f:id:neet-utsu-taro:20170914145633p:plain

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

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

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

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

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

f:id:neet-utsu-taro:20170914154048p:plain

3.ボタン部分

f:id:neet-utsu-taro:20170914154753p:plain

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

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

f:id:neet-utsu-taro:20170914163350p:plain

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

入力した結果がこちら

f:id:neet-utsu-taro:20170914163239p:plain

3-2TableLayoutにTableRowを追加

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

f:id:neet-utsu-taro:20170914164835p:plain

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

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

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

f:id:neet-utsu-taro:20170914165425p:plain

3-3TableRowにButtonを追加

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

f:id:neet-utsu-taro:20170914170004p:plain

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

f:id:neet-utsu-taro:20170914170523p:plain

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

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

f:id:neet-utsu-taro:20170914171127p:plain

追加する値は

変数名
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

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

f:id:neet-utsu-taro:20170914172127p:plain

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

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

f:id:neet-utsu-taro:20170914180010p:plain

ConstraintLayoutの各要素は

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

です。

f:id:neet-utsu-taro:20170914175349p:plain

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

XMLファイル

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

apkファイル

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

goo.gl

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

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

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

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

動かしてみよう

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

f:id:neet-utsu-taro:20170914071352p:plain

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

終わりに

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

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

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

またね(‘ω’)ノ

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

次回の記事

制作中