概要

スタート画面を作成し、アプリケーションを実行したときにスタート画面が表示できるようにする

タイトルバーを消去する
- styles.xmlを開く
- ファイルの修正
- 実行結果
スタート画面を作成する
- 画面に背景を設定する
  - RelativeLayoutを選択
  - RelativeLayoutの属性を設定する
- 「おみくじを引く」のイメージボタン配置する
  - RelativeLayout上でのビューの配置方法について
  - Paletteからイメージボタンを配置する
  - イメージボタンの属性を設定する

このステップのポイント

画面レイアウトのスタイルを変更する
背景とボタンに画像を設定する方法を学習する

タイトルバーを消去する

アプリケーションを作成した時や、新しくレイアウトリソースを作成した時などでは、標準で画面上にタイトルバーというものが挿入されています。
このタイトルバーにメニューボタンや検索ボタンなどを置くことができるので、非常に便利なものですが、ゲームや画面を広く使いたいアプリケーションを作成する際は、このタイトルバーが邪魔になってくる場合があります。
今回はこのタイトルバーを消し、画面のスペースを広くとれるようにしておきましょう。

styles.xmlを開く

タイトルバーを消去するためには、「styles.xml」を編集します。
styles.xmlファイルはレイアウトのスタイルを設定するファイルで、「res」フォルダの中にあります。
まずは、「res」フォルダの中にあるstyles.xmlをダブルクリックして下さい。

ダブルクリックすると、以下の画面が表示されます。このファイルは画面レイアウトファイルと同様、XML言語で書かれています。

ファイルの修正

先ほど開いたstyles.xmlを修正します。修正箇所は、styles.xmlファイルの4行目になります。
下記のコードをコピーして styles.xmlを作成します。

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

</resources>

実行結果

activity_start.xmlのファイルを開いて、画面のレイアウトを確認してみましょう。
タイトルバーが消去されていたら成功です。

スタート画面を作成する

タイトルバーを消去したら、次にスタート画面を作成しましょう。
まずは、「Hello world!」というテキストビューが配置されていますが、今回は必要ないのでテキストビューを削除します。
削除の方法は、端末画像からテキストビューの部分をクリックし、「Delete」キーをクリックします。
以下のように画面上に何も置かれていない状態にしてください。

画面に背景を設定する

次に、このレイアウト画面の背景画像を設定します。
背景画像は、STEP1で手に入れたbackground_start.pngを使用します。

背景画像は、画面レイアウトの外枠にあるRelativeLayoutに属性として設定します。

RelativeLayoutを選択

まず、Component Tree内に表示されている「RelativeLayout」をクリックします。

クリックすると、画面右下のPropertiesがRelative Layoutに関する属性一覧に切り替わります。

RelativeLayoutの属性を設定する

RelativeLayoutをクリックしたら、画面右下のPropertiesの確認をして下さい。
今回ここで設定する属性は「background」属性です。レイアウトと属性に以下の値を設定します。

属性名	設定内容	備考
background	@drawable/background_start	レイアウトの背景画像を設定します。

設定をおこない、編集画面が以下のように表示されたら完了です。

「おみくじを引く」のイメージボタン配置する

次に「おみくじを引く」のイメージボタンを配置していきます。
イメージボタンはアンケートフォームの作成で学習したボタンのビューと同じような役割を持ちますが、イメージボタンにはボタンに画像を設定することができます。ボタン画像は、STEP1で手に入れたbutton_start.pngを使用します。

RelativeLayout上でのビューの配置方法について

イメージボタンを配置する前に、RelativeLayout上でビューの配置方法について解説します。
RelativeLayoutはLinearLayoutと同様に配置方法を設定するためのレイアウト要素で、レイアウトファイルを作成した段階ではデフォルトでRelativeLayoutが設定されています。

Relativeは相対的なという意味を持っており、 RelativeLayoutはある位置を基準として、そこからの距離を指定してビューを配置するレイアウト要素です。
基準にできる位置は主に2つあり、1つ目は親のレイアウトの四隅からの相対位置、2つ目はすでに配置されているビューからの相対位置
RelativeLayout内でビューを配置するためには、縦方向と横方向それぞれに対して基準となるものを指定する必要があります。

親のレイアウトからの相対配置

まずは、親のレイアウトの四隅からの距離を基準とした相対配置についてみてみます。
親のレイアウトの四隅からの配置方法は以下のイメージのように設定をおこないます。

このように一つのビューに対して、縦方向は親のレイアウトの上端または下端からこの位置、横方向は親のレイアウトの左端または右端からこの位置といった形で指定します。
また、端の位置からだけでなく、中央にも配置することができます。

すでに配置されているビューからの相対配置

親のレイアウトの四隅からの相対位置だけでなく、すでに配置されているビューを基準とした位置の設定をおこなうこともできます。
ビューからの配置方法は以下のイメージのように設定をおこないます。

親のレイアウトからの相対配置と同様に、縦方向、横方向それぞれの方向に対して基準となるビューからの位置を設定します。
ビューからの相対配置を行う場合は、ビューの真上に配置、ビューの端に合わせるといった配置方法を取ります。

Android Studio上でビューを配置する

Android Studio上にドラッグ&ドロップで配置するときは、カーソルの位置、プレビュー画面に表示されるオレンジ色の枠だけでなく、プレビュー画面の下に表示されるメッセージ（属性）にも注目しながら配置をおこなってください。
上の行は横方向に対する属性、下の行は縦方向に対する属性となります。
それぞれの用語の意味は以下の表を参考にしてください。

■親のレイアウトを基準とした場合の属性

属性名	設定内容
alignParentLeft	親のレイアウトの左端
alignParentRight	親のレイアウトの右端
alignParentTop	親のレイアウトの上端
alignParentBottom	親のレイアウトの下端
centerHorizontal	親のレイアウトの中央（横方向）
centerVertical	親のレイアウトの中央（縦方向）

■配置してあるビューを基準とした場合の属性
　※xxxは基準とするビューに設定されているidです。

属性名	設定内容
toLeftOf=xxx	基準となるビューの左に配置
toRightOf=xxx	基準となるビューの右に配置
above=xxx	基準となるビューの上に配置
below=xxx	基準となるビューの下に配置
alignLeft=xxx	基準となるビューの左端に合わせる
alignRight=xxx	基準となるビューの右端に合わせる
alignTop=xxx	基準となるビューの上端に合わせる
alignBottom=xxx	基準となるビューの下端に合わせる

Paletteからイメージボタンを配置する

では、画面にイメージボタンを配置しましょう。
今回は横方向は親のレイアウトの中央、縦方向は親のレイアウトの下端に配置するようにします。
マウスのカーソルを画面下の中央までクリックしたまま引っ張っていき、以下の図のようにcenterHorizontal alignParentBottomが表示されたらクリックを離します。

drag-imagebutton-on-layout-activity-start

クリックを離すと、イメージボタンが配置されます。
イメージボタンにはまだ画像を設定していないので、この時点では以下の図のような状態になっています。

drag-imagebutton-on-layout-activity-start-result

イメージボタンの属性を設定する

次に、イメージボタンに対する属性を設定します。
まずはイメージボタンをクリックで選択して、Propertiesの項目をイメージボタンの属性一覧に切り替えましょう。
今回ここで設定する属性は「id」、「src」、「background」、「scaleType」属性です。
レイアウトと属性に以下の値を設定します。

属性名	設定内容	備考
id	buttonStart	ボタンを識別するためのIDを設定します。ボタンがクリックされたかどうかを識別するためには、ボタンに設定したIDが必要になります。
src	@drawable/button_start	イメージボタンで使用する画像を設定します。
background	#00000000	イメージボタンの背景の色を設定します。ここでは、背景の透過処理をおこなっています。
scaleType	fitXY	イメージを表示する領域を設定します。 fitXYは画像をフルサイズ表示する設定です。