初心者がJavaでシューティングゲームアプリ作ってみる その２

〜Part.2：タイトル画面のレイアウトをつくるどん〜

さ、今日はタイトル画面のレイアウトをつくりますぞえ～～～！

ざっくりイメージを考える

さてまず、とりかかる前に出来上がりのイメージをざっくりと考えます。
ざっくりと、ね（←重要）

タイトル画面：ざっくりイメージ(ペイント手書き)(うまい)

ひとまず、

●タイトル文字
●バトル画面へ遷移するためのボタン

この２つで考えていこうと思います。

文字列要素を表示させる

タイトル画面に表示されるレイアウトは「app/layout/activity_title.xml」に記述していきます。
でました、XMLです。HTMLの親戚(？)。文字。もじだるうう・・・。と言いたいところですが！！

なんとこのAndroidStudio、超わかりやすく現在のデザインを画面で確認しながら編集できます。やりやすい！！

レイアウトを見ながら編集すれば直感的なデザインができますね！( ´∀｀ )
左下のボタンで「テキスト」編集を選べばXMLで細かい調整が可能です。複数の要素に同じ属性値を適用するときなんかにコピペできるのでうまく切り替えて使えば便利そうです！

左下の「デザイン」⇔「テキスト」で表示を切り替えて編集可能

ってことで最初にタイトルをつけていきます
タイトルは”文字列”としての機能だけあればいいので、「TextView」を選択します。

パレットの「TextView」を「ConstraintLayout」の中にドラッグ＆ドロップ

すると左上にちっちゃく表示されました！

表示位置を指定する

表示ができたので次はこいつを中心に寄せちゃいます。
右側の属性欄から適切な属性を選んで、指定していきます。

①layout_constraintTop_toTopOf → parent
　→この要素の上端と、親要素の上端を揃える
②layout_constraintBottom_toBottomOf → parent
　→この要素の下端と、親要素の下端を揃える
③layout_constraintStart_toStartOf → parent
　→この要素の始まり(左側)と、親要素の始まり(左側)を揃える
④layout_constraintEnd_toEndOf → parent
　→この要素の終わり(右側)と、親要素の終わり(右側)を揃える

ここでいう親要素とは「ConstraintLayout」です。
この親要素は画面全体を占めているので、実質画面端だと思えばＯＫです!(^^)!

上下左右から引っ張るとバランスよく中心に来る

①～④で子要素を上下左右から引っ張ることで、バランスよく中心に持ってこれました(^^)v

次に上下バイアス(偏り)の指定をして、真ん中よりちょっと上に移動させます。

⑤layout_consraintVertical_bias →　0.3

上端が"0.0"、下端が"1.0"として、どのあたりに移動するかを指定します。今回は0.3なので真ん中よりちょっと上ですね。
※似たものに「layout_consraintHorizontal_bias」がありますが、これは左右のバイアスです。

内容とＩＤの設定

次に表示するテキストとIDを設定します。

テキストは「text」属性に指定します。ゲームのタイトルになるので「★ShootStar★」にします。
（★の文字化けがちょこっと心配…でもまぁとりあえずよしとする！！！）

id属性はアクティビティ内でユニーク(一意)なものにする必要があります。
これはjavaクラス内で要素を取得するときに必要だからですね！同じものがあるとどっちかわからなくなるので…
ここでは「tv_title」としておきます

あとは適当にテキストサイズを指定して・・・完了です。

タイトルの表示ができました

出来上がったデザインをテキストで確認しておきます(/・ω・)/

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="★ShootStar★"
        android:textSize="50sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.3" />

スタートボタンを作る

タイトルと同じようにして「スタートボタン」を作ります。

ボタンの完成

テキストで確認するとこのようになりました。

    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="スタート"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.7" />

タイトル画面完成！

次はタイトル画面の処理を作っていきますよーー！