こんにちは!草もちです。
じめじめした天気が続いていますね💦
インスタ映えを求めてタピオカミルクティの列に並ぶ皆さま、
熱中症には気を付けてくださいね😃
ちなみにドトールがタピオカドリンク発売したのですが、全然人並ばないしお値段お手頃だしタピオカ大きいし、一押しですよ~!
さて、
今回はスロットアプリの実装方法について説明していきます。
このアプリの仕様を今一度説明すると、
スロットアプリの仕様
- 3つの画像と、各画像の下にボタンがある
- 各画像はボタンが押されるとランダムに変化する
- ボタンは1クール中では1回押すと無効になる
- 3つのボタンを1回ずつタップしたら1クール終了
- 3つの画像が揃わなかった場合は「もう一回!」ボタンが出現して、ボタンをタップすると初期化される
- 3つの画像が揃った場合は「おめでとう!」文字列が出現して、「もう一回!」ボタンをタップすると初期化される
大まかな流れ
流れとしては
- レイアウトで画像の位置を決めて、その場所に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に用意する機能は
- スロット画面を作る、幹となる機能
- スロット画像を設定する機能
- 3つの画像が揃ったか判定する機能
です。
それぞれの機能について説明していきましょう。
スロット画面を作る機能
スロット画面を作る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);
次に、各ボタンの押下時の動作を記述していきます。
流れとしては以下の通り。
スロットボタンの動作
- スロット画像場所に数値を乱数メソッドから割り当てる
- その数値に該当する画像を表示させる
- ボタンを押下できないようにする
「もう一回!」ボタンの動作
- 画像をとボタンを初期化する
それぞれのコードをみていきましょう。
まずは各スロット画像に割り当てる変数と「もう一回!」ボタンの変数を設定します。
後の”3つの画像が揃ったか判定するクラス”でも使用する変数なので、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メソッド内で、0~2範囲で生成した乱数の数値を各スロット画像場所に割り当てて、
後に記述する、”スロット画像を設定する”機能(=getDrawableIdメソッド)と”3つの画像が揃ったか判定する”機能(=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します。
3つの画像が揃ったか判定する機能
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); } }
割り振られた数値が揃ったら、画面の下に”おめでとう!”のToast表示と「もう一回!」ボタンを非表示から表示に変更します。
揃わなかった場合は「もう一回!」ボタンの表示のみ、行います。
実際に動かしてみた!★
※クリックすると拡大して動き始めるよ
動いてる動いてる🐣🐣🐣感動~!
最後に。
どうでしたか??
今回、繰り返しの動作はまとめて記述しました。
動作ごとにメソッドを大きく分けたほうがわかりやすくて間違いも少なくなるので、今後も心掛けていきたいと思います!
参照までに、全体のコードをまとめておきますね🐣✨