EclipseでJAVAを使ったAndroid開発(パソコンはXP)

神経衰弱アプリを作ってみる

---

５．カードをランダムに並べる処理を追加

前項ではカードをランダムに並べる方法を考えて、さらに下準備としてカードのクラスを作ってみた。
では、いよいよカードをランダムに並べる処理をプログラムに追加してみよう。

ところでカードを並べるといっても、実際には用意したカードの画像をセットする処理になる。
そこでそれらのカード画像をプログラムで利用できるように、例によって「drowable」フォルダにドラッグ＆ドロップで52枚すべての画像を取込むことが必要だ。

なおかつ今回はこの52枚の画像を配列として扱いたいので、ここでちょっとした仕掛けをやっておくことにする。
これまでのように1枚や2枚の画像ならファイル名で扱うことができたけれども、52枚もあったらファイル名で扱うのはやっぱり厳しいものがあるからね。

その仕掛けというのは、次のような手順で行なうのでご注目。
まず、パッケージ・エクスプローラーで「AndroidTest」→「res」→「values」の順にフォルダを開く。

それから「values」をクリックして選択状態にしたら、メニューの「ファイル」から「新規」→「ファイル」と選んでこれをクリックする。

すると「新規ファイル」のダイアログが開くので、ここで
　　ファイル名　→　arrays.xml
として「完了」をクリックしよう。

「values」の下に新規に「arrays.xml」のファイルが作成されてエディタ上に開かれるので、下のタブの「arrays.xml」をクリック。
新規のファイルなので中身が何も無いけれども、そこに以下の内容を記述しよう。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="card_images">
        <item>@drawable/card_c1</item>
        <item>@drawable/card_c2</item>
        <item>@drawable/card_c3</item>
        <item>@drawable/card_c4</item>
        <item>@drawable/card_c5</item>
        <item>@drawable/card_c6</item>
        <item>@drawable/card_c7</item>
        <item>@drawable/card_c8</item>
        <item>@drawable/card_c9</item>
        <item>@drawable/card_c10</item>
        <item>@drawable/card_c11</item>
        <item>@drawable/card_c12</item>
        <item>@drawable/card_c13</item>
        <item>@drawable/card_d1</item>
        <item>@drawable/card_d2</item>
        <item>@drawable/card_d3</item>
        <item>@drawable/card_d4</item>
        <item>@drawable/card_d5</item>
        <item>@drawable/card_d6</item>
        <item>@drawable/card_d7</item>
        <item>@drawable/card_d8</item>
        <item>@drawable/card_d9</item>
        <item>@drawable/card_d10</item>
        <item>@drawable/card_d11</item>
        <item>@drawable/card_d12</item>
        <item>@drawable/card_d13</item>
        <item>@drawable/card_h1</item>
        <item>@drawable/card_h2</item>
        <item>@drawable/card_h3</item>
        <item>@drawable/card_h4</item>
        <item>@drawable/card_h5</item>
        <item>@drawable/card_h6</item>
        <item>@drawable/card_h7</item>
        <item>@drawable/card_h8</item>
        <item>@drawable/card_h9</item>
        <item>@drawable/card_h10</item>
        <item>@drawable/card_h11</item>
        <item>@drawable/card_h12</item>
        <item>@drawable/card_h13</item>
        <item>@drawable/card_s1</item>
        <item>@drawable/card_s2</item>
        <item>@drawable/card_s3</item>
        <item>@drawable/card_s4</item>
        <item>@drawable/card_s5</item>
        <item>@drawable/card_s6</item>
        <item>@drawable/card_s7</item>
        <item>@drawable/card_s8</item>
        <item>@drawable/card_s9</item>
        <item>@drawable/card_s10</item>
        <item>@drawable/card_s11</item>
        <item>@drawable/card_s12</item>
        <item>@drawable/card_s13</item>
    </array>
</resources>

見てお分かりのように、これにはdrawableフォルダに入れた52枚の画像のファイル名を記載してある。
これで、プログラム内で各ファイルを配列として扱う準備の完了だ。

というわけで下準備や仕掛けが完了したところで、実際のプログラムがどうなるかというと以下の通り。
例によって赤字の部分が、今回追加したところ。

package android.test;

import java.util.ArrayList;
import java.util.Collections;

import android.app.Activity;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.Display;
import android.view.Menu;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.TableLayout;
import android.widget.TableRow;

public class AndroidTestActivity extends Activity {
    static final int ROW = 6;   //セルの行数・・・(1)
    static final int COL = 4;   //セルの列数・・・(2)

    //カードの配列
    Card[] card = new Card[ROW*COL];                    //・・・(11)

    @Override
    public void onCreate(Bundle savedInstanceState) {
        //ステータスバーを消去
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);   //・・・(3)
        //タイトルバーを消去
        requestWindowFeature(Window.FEATURE_NO_TITLE);                      //・・・(4)

        super.onCreate(savedInstanceState);

        setCards();                                     //・・・(12)
        TableLayout tableLayout = getTableLayout();     //・・・(5)
        setContentView(tableLayout);                    //・・・(6)
    }

    /**
     * カードの配列にランダムに画像をセット
     */
    private void setCards() {
        //カードの表の画像(配列)
        TypedArray images = getResources().obtainTypedArray(R.array.card_images);

        //imageArrayを使って、すべての画像番号をシャッフルする
        ArrayList<Integer> imageArray = new ArrayList<Integer>();
        for ( int i = 0; i < images.length(); i++ ) {
            imageArray.add(i);
        }
        Collections.shuffle(imageArray);

        //cardArrayを使って、カードの数分の画像番号をペアで取り出しシャッフルする
        ArrayList<Integer> cardArray = new ArrayList<Integer>();
        for ( int i = 0; i < ROW*COL/2; i++ ) {
            cardArray.add(imageArray.get(i));
            cardArray.add(imageArray.get(i));
        }
        Collections.shuffle(cardArray);

        //カードの配列に、シャッフルした画像番号と画像をセットする
        for (int i=0; i < ROW*COL; i++) {
            card[i] = new Card(
                            cardArray.get(i),
                            images.getDrawable(cardArray.get(i))
                        );
        }
    }

    /**
     * テーブルレイアウトを返却
     * @return TableLayout
     */
    private TableLayout getTableLayout() {
        int cellNum = ROW * COL;    //全体のセルの数
        TableLayout tableLayout = new TableLayout(this);
        TableRow tableRow = null;
        for (int i = 0; i < cellNum; i++) {
            if (i % COL == 0) {
                tableRow = new TableRow(this);
                tableLayout.addView(tableRow);
            }
            Button button = new Button(this);
            button.setId(i);                    //・・・(7)
            button.setHeight(getCellHeight());  //・・・(8)
            button.setWidth(getCellWidth());    //・・・(9)
            //ボタンに裏面の画像をセット
            button.setBackgroundDrawable(
                getResources().getDrawable(R.drawable.card_back)
            );
            setEvent(button);                   //・・・(10)
            tableRow.addView(button);
        }
        return tableLayout;
    }

    /**
     * 行数と画面の幅からセルの高さを算出
     * @return セルの高さ
     */
    private int getCellHeight() {
        WindowManager windowManager = getWindowManager();
        Display display = windowManager.getDefaultDisplay();
        return display.getHeight() / ROW;
    }

    /**
     * 列数と画面の幅からセルの幅を算出
     * @return セルの幅
     */
    private int getCellWidth() {
        WindowManager windowManager = getWindowManager();
        Display display = windowManager.getDefaultDisplay();
        return display.getWidth() / COL;
    }

    /**
     * 各ボタンビューにイベントをセット
     * @param button
     */
    private void setEvent(Button button) {
        //タップ時の動作
        button.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                Button button = (Button)v;
                button.setBackgroundDrawable(
                    getResources().getDrawable(R.drawable.card_open)
                );
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_android_test, menu);
        return true;
    }
}

/**
 * カードのクラス
 */
class Card {
    private int imgNo;          //画像番号
    private Drawable cardImg;   //画像

    Card(int imgNo, Drawable cardImg) {
        this.imgNo = imgNo;
        this.cardImg = cardImg;
    }

    int getImgNo() {
         return imgNo;
    }

    Drawable getCardImg() {
         return cardImg;
    }
}

まず最初に、一番下の部分に注目して頂きたい。
ここが前回の項で下準備として作った、カードのクラスの定義だね。

そしてこのカードのクラスを使って配列の宣言をしたのが、ずーっと上に戻ってプログラムの先頭の辺りの(11)のところ。
　　Card[] card = new Card[ROW*COL];
見つかったかな？ここで、カードのクラスを使ってROW*COL=6×4=24個の配列「card」を宣言している。

つまりどういうことかというと、「Card」クラスのオブジェクトが24個入る場所を確保したってこと。
ただし場所を確保しただけで、cart[0]～card[23]の配列の各要素についてはまだオブジェクトが生成されていないので要注意。

ではその各要素のオブジェクトはどこで生成しているのか？それは、その少し下の(12)の行を見て頂きたい。
　　setCards();
この「setCards」というメソッドの中でやってるんだけれども、具体的な内容は・・・というところで長くなってきたので本項は終了。
続きは次項にて！余裕のある人はプログラムをジックリ見ておくと、次からの内容が分かりやすくなるぞーガンバレ。

---

1. JDK(Java Development Kit)をインストール
   
2. Android SDK(Software Development Kit)をインストール
   
3. JDKとSDKの環境変数を設定
   
4. Eclipseインストール
   
5. EclipseにADT(Android Development Tools) Pluginをインストール
   
6. Android SDKパッケージをインストール
   
7. AVD(Android Vertial Device)を作成
   

1. まず作業の前に、AVDを日本語表示に
   
2. 新規プロジェクトの作成
   
3. アプリの実行
   

1. AVDの画面に表示された文字の元はどこにあるのか？
   
2. AVDの画面にボタンを表示させる
   
3. プログラムを変更してみる
   
4. 変更したプログラムを実行してみる
   

1. イメージを決めて、早速コードを書き始めてみよう
   
2. 画面にカードを並べてみよう
   
3. 並べたカードをめくるには
   
4. カードをランダムに並べる方法を考えて、ついでにカードのクラスも作ってみる
   
5. カードをランダムに並べる処理を追加
   
6. 実はこれがカードをランダムに並べるメソッドだったのだ
   
7. カードのクラスを材料にオブジェクト指向を少しだけお勉強
   
8. 並べたカードを表示する
   
9. カードをタップして表にしたり裏にしたり
   
10. カードの一致をプログラムで判定させる
    

前のページ 次のページ