【初心者がAndroid Studio+kotlinで電卓アプリを作ってみる】第5回:減算、乗算、除算ボタン追加編

kotlinで電卓アプリ作成

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

今回のポイント

加算だけではなく減算、乗算、除算を出来るようにするためにボタンの追加とactivity_main.xmlの調整をしていきます。

他の演算子ボタンを追加する

減算(-)乗算(×)除算(÷)のボタンを作っていきましょう。

-ボタン id: buttonSubtraction | textSize:60sp
×ボタン id: buttonMultiplication | textSize:60sp
÷ボタン id: buttonDivision | textSize:60sp

strings.xmlはこんな感じになりました。

<resources>
    <string name="app_name">CalculatorApplication</string>
    <string name="text_button_one">1</string>
    <string name="text_button_two">2</string>
    <string name="text_button_three">3</string>
    <string name="text_button_addition">+</string>
    <string name="text_button_Subtraction">-</string>
    <string name="text_button_Multiplication">×</string>
    <string name="text_button_Division">÷</string>
    <string name="text_button_equal">=</string>
    <string name="text_button_ac">AC</string>
</resources>

activity_main.xmlはこんな感じです。
ボタンの作り方を忘れた人はその1を見て下さい。

アプリを実行して確認してみます。
全然違う、÷ボタンが計算結果のviewにかぶってて計算結果見えないし。

activity_main.xmlと実行画面を同じにする

activity_main.xmlと実行画面が違うと後々大変そうなので同じにしたいです。
意外と参考書とかに出てこないのです。
下の画像のようにShow System UIをクリックするとほぼ同じになりましたが、3ボタンの縦位置が微妙に違う、さらによくよく見ると数字をを表示するTextViewの縦幅が違うのに気が付きました。

現在あるTextViewとButtonはTextSizeの値(60sp)を設定したら文字のサイズによってTextViewやButtonのサイズを自動調整してね。っていう設定です。(layout_height:wrap_content)
これダメなのかな?ついでにボタン大きすぎ問題とACボタンの横幅が他のボタンより大きい問題を解決するために設定しなおします。例として3個の設定の画像を置いておきます。

TextView
ACボタン
=ボタン

設定した数値はこんなもんでいいでしょくらいの感じで設定しています。
またアプリを実行してみます。

これで同じになりました!
また数字ボタンを追加するときに変更すると思いますがとりあえずこれで良しとしましょう。
一応activity_main.xmlのコードを置いておきます。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/textViewValuedisplay"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:background="@android:drawable/edit_text"
        android:textAlignment="viewEnd"
        android:textSize="60sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/buttonAllClear"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:insetLeft="6dp"
        android:insetRight="6dp"
        android:text="@string/text_button_ac"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textViewValuedisplay" />
    <Button
        android:id="@+id/buttonOne"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:insetLeft="6dp"
        android:insetRight="6dp"
        android:text="@string/text_button_one"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonAllClear" />
    <Button
        android:id="@+id/buttonTwo"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:insetLeft="6dp"
        android:insetRight="6dp"
        android:text="@string/text_button_two"
        android:textSize="24sp"
        app:layout_constraintStart_toEndOf="@+id/buttonOne"
        app:layout_constraintTop_toTopOf="@+id/buttonOne" />
    <Button
        android:id="@+id/buttonThree"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:insetLeft="6dp"
        android:insetRight="6dp"
        android:text="@string/text_button_three"
        android:textSize="24sp"
        app:layout_constraintStart_toEndOf="@+id/buttonTwo"
        app:layout_constraintTop_toTopOf="@+id/buttonTwo" />
    <Button
        android:id="@+id/buttonAddition"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:insetLeft="6dp"
        android:insetRight="6dp"
        android:text="@string/text_button_addition"
        android:textSize="24sp"
        app:layout_constraintBottom_toTopOf="@+id/buttonEqual"
        app:layout_constraintEnd_toEndOf="parent" />
    <Button
        android:id="@+id/buttonEqual"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:insetLeft="6dp"
        android:insetRight="6dp"
        android:text="@string/text_button_equal"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    <Button
        android:id="@+id/buttonSubtraction"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:insetLeft="6dp"
        android:insetRight="6dp"
        android:text="@string/text_button_Subtraction"
        android:textSize="24sp"
        app:layout_constraintBottom_toTopOf="@+id/buttonAddition"
        app:layout_constraintEnd_toEndOf="parent" />
    <Button
        android:id="@+id/buttonMultiplication"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:insetLeft="6dp"
        android:insetRight="6dp"
        android:text="@string/text_button_Multiplication"
        android:textSize="24sp"
        app:layout_constraintBottom_toTopOf="@+id/buttonSubtraction"
        app:layout_constraintEnd_toEndOf="parent" />
    <Button
        android:id="@+id/buttonDivision"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:insetLeft="6dp"
        android:insetRight="6dp"
        android:text="@string/text_button_Division"
        android:textSize="24sp"
        app:layout_constraintBottom_toTopOf="@+id/buttonMultiplication"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

コメント