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

STEP3.シェイク画面を表示してみよう

概要

シェイク画面を新しく作成し、スタート画面から「おみくじを引く」ボタンを押下したときに シェイク画面へ遷移するようにする。

目次

このステップのポイント

  • 新しいファイルの作成方法を覚える
  • インテントの仕組みを知る
  • 画面レイアウトとアクティビティの役割について知る
  • インテントを使った画面遷移方法を覚える

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

このステップではシェイク画面の作成をおこないます。
新しい画面を作成する前に、まずは新しい画面を作成するために必要な ファイルをプロジェクト内に新規作成します。
ファイルの作成は以下の手順に沿って進めてください。

新規アクティビティ作成を選択する

Project内のappフォルダを右クリックし、 「新規」>「Activity」>「Blank Activity」をクリックします。

make-new-activity

新しいアクティビティ名を設定する

Customize the Activityという画面が表示されます。
項目の中から一番上のActivity Nameを以下の内容を設定します。
※他の項目はActivity Nameを変更すると自動的に変わります。

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

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

ファイルの確認

「終了」をクリックすると、ウインドウが閉じます。ウインドウを閉じたらプロジェクトの構成を 確認してみてください。
以下の画面のように新しく「ShakeActivity」という名前のアクティビティファイルが作成されているのが確認できます。
同様に、画面レイアウトファイル「activity_shake.xml」が作成されていることが確認できます。

Make-ShakeActivity-result

ファイルの構成について

ここでそれぞれのファイルがどのような役割を持っているのか一度確認しましょう。
今回、新しくアクティビティファイルと画面レイアウトファイルを作成しましたが、 この2つのファイルはそれぞれ以下のような役割を持っています。

step3-relative-activity-layout

イメージ的には、画面の基底となるアクティビティの上に画面レイアウトファイルが 重なっているという形で考えてもらって結構です。
この2つのファイルが合わさり、動きのある一つの画面が完成します。

シェイク画面の画面レイアウトを修正する

シェイク画面のファイルを新しく作成したら、先ほど作成したactivity_shake.xmlを修正します。
activity_shake.xmlを開いてください。

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

最初に、スタート画面の画面レイアウトを修正した時と同様に、テキストビューが1つ配置されているので、 テキストビューを選択し、「Delete」キーを押してテキストビューを削除します。

今回作成するシェイク画面は画面の背景のみを設定します。RelativeLayoutの属性を以下の表にしたがって変更してみましょう。

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

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

add-background-of-layout-shake

画面遷移をしてみよう

シェイク画面の画面レイアウトの修正が完了したら、次に画面遷移できるようにしてみましょう。
Androidアプリケーションで画面を遷移するには、インテントという仕組みを利用する必要があります。

インテントとは

インテント(Intent)とは、ある画面から他の画面へ遷移したり、遷移先にデータの受け渡しなどをおこなう、Android独特の仕組みです。
インテントはAndroidを学習する中で特に必要不可欠で、Androidアプリケーションを作成するときには数多くの場面で使用します。
例えば、ある画面にボタンを配置して、ボタンを押したときに別の画面を表示させるような処理を実装するにはインテントを使用します。

インテントには大きく分けて2種類あり、必ず1つの決まったアクティビティに遷移させる場合と、 遷移先をどのアプリケーションで開くかをユーザーに選ばせる場合の2つがあります。
今回は前者を使用します。このようにあるアクティビティから決まった1つのアクティビティへの画面遷移を 明示的インテントといいます。

インテントは動的な処理をおこなうものですので、アクティビティファイル内で設定します。
また、インテントは遷移元の画面で設定する必要があります。

スタート画面のアクティビティファイルを修正する

シェイク画面の画面レイアウトを修正したら、次にスタート画面からシェイク画面へ画面遷移できるようにしましょう。
遷移元がスタート画面ですので、スタート画面に対するアクティビティファイルの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 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の17行目から35行目に記述が追加されたことが確認できます。
17行目から35行目でシェイク画面に遷移するような処理を追加しています。

17行目から35行目までの間で、buttonStartというidがつけられたボタンがクリックされたとき処理をおこなうように記述しています。
その中でクリックした後にどのような処理を行うのかを記述した部分が26行目から33行目になります。 ボタンがクリックされたら、使い方画面に遷移するような処理を記述しています。

実機で実行結果を確認

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

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