Android 電卓のデザインを作成

#はじめに
こんな感じの電卓みたいなデザインを作ります。
<img width="392" alt="スクリーンショット 2020-06-03 20.59.37.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/77ee11bc-75fb-52f5-62c7-5c0b5a2201b0.jpeg">

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

#電卓のデザインを作成
[Androidのレイアウト👶初心者向けざっくり理解](https://qiita.com/mii-chang/items/ee965c1e8826d4e59414)
こちらをまずは読むと、より理解が深まるかと。

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

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

<img width="778" alt="スクリーンショット 2020-06-03 13.30.52.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/df4ec7e0-ce75-78a2-edbd-2ebcf67ddf29.jpeg">


```kotlin: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"`が重要なようです。詳しいことはわかりません:sweat:


##内側のLinearLayoutをさらに増やす
<img width="640" alt="スクリーンショット 2020-06-03 21.06.56.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/85d8b82e-473e-ffe8-6c5e-c8963755de21.jpeg">

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

```kotlin: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!