레이아웃이란?

・UI를 이용해 유저가 보는 화면을 결정하는 구조입니다.
· 데이터 저장은 xml 파일에 저장됩니다.

레이아웃 만들기

・완성 예상도
· activity_main.xml


화면 상단에 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


화면 왼쪽 상단으로 돌아가기 버튼 배치
화면 상단에 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 배치

・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 배치

ImageButton을 배치하면 아래와 같은 화면이 나옵니다.

이미지를 선택하고 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

버튼 배치

TextView 배치

ImageView 배치