概要
使い方画面を新しく作成し、スタート画面から使い方画面、使い方画面からスタート画面へ画面遷移できるようにする。
目次
- 新しいファイルを作成する
- 画面レイアウトを修正する
- 画面遷移をしてみよう
- StartActivityを修正する
- ソースコードを修正する
- 端末上で確認する
- HowToActivityを修正する
- ソースコードを修正する
- 端末上で確認する
- StartActivityを修正する
このステップのポイント
- インテントを使ってスタート画面と使い方画面を行き来できるようにする
新しいファイルを作成する
まずは、使い方画面を作成するために必要なファイルを新しく作成しましょう。 新規ファイルを作成する方法はSTEP3と同様の方法でおこなっていきます。 Customize the Activityという画面が表示されるので、項目の中から一番上のActivity Nameを以下の内容を設定します。
| 項目 | 設定内容 | 備考 |
|---|---|---|
| Activity Name | HowToActivity | アクティビティファイル名を設定する項目。記述ミスがないように注意！ |
| Layout Name | activity_how_to |
画面レイアウトファイル名を設定する項目。 アクティビティファイル名に応じたファイル名に自動で変わります。 |
設定が完了したら、「終了(F)」をクリックします。
プロジェクトを確認し、新しくHowToActivityとactivity_how_to.xmlがあることを 確認してください。
画面レイアウトを修正する
使い方画面の表示は、スタート画面から「使い方」のボタンを押下すると、使い方画面を表示できるようにします。
そのために、まずはスタート画面の画面レイアウトファイルに「使い方」のボタンを配置する必要があります。
その後、先ほど作成した使い方画面のレイアウトを修正します。
スタート画面にボタンを追加する
まずは、スタート画面にボタンを配置します。
スタート画面に対応する画面レイアウトファイルのactivity_start.xmlを開きます。
ここでは、スタート画面に「使い方」のイメージボタンを配置していきます。
ボタン画像は、STEP1で手に入れたbutton_howto.pngを使用します。
Paletteからイメージボタンを配置する
RelativeLayout上へのビューの配置方法についてはこちらを参考にしてください。
今回は、すでに配置されている「おみくじを引く」ボタンの真上に、ボタンの右端に合わせるように配置します。
PaletteからImageButtonをクリックし、
以下の図のようにalignParentRight above=buttonStartが表示されたらクリックを離します。
クリックを離すと、以下のように画像が設定されていないイメージボタンが配置されます。
イメージボタンの属性を設定する
次に、イメージボタンに対する属性を設定します。
先ほどのイメージボタンの設定と同様の方法で、属性id、src、background、scaleTypeに以下の値を設定します。
| 属性名 | 設定内容 | 備考 |
|---|---|---|
| id | buttonHowTo |
ボタンを識別するためのIDを設定します。 ボタンがクリックされたかどうかを識別するためには、ボタンに設定したIDが必要になります。 |
| src | @drawable/button_howto | イメージボタンで使用する画像を設定します。 |
| background | #00000000 |
イメージボタンの背景の色を設定します。 ここでは、背景の透過処理をおこなっています。 |
| scaleType | fitXY |
イメージを表示する領域を設定します。 fitXYは画像をフルサイズ表示する設定です。 |
設定をおこない、編集画面が以下のように表示されたら完了です。
使い方画面の画面レイアウトを修正する
次に使い方画面の画面レイアウトを設定します。先ほど作成したactivity_how_to.xmlを開いてください。 今回は、背景画像の設定とイメージボタンを1つ配置します。以下の手順に沿って進めていきましょう。
テキストビューの削除
初期状態でテキストビューが1つ配置されているので、 テキストビューを選択し、「Delete」キーを押してテキストビューを削除します。
RelativeLayoutの属性を設定
次に、RelativeLayoutの属性を変更します。
Component TreeからRelateveLayoutをクリックして、RelativeLayoutが選択されている状態にしましょう。
RelativeLayoutをクリックしたら、画面右下のPropertiesの確認をして下さい。 background属性に以下の値を設定します。
| 項目 | 設定内容 | 備考 |
|---|---|---|
| background | @drawable/background_howto | レイアウトの背景画像を設定します。 |
設定をおこない、編集画面が以下のような表示になれば完了です。
イメージボタンの配置
RelativeLayout上へのビューの配置方法についてはこちらを参考にしてください。
今回は、横方向は親のレイアウトの中央、縦方向は親のレイアウトの下端に配置します。
PaletteからImageButtonをクリックし、
以下の図のようにcenterHorizontal alignParentBottomが表示されたらクリックを離します。
正しく配置されると、以下の画面のように配置されます。
イメージボタンにまだ画像を設定していないので、灰色の小さい枠が表示されていると思います。
イメージボタンの属性を設定
最後に、イメージボタンの属性を設定します。
イメージボタンをクリックで選択して、Propertiesの項目をイメージボタンの属性一覧に切り替えましょう。
各属性に以下の値を設定します。
| 項目 | 設定内容 | 備考 |
|---|---|---|
| id | buttonBack |
ボタンを識別するためのIDを設定します。 ボタンがクリックされたかどうかを識別するためには、ボタンに設定したIDが必要になります。 |
| src | @drawable/button_back | イメージボタンで使用する画像を設定します。 |
| background | #00000000 |
イメージボタンの背景の色を設定します。 ここでは、背景の透過処理をおこなっています。 |
| scaleType | fitXY |
イメージを表示する領域を設定します。 fitXYは画像をフルサイズ表示する設定です。 |
画面レイアウト編集画面が以下のように変化したら完了です。
画面遷移をしてみよう
使い方画面の画面レイアウトの修正が完了したら、次に画面遷移できるようにしてみましょう。
StartActivityとHowToActivityを修正します。
StartActivityを修正する
まずは、スタート画面から「使い方」ボタンを押下したら、使い方画面に画面遷移できるようにします。
遷移元はスタート画面ですので、スタート画面に対するアクティビティファイル「StartActivity」を修正します。
ソースコードを修正する
StartActivityの記述を一旦全て削除し、以下のソースコードをコピー&ペーストで貼り付けます。
[修正] StartActivity
[フォルダ] java/com.school.it.kanda.kandaomikuji
package com.school.it.kanda.kandaomikuji;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageButton;
public class StartActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_start);
//イメージボタンに設定したid属性から、使い方のイメージボタンの情報を取得する
ImageButton buttonHowTo = (ImageButton) findViewById(R.id.buttonHowTo);
//使い方のイメージボタンの情報とボタンがクリックされたときの処理を関連付ける
buttonHowTo.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//HowToActivityに遷移するように設定
Intent intent = new Intent(getApplicationContext(), HowToActivity.class);
//インテントの開始
startActivity(intent);
//StartActivityの終了
finish();
}
});
//イメージボタンに設定したid属性から、おみくじを引くのイメージボタンの情報を取得する
ImageButton buttonStart = (ImageButton) findViewById(R.id.buttonStart);
//おみくじを引くのイメージボタンの情報とボタンがクリックされたときの処理を関連付ける
buttonStart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//ShakeActivityに遷移するように設定
Intent intent = new Intent(getApplicationContext(), ShakeActivity.class);
//インテントの開始
startActivity(intent);
//StartActivityの終了
finish();
}
});
}
}
ソースコードを確認すると、StartActivityの37行目から55行目に記述が追加されたことが確認できます。
37行目から55行目でシェイク画面に遷移するような処理を追加しています。
端末上で確認する
ソースコードの確認ができたら、一度実機上で実行してみましょう。
正しく画面遷移できていれば完了です。
HowToActivityを修正する
先ほど、スタート画面から使い方の画面に遷移したことを確認しました。
次に、使い方画面からスタート画面に戻ることができるようにしてみましょう。
今後は遷移元が使い方画面になるので、使い方画面に対するアクティビティファイル「HowToActivity」を修正します。
HowToActivityをダブルクリックし、編集画面を開いてください。
ソースコードを修正する
HowToActivityの記述を一旦全て削除し、以下のソースコードをコピー&ペーストで貼り付けます。
[修正] HowToActivity
[フォルダ] java/com.school.it.kanda.kandaomikuji
package com.school.it.kanda.kandaomikuji;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageButton;
public class HowToActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_how_to);
//レイアウトファイル内で設定したボタンのIDを取得
ImageButton buttonBack = (ImageButton) findViewById(R.id.buttonBack);
//イメージボタンの情報とボタンがクリックされたときの処理を関連付ける
buttonBack.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//StartActivityに遷移するように設定
Intent intent = new Intent(getApplicationContext(), StartActivity.class);
//インテントの開始
startActivity(intent);
//StartActivityの終了
finish();
}
});
}
}
ここでも先ほどと同様に、17行目から35行目までの間でボタンががクリックされたとき処理をおこなうように記述しています。
26行目から33行目に記述されているボタンがクリックされた後の処理では、今度はStartActivityに遷移するようにしています。 ボタンがクリックされたら、使い方画面に遷移するような処理を記述しています。
端末上で確認する
ソースコードの確認ができたら、一度実機上で実行してみましょう。
使い方画面からスタート画面に戻ることができれば完了です。
