【初心者がAndroid Studio+kotlinで電卓アプリを作ってみる】第1回:プロジェクト作成、画面作り編

kotlinで電卓アプリ作成

電卓アプリを作ってみるシリーズ一覧はこちらをクリック

今回のポイント

プロジェクト作成から画面作りまでをやっていこうと思います。

前提としてAndroid Studioのバージョン:Android Studio Chipmunk | 2021.2.1を使っています。

素人のコードなので突っ込みどころが多々あると思います。

プロジェクト作成

New Project → Empty Activity → next

Name:CalculatorApplication
Language:Kotlin
Minimum SDK:API19

画面を作っていこう

Activity_Main.xml

テキストビューの作成

「Hello World!」のテキストビューを削除する
「Palette」ペインの「Text」→「TextViex」をドラッグアンドドロップ(適当な場所でOK)
これが入力された数字や計算結果を表示する場所になる予定です。
そのあと制約ハンドル(白い〇)を左右と上に繋げる、赤いビックリマークのエラーが消えます。

Activity_Main.xml


「Attributes」ペインを変更していく

textView
id:textViewValuedisplay(直訳:テキストビュー、値、表示)
CommonAttrutes→textsize:60sp
Layout→layout_width:0dp
CommonAttrutes→textAlignment:右寄せ
CommonAttrutes→text:""(空にする)
All Attributes→background→右端の白い縦長の〇をクリック→background:editbox_background
Activity_Main.xml

ボタンの作成

「Palette」ペインの「Buttons」→「Button」をドラッグアンドドロップ(適当な場所でOK)×5個

Activity_Main.xml

5個のボタンに「id」「text」「textSize」を設定していきましょう

id:buttonAllClear | text:AC | textSize:60sp
id:buttonOne | text:1 | textSize:60sp
id:buttonTwo | text:2 | textSize:60sp
id:buttonAddition | text:+ | textSize:60sp
id:buttonEqual | text:= | textSize:60sp

全てのボタンに制約エラーが出ているので制約ハンドル(白い〇)を繋げてエラーを消していきましょう。

繋げる場所(白い〇をドラッグアンドドロップ)
id:buttonAllClear | 左:左端 | 上:textViewValuedisplayの下
id:buttonOne | 左:左端 | 上:buttonAllCleaの下
id:buttonTwo | 左:buttonOneの右 | 上:id:buttonOneの上
id:buttonAddition | 端 | 下:buttonEqualの上
id:buttonEqual | 下:した端 | 右:右端

ボタンとボタンの間隔を広げたいので例としてid:buttonAllClearの設定です。

Activity_Main.xml

ボタンすべてに警告の黄色いビックリマークが出てしまっているので直していきます。
id:buttonOneのボタンを選択し「Attributes」ペイン→Declared Attributes→
text→右端の白い縦長の〇をクリックします。

左上の小さな+ボタンをクリック→下のString Valueを選択→New String Valueダイアログ→
Resource name:text_button_one
Resource value:1
を入力してOKボタン→Pick a ResourceダイアログもOKボタン→もう一度textの右端の白い縦長の〇をクリックしたらtext_button_oneが出来ているので選択してOKボタンで警告が消えます。

他のボタンもやってみます。

id:buttonAllClear | Resource name:text_button_ac | Resource value:AC
id:buttonOne | Resource name:text_button_one | Resource value:1
id:buttonTwo | Resource name:text_button_two | Resource value:2
id:buttonAddition | Resource name:text_button_addition | Resource value:+
id:buttonEqual | Resource name:text_button_equal | Resource value:=

strings.xmlを見てみると入力した内容が反映されてます。
strings.xmlを直接編集してもいいです。

strings.xml

ここまで来たら一度エミュレーターまたは実機で確認してみましょう。
ツールバーのRun ‘app’(緑の三角ボタン)をクリック

当然ですがどのボタンを押しても何の反応もありません、次はボタン押下時の処理を追加していきましょう。

コメント