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

9425 ワード
AndroidStudio XML XML テキストリンク

レイアウトとは

・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

Buttonの配置

TextViewの配置

ImageViewの配置