初心者でもAndroidアプリ開発を1から学習できる1日集中入門セミナー。

使い方画面を表示してみよう(オプション)

概要

使い方画面を新しく作成し、スタート画面から使い方画面、使い方画面からスタート画面へ画面遷移できるようにする。

目次

このステップのポイント

  • インテントを使ってスタート画面と使い方画面を行き来できるようにする

新しいファイルを作成する

まずは、使い方画面を作成するために必要なファイルを新しく作成しましょう。 新規ファイルを作成する方法はSTEP3と同様の方法でおこなっていきます。 Customize the Activityという画面が表示されるので、項目の中から一番上のActivity Nameを以下の内容を設定します。

項目 設定内容 備考
Activity Name HowToActivity アクティビティファイル名を設定する項目。記述ミスがないように注意!
Layout Name activity_how_to 画面レイアウトファイル名を設定する項目。
アクティビティファイル名に応じたファイル名に自動で変わります。
step3-makefile

設定が完了したら、「終了(F)」をクリックします。

プロジェクトを確認し、新しくHowToActivityactivity_how_to.xmlがあることを 確認してください。

Make-HowToActivity-result

画面レイアウトを修正する

使い方画面の表示は、スタート画面から「使い方」のボタンを押下すると、使い方画面を表示できるようにします。
そのために、まずはスタート画面の画面レイアウトファイルに「使い方」のボタンを配置する必要があります。
その後、先ほど作成した使い方画面のレイアウトを修正します。

スタート画面にボタンを追加する

まずは、スタート画面にボタンを配置します。
スタート画面に対応する画面レイアウトファイルのactivity_start.xmlを開きます。
ここでは、スタート画面に「使い方」のイメージボタンを配置していきます。 ボタン画像は、STEP1で手に入れたbutton_howto.pngを使用します。

step2-2-09

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

RelativeLayout上へのビューの配置方法についてはこちらを参考にしてください。
今回は、すでに配置されている「おみくじを引く」ボタンの真上に、ボタンの右端に合わせるように配置します。
PaletteからImageButtonをクリックし、 以下の図のようにalignParentRight above=buttonStartが表示されたらクリックを離します。

drag-buttonHowTo-on-layout-activity-start

クリックを離すと、以下のように画像が設定されていないイメージボタンが配置されます。

drag-buttonHowTo-on-layout-activity-start-result

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

次に、イメージボタンに対する属性を設定します。
先ほどのイメージボタンの設定と同様の方法で、属性id、src、background、scaleTypeに以下の値を設定します。

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

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

add-properties-of-the-buttonHowTo

使い方画面の画面レイアウトを修正する

次に使い方画面の画面レイアウトを設定します。先ほど作成したactivity_how_to.xmlを開いてください。 今回は、背景画像の設定とイメージボタンを1つ配置します。以下の手順に沿って進めていきましょう。

テキストビューの削除

初期状態でテキストビューが1つ配置されているので、 テキストビューを選択し、「Delete」キーを押してテキストビューを削除します。

RelativeLayoutの属性を設定

次に、RelativeLayoutの属性を変更します。
Component TreeからRelateveLayoutをクリックして、RelativeLayoutが選択されている状態にしましょう。

RelativeLayoutをクリックしたら、画面右下のPropertiesの確認をして下さい。 background属性に以下の値を設定します。

項目 設定内容 備考
background @drawable/background_howto レイアウトの背景画像を設定します。

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

add-background-of-layout-howto

イメージボタンの配置

RelativeLayout上へのビューの配置方法についてはこちらを参考にしてください。
今回は、横方向は親のレイアウトの中央、縦方向は親のレイアウトの下端に配置します。
PaletteからImageButtonをクリックし、 以下の図のようにcenterHorizontal alignParentBottomが表示されたらクリックを離します。

drag-buttonBack-on-layout-activity-howto

正しく配置されると、以下の画面のように配置されます。
イメージボタンにまだ画像を設定していないので、灰色の小さい枠が表示されていると思います。

drag-buttonBack-on-layout-activity-howto-result

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

最後に、イメージボタンの属性を設定します。
イメージボタンをクリックで選択して、Propertiesの項目をイメージボタンの属性一覧に切り替えましょう。
各属性に以下の値を設定します。

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

画面レイアウト編集画面が以下のように変化したら完了です。

add-properties-of-the-buttonBack

画面遷移をしてみよう

使い方画面の画面レイアウトの修正が完了したら、次に画面遷移できるようにしてみましょう。
StartActivityHowToActivityを修正します。

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行目でシェイク画面に遷移するような処理を追加しています。

端末上で確認する

ソースコードの確認ができたら、一度実機上で実行してみましょう。
正しく画面遷移できていれば完了です。

from-start-to-howto-result

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に遷移するようにしています。 ボタンがクリックされたら、使い方画面に遷移するような処理を記述しています。

端末上で確認する

ソースコードの確認ができたら、一度実機上で実行してみましょう。
使い方画面からスタート画面に戻ることができれば完了です。

from-howto-to-start-result
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.