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

STEP6.おみくじの結果をランダムで表示してみよう

概要

おみくじの結果をランダムで表示できるようにし、何度でも遊べるようにする。
また、おみくじ結果表示時にBGMを鳴らすようにする。

目次

このステップのポイント

  • おみくじをランダムで表示できるようにする
  • 音声データを読み込み、音声データを鳴らす
  • 画面の向きを固定にする方法を覚える

おみくじ結果の画面レイアウトを修正する

前のSTEPで、おみくじ結果画面まで画面遷移できるようになりました。
しかし、今の設定のままですとおみくじの結果が大吉しかでないため、 このステップでおみくじの結果をランダムで表示できるようにします。

まずは、STEP5で修正したactivity_result.xmlを開いてください。

PropertiesからRelativeLayoutのbackground属性の設定値を削除します。
背景画像が消えたことが確認できたら完了です。

delete-background-of-layout-result

背景にランダムでおみくじの結果に対応した画像を設定するといった処理は、 画面レイアウトファイル側でおこなうことはできません。
ランダムでおみくじを表示する処理は動的処理になりますので、 おみくじ画面に対する動的処理を設定するアクティビティファイルの ResultActivityで設定することになります。

おみくじ結果画面をランダムに表示しよう

前述の通り、動きのある処理を実装するためにはアクティビティファイル側で 修正をおこないます。
ResultActivityを開いてください。

ソースコードを修正する

ResultActivityの記述を一旦全て削除し、以下のソースコードをコピー&ペーストで貼り付けます。

[修正] ResultActivity

[フォルダ] java/com.school.it.kanda.kandaomikuji 

package com.school.it.kanda.kandaomikuji;


import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.RelativeLayout;

import java.util.Random;


public class ResultActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_result);

        //ランダムな背景画像を設定
        setBackGroundView();
    }

    /**
     * おみくじの結果を背景画像にセットするメソッド
     * @return なし
     */
    private void setBackGroundView() {

        //リレーティブレイアウトに設定したid属性から、リレーティブレイアウトの情報を取得する
        RelativeLayout relativeLayout = (RelativeLayout) findViewById(R.id.layoutResult);

        //おみくじ用の画像IDを格納する配列
        //{大吉、中吉、小吉、吉、末吉、凶、大凶}
        final int[] omikujiResult =
                {R.drawable.result1,R.drawable.result2, R.drawable.result3,R.drawable.result4,
                 R.drawable.result5, R.drawable.result6,R.drawable.result7};

        //ランダムな数字を出力する
        Random random = new Random();
        int randNum = random.nextInt(omikujiResult.length);

        //リレーティブレイアウトにおみくじの画像をセットする
        relativeLayout.setBackgroundResource(omikujiResult[randNum]);

    }

}

18～19行目、22～44行目に画面にランダムな背景画像を設定する処理を追加しました。
コンピュータがランダムな数字を生成し、その数字に応じた背景画像をRelativeLayoutに セットするような処理をおこなっています。

実機で実行結果を確認する

ソースコードの確認ができたら、一度実機上で実行してみましょう。
画面レイアウトファイルに背景を設定していなくても、実際に画面が表示できていれば完了です。
また、再度実行しおみくじの結果がランダムで表示されていることも確認してください。

■大吉の場合

step7-s4-result1

■中吉の場合

step7-s4-result2

おみくじ結果画面表示時に音を鳴らしてみよう

先ほどの処理に加え、さらにおみくじ結果画面を表示したときに音がなるようにしてみましょう。
音声データはSTEP1で格納したbgm.mp3を使用します。

ソースコードの修正

ResultActivityの記述を一旦全て削除し、以下のソースコードをコピー&ペーストで貼り付けます。

[修正] ResultActivity

[フォルダ] java/com.school.it.kanda.kandaomikuji 

package com.school.it.kanda.kandaomikuji;


import android.media.AudioManager;
import android.media.SoundPool;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.RelativeLayout;

import java.util.Random;


public class ResultActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_result);

        //ランダムな背景画像を設定
        setBackGroundView();

        // 音声データを読み込む
        SoundPool soundPool = new SoundPool(1, AudioManager.STREAM_MUSIC,0);
        soundPool.load(getApplicationContext(), R.raw.bgm, 0);

        //音楽を鳴らす
        soundPool.setOnLoadCompleteListener(new SoundPool.OnLoadCompleteListener() {
            @Override
            public void onLoadComplete(SoundPool soundPool, int sampleId, int status) {
                if (0 == status) {
                    soundPool.play(sampleId, 1.0F, 1.0F, 0, 0, 1.0F);
                }
            }
        });
    }

    /**
     * おみくじの結果を背景画像にセットするメソッド
     * @return なし
     */
    private void setBackGroundView() {

        //リレーティブレイアウトに設定したid属性から、リレーティブレイアウトの情報を取得する
        RelativeLayout relativeLayout = (RelativeLayout) findViewById(R.id.layoutResult);

        //おみくじ用の画像IDを格納する配列
        //{大吉、中吉、小吉、吉、末吉、凶、大凶}
        final int[] omikujiResult =
                {R.drawable.result1,R.drawable.result2, R.drawable.result3,R.drawable.result4,
                 R.drawable.result5, R.drawable.result6,R.drawable.result7};

        //ランダムな数字を出力する
        Random random = new Random();
        int randNum = random.nextInt(omikujiResult.length);

        //リレーティブレイアウトにおみくじの画像をセットする
        relativeLayout.setBackgroundResource(omikujiResult[randNum]);

    }

}

23行目から35行目に記述を追加しました。
この画面に遷移したときに、音声データを読み込み、音声データが読み込みが完了したらBGMを鳴らすように設定しています。

実機で実行結果を確認する

ソースコードの確認ができたら、一度実機上で実行してみましょう。
おみくじ結果画面に遷移したときに、BGMが再生されたことが確認できれば完了です。

何度でも遊べるようにしてみよう

最後に、「もう一度」ボタンを押下したときに、スタート画面へ画面遷移できるようにし、何度でも遊べるようにしましょう。

ソースコードの修正

ResultActivityの記述を一旦全て削除し、以下のソースコードをコピー&ペーストで貼り付けます。

[修正] ResultActivity

[フォルダ] java/com.school.it.kanda.kandaomikuji 

package com.school.it.kanda.kandaomikuji;


import android.content.Intent;
import android.media.AudioManager;
import android.media.SoundPool;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.RelativeLayout;

import java.util.Random;


public class ResultActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_result);

        //ランダムな背景画像を設定
        setBackGroundView();

        // 音声データを読み込む
        SoundPool soundPool = new SoundPool(1, AudioManager.STREAM_MUSIC,0);
        soundPool.load(getApplicationContext(), R.raw.bgm, 0);

        //音楽を鳴らす
        soundPool.setOnLoadCompleteListener(new SoundPool.OnLoadCompleteListener() {
            @Override
            public void onLoadComplete(SoundPool soundPool, int sampleId, int status) {
                if (0 == status) {
                    soundPool.play(sampleId, 1.0F, 1.0F, 0, 0, 1.0F);
                }
            }
        });

        //イメージボタンに設定したid属性から、もう一度のイメージボタンの情報を取得する
        ImageButton buttonRetry = (ImageButton) findViewById(R.id.buttonRetry);

        //イメージボタンの情報とボタンがクリックされたときの処理を関連付ける
        buttonRetry.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {

                //StartActivityに遷移するように設定
                Intent intent = new Intent(getApplicationContext(), StartActivity.class);

                //インテントの開始
                startActivity(intent);

                //ResultActivityの終了
                finish();
            }
        });
    }

    /**
     * おみくじの結果を背景画像にセットするメソッド
     * @return なし
     */
    private void setBackGroundView() {

        //リレーティブレイアウトに設定したid属性から、リレーティブレイアウトの情報を取得する
        RelativeLayout relativeLayout = (RelativeLayout) findViewById(R.id.layoutResult);

        //おみくじ用の画像IDを格納する配列
        //{大吉、中吉、小吉、吉、末吉、凶、大凶}
        final int[] omikujiResult =
                {R.drawable.result1,R.drawable.result2, R.drawable.result3,R.drawable.result4,
                 R.drawable.result5, R.drawable.result6,R.drawable.result7};

        //ランダムな数字を出力する
        Random random = new Random();
        int randNum = random.nextInt(omikujiResult.length);

        //リレーティブレイアウトにおみくじの画像をセットする
        relativeLayout.setBackgroundResource(omikujiResult[randNum]);

    }

}

40行目から58行目に記述を追加しました。
イメージボタンに設定したIDから情報を受け取り、ボタンが押下されたときにスタート画面に遷移できるようにしています。

実機で実行結果を確認する

ソースコードの確認ができたら、一度実機上で実行してみましょう。
ボタンを押下したときに、スタート画面に遷移できれば完了です。

from-result-to-start-result

画面を縦向きに固定しよう

最後に、画面を縦向きに固定してみましょう。
現在の状態では、端末を横向きにしたときに、画面も横向きになってしまい、レイアウトが崩れてしまっていることが確認できます。
端末を横にしても画面を縦向きに固定するためにはAndroidManifest.xmlで設定をおこなう必要がございます。

ソースコードの修正

AndroidManifest.xmlの記述を一旦全て削除し、以下のソースコードをコピー&ペーストで貼り付けます。

[修正] AndroidManifest.xml

[フォルダ] manifests 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.school.it.kanda.kandaomikuji" >

    <uses-permission android:name="android.permission.VIBRATE" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".StartActivity"
            android:screenOrientation="portrait"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".ShakeActivity"
            android:screenOrientation="portrait"
            android:label="@string/title_activity_shake" >
        </activity>
        <activity
            android:name=".SwipeActivity"
            android:screenOrientation="portrait"
            android:label="@string/title_activity_swipe" >
        </activity>
        <activity
            android:name=".ResultActivity"
            android:screenOrientation="portrait"
            android:label="@string/title_activity_result" >
        </activity>
    </application>

</manifest>

各アクティビティの項目にandroid:screenOrientation=”portrait”という記述が追加されています。 screenOrientationは画面の向きを固定するための属性で、portraitは縦向きの設定値です。
ちなみに、横向きで固定したい場合はlandscapeを設定します。

実機で実行結果を確認する

端末上で確認し、端末を横にしても画面が縦向きのままであることを確認できたら完了です。

以上で、おみくじアプリケーションは完成です。お疲れ様でした！

≪ おみくじ結果画面を表示してみよう
使い方画面を表示してみよう（オプション） ≫
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.