アプリケーションのレイアウトを決めよう

# レイアウトとは
・UIを用いてユーザーが見る画面を決める仕組みです。
・データの保存はxmlファイルに保存されます。

# レイアウトの作成
・完成予想図
・activity_main.xml
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223434/c77e4e02-ced6-741a-ede0-1039ec55fc65.png)


画面上部にTextViewを配置して文字を表示
画面の中部にImageButtonを配置して、グー、チョキ、パーの絵のボタンを配置

・text

 ```
<ImageButton
        android:id="@+id/choki"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:onClick="onJankenButtonTapped"
        android:scaleType="fitCenter"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/tyoki" />

    <ImageButton
        android:id="@+id/gu"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="8dp"
        android:onClick="onJankenButtonTapped"
        android:scaleType="fitCenter"
        app:layout_constraintLeft_toLeftOf="parent"
        app:srcCompat="@drawable/gu"
        tools:layout_editor_absoluteY="205dp"
        tools:ignore="MissingConstraints" />

    <ImageButton
        android:id="@+id/pa"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginRight="8dp"
        android:onClick="onJankenButtonTapped"
        android:scaleType="fitCenter"
        app:layout_constraintRight_toRightOf="parent"
        app:srcCompat="@drawable/pa"
        tools:layout_editor_absoluteY="210dp"
        tools:ignore="MissingConstraints" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:text="じゃん・けん・・・"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
```


・activity_result.xml
![スクリーンショット 2018-06-20 17.33.28.png](https://qiita-image-store.s3.amazonaws.com/0/223434/6090628b-3075-87a2-81e3-04c5b568dfe0.png)


画面の左上に戻るボタンを配置
画面の上部にmain_activityで押した画像を表示させるためのImageViewを配置
画面の中心部にmain_activityで押したボタンの名前を表示させるためのTextViewを配置
コンピューターの出した画像を表示するためのImageViewを配置

・text

```
<TextView
        android:id="@+id/result_label"
        android:layout_width="96dp"
        android:layout_height="50dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/my_hand_image"
        android:layout_width="160dp"
        android:layout_height="100dp"
        android:scaleType="fitCenter"
        app:srcCompat="@drawable/gu"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="67dp"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/result_label"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="onbackButtonTapped"
        android:text="戻る"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintTop_creator="1"
        tools:text="戻る" />

    <ImageView
        android:id="@+id/com_hand_image"
        android:layout_width="120dp"
        android:layout_height="160dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:scaleType="fitCenter"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/result_label"
        app:srcCompat="@drawable/gu" />
```


## activity_main.xml
### TextViewの配置
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223434/65d6bf7a-fcb9-dec0-cd0d-4b981978848e.png)

・text

```
<TextView
        android:id="@+id/result_label"
        android:layout_width="96dp"
        android:layout_height="50dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
```

### ImageButtonの配置
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223434/5f4ee24f-2608-b639-19e7-d9c0e1040f07.png)
ImageButtonを配置すると下のような画面が出てきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223434/0a25a88c-2cda-6035-1ec7-e391d6410d46.png)
画像を選択してOKを押します。

・text(チョキの場合)

```
<ImageButton
        android:id="@+id/choki"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:onClick="onJankenButtonTapped"
        android:scaleType="fitCenter"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/tyoki" />
```

・text(グーの場合)

```
<ImageButton
        android:id="@+id/gu"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="8dp"
        android:onClick="onJankenButtonTapped"
        android:scaleType="fitCenter"
        app:layout_constraintLeft_toLeftOf="parent"
        app:srcCompat="@drawable/gu"
        tools:layout_editor_absoluteY="205dp"
        tools:ignore="MissingConstraints" />
```

・text(パーの場合)

```
<ImageButton
        android:id="@+id/pa"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginRight="8dp"
        android:onClick="onJankenButtonTapped"
        android:scaleType="fitCenter"
        app:layout_constraintRight_toRightOf="parent"
        app:srcCompat="@drawable/pa"
        tools:layout_editor_absoluteY="210dp"
        tools:ignore="MissingConstraints" />
```

## activity_result.xml
### Buttonの配置
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223434/f7e6c3cb-302d-d684-f15f-5bb6b58574c4.png)

### TextViewの配置
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223434/65d6bf7a-fcb9-dec0-cd0d-4b981978848e.png)

### ImageViewの配置
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223434/20c60d3d-c042-8878-7a86-ff856138c831.png)