Android 電卓のデザインを作成

はじめに

こんな感じの電卓みたいなデザインを作ります。

Android初心者で、XMLがそもそもわからない人向け！

電卓のデザインを作成

Androidのレイアウト👶初心者向けざっくり理解
こちらをまずは読むと、より理解が深まるかと。

全体的なやり方としては、LinearLayoutの中にさらにLinearLayoutを入れ込む感じ。

まずは横幅が均等なボタンを４つ

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
        android:orientation="vertical"
        >

    <TextView
            android:id="@+id/tvInput"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:background="#efefef"
            android:textSize="48sp"
            android:maxLength="12"
            android:padding="10dp"
            android:text=""
            android:gravity="right|center_vertical|bottom"
        />

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:layout_weight="1"
            android:orientation="horizontal"
        >
        <Button
            android:id="@+id/btnOne"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="1"
            android:onClick="onDigit"
            />
        <Button
                android:id="@+id/btnTwo"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="2"
                android:onClick="onDigit"
                />
        <Button
                android:id="@+id/btnThree"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="3"
                android:onClick="onDigit"
                />
        <Button
                android:id="@+id/btnMultiply"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="*"
                android:onClick="onOperator"
                />
    </LinearLayout>

</LinearLayout>

android:layout_weight="1"が重要なようです。詳しいことはわかりません

内側のLinearLayoutをさらに増やす

内側のLinearLayout１つで、横１列になります。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
        android:orientation="vertical"
        >

    <TextView
            android:id="@+id/tvInput"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:background="#efefef"
            android:textSize="48sp"
            android:maxLength="12"
            android:padding="10dp"
            android:text=""
            android:gravity="right|center_vertical|bottom"
        />

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:layout_weight="1"
            android:orientation="horizontal"
        >
        <Button
            android:id="@+id/btnOne"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="1"
            android:onClick="onDigit"
            />
        <Button
                android:id="@+id/btnTwo"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="2"
                android:onClick="onDigit"
                />
        <Button
                android:id="@+id/btnThree"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="3"
                android:onClick="onDigit"
                />
        <Button
                android:id="@+id/btnMultiply"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="*"
                android:onClick="onOperator"
                />
    </LinearLayout>

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:layout_weight="1"
            android:orientation="horizontal"
            >
        <Button
                android:id="@+id/btnFore"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="4"
                android:onClick="onDigit"
                />
        <Button
                android:id="@+id/btnFive"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="5"
                android:onClick="onDigit"
                />
        <Button
                android:id="@+id/btnSix"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="6"
                android:onClick="onDigit"
                />
        <Button
                android:id="@+id/btnSubtract"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="-"
                android:onClick="onOperator"
                />
    </LinearLayout>

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:layout_weight="1"
            android:orientation="horizontal"
            >
        <Button
                android:id="@+id/btnSeven"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="7"
                android:onClick="onDigit"
                />
        <Button
                android:id="@+id/btnEight"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="8"
                android:onClick="onDigit"
                />
        <Button
                android:id="@+id/btnNine"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="9"
                android:onClick="onDigit"
                />
        <Button
                android:id="@+id/btnDivide"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="/"
                android:onClick="onOperator"
                />
    </LinearLayout>

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:layout_weight="1"
            android:orientation="horizontal"
            >
        <Button
                android:id="@+id/btnDecimal"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="."
                android:onClick="onDecimalPoint"
                />
        <Button
                android:id="@+id/btnZero"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="0"
                android:onClick="onDigit"
                />
        <Button
                android:id="@+id/btnClear"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="CLR"
                android:onClick="onClear"
                />
        <Button
                android:id="@+id/btnAdd"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="+"
                android:onClick="onOperator"
                />
    </LinearLayout>

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:layout_weight="1"
            android:orientation="horizontal"
            >
        <Button
                android:id="@+id/btnEqual"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="="
                android:onClick="onEqual"
                />
    </LinearLayout>
</LinearLayout>

これでブロックレイアウトはOK!