第４回PG初心者がAndroidStudioでアプリ開発してみた～実装ってどうやるの？？～

こんにちは！草もちです。

じめじめした天気が続いていますね💦

インスタ映えを求めてタピオカミルクティの列に並ぶ皆さま、

熱中症には気を付けてくださいね😃

ちなみにドトールがタピオカドリンク発売したのですが、全然人並ばないしお値段お手頃だしタピオカ大きいし、一押しですよ～！

さて、

今回はスロットアプリの実装方法について説明していきます。

このアプリの仕様を今一度説明すると、

スロットアプリの仕様

３つの画像と、各画像の下にボタンがある
各画像はボタンが押されるとランダムに変化する
ボタンは1クール中では１回押すと無効になる
３つのボタンを１回ずつタップしたら１クール終了
３つの画像が揃わなかった場合は「もう一回！」ボタンが出現して、ボタンをタップすると初期化される
３つの画像が揃った場合は「おめでとう！」文字列が出現して、「もう一回！」ボタンをタップすると初期化される

大まかな流れ
画像の配置
1. スロット画像場所のid指定方法
実装
実際に動かしてみた！★
最後に。

大まかな流れ

流れとしては

レイアウトで画像の位置を決めて、その場所にidを振る
Javaクラスで動きを実装する

とういう感じ。

画像の配置

app/res/layout配下にあるactivity_main.xmlファイルにてWedget(ImageViewやbuttonなどの総称)を配置します。

私の場合、Designでの最初の置き方は適当にして、textでレイアウト使って細かい場所を指定しています。

こっちのほうが正確だし、早い気がします。

レイアウトの使い方については過去の記事を参照してください！

ちなみに、今回はRelativeLayoutを使用しています。

スロット画像場所のid指定方法

各スロット画像場所を選択して、右に出てくる設定画面のAll Attributesのid項目にそれぞれidを指定します。

今回のそれぞれのidは、

スロット画像場所(画面左から順に)

slotimageid1、slotimageid2、slotimageid3

スロットボタン(画面左から順に)

slotbutton1、slotbutton2、slotbutton3

もう一回ボタン

retrybutton

って指定しました！

この時、各スロット画像場所に初期画像を指定しておきましょう。

All AttributesのsrcCompat項目に、@android:drawable/”画像名”で指定できます。

今回使用する画像名は以下の通り。

画像種類	ファイル名
スタート画像	start1
中華料理画像	chuka.jpg
タイ料理画像	pakutii.jpg
イタリアン料理画像	itarian.jpg

初期画像にはスタート画像を設定したいので、

@android:drawable/start1と書きます。

実装

ここからはapp/java配下にあるMainActivity.javaを編集していきます。

MainActivityに用意する機能は

スロット画面を作る、幹となる機能
スロット画像を設定する機能
３つの画像が揃ったか判定する機能

です。

それぞれの機能について説明していきましょう。

スロット画面を作る機能

スロット画面を作るonCreateメソッドを作ります。

中身を順番に説明していきますね。

Wedget場所を変数に置き換える

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final ImageView slotImage1 = (ImageView) this.findViewById(R.id.slotimageid1);
        final ImageView slotImage2 = (ImageView) this.findViewById(R.id.slotimageid2);
        final ImageView slotImage3 = (ImageView) this.findViewById(R.id.slotimageid3);
        
        final Button b1 = (Button) this.findViewById(R.id.slotbutton1);
        final Button b2 = (Button) this.findViewById(R.id.slotbutton2);
        final Button b3 = (Button) this.findViewById(R.id.slotbutton3);
        retryButton = (Button) this.findViewById(R.id.retrybutton);

まず、各id付けしたスロット画像場所、スロットボタン場所を変数に置き換えます。

ボタン押下後の動作を記述する

次に各ボタンについて記述していきましょう。

まず、「もう一回！」ボタンは初期画面では表示されないので、非表示に設定しておきましょう。

retryButton.setVisibility(View.INVISIBLE);

次に、各ボタンの押下時の動作を記述していきます。

流れとしては以下の通り。

スロットボタンの動作

スロット画像場所に数値を乱数メソッドから割り当てる
その数値に該当する画像を表示させる
ボタンを押下できないようにする

「もう一回！」ボタンの動作

画像をとボタンを初期化する

それぞれのコードをみていきましょう。

まずは各スロット画像に割り当てる変数と「もう一回！」ボタンの変数を設定します。

後の”３つの画像が揃ったか判定するクラス”でも使用する変数なので、MainActivityのフィールドとして記述します。

int slotnum1 = -1; 
int slotnum2 = -1; 
int slotnum3 = -1;
Button retryButton;

次に各ボタンの機能を書いていきましょう。

スロットボタンの動作

        final Random r = new Random();
        b1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                slotnum1 = r.nextInt(3);
                slotImage1.setImageResource(getDrawableId(slotnum1));
                checkSlot();
                b1.setEnabled(false);
            }
        });

onClickメソッドの前に乱数を生成するクラスを宣言。

onClickメソッド内で、０～２範囲で生成した乱数の数値を各スロット画像場所に割り当てて、

後に記述する、”スロット画像を設定する”機能(＝getDrawableIdメソッド)と”３つの画像が揃ったか判定する”機能(＝checkSlotメソッド)を実行します。

最後に、ボタンを無効化します。

「もう一回！」ボタンの動作

        retryButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                slotImage1.setImageResource(R.drawable.start1);
                slotImage2.setImageResource(R.drawable.start1);
                slotImage3.setImageResource(R.drawable.start1);
                b1.setEnabled(true);
                b2.setEnabled(true);
                b3.setEnabled(true);
                retryButton.setVisibility(View.INVISIBLE);
                slotnum1 = slotnum2 = slotnum3 = -1;
            }
        });

各スロット画像場所に初期画像のスタート画像を設定し、ボタンを有効化します。

その後、「もう一回！」ボタンを非表示にして、各スロット画像場所に割り当てた数値をリセットします。

スロット画像を設定する機能

    private int getDrawableId(int num) {
        int drawableId = -2;
        if (num == 0) {
            drawableId = R.drawable.chuka;
        } else if (num == 1) {
            drawableId = R.drawable.pakutii;
        } else if (num == 2) {
            drawableId = R.drawable.itarian;
        }
        return drawableId;
    }

割り当てられた数値によって画像を指定し、画像が指定されたスロット画像場所をreturnします。

３つの画像が揃ったか判定する機能

    private void checkSlot() {
        if (slotnum1 == slotnum2 && slotnum1 == slotnum3) {
            Toast t = Toast.makeText(getApplicationContext(), "おめでとう！", Toast.LENGTH_SHORT);
            t.show();
            retryButton.setVisibility(View.VISIBLE);
        } else if (slotnum1 != -1 && slotnum2 != -1 && slotnum3 != -1) {
            retryButton.setVisibility(View.VISIBLE);
        }
    }