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

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

２．画面にカードを並べてみよう

それではアプリの画面を広く用意したので、早速ここにカードを並べてみることにしよう。
なにしろ神経衰弱だから、カードを並べないことには話が始まらないからね。

まずは画面に並べるための、カードの画像を用意するところからスタート。
これは自分で画像ソフトとかを使って地道に作ってもいいのだけれども、一応こちらでも用意したのでそれを使うのも良し。

右クリック(対象をファイルに保存)等でダウンロード　→　カードの画像
ちなみに、これはカードの裏面をイメージして作った画像だ。

さて画像を用意したら、それをプログラムで利用できるようにしなければならない。
そこで、eclipseにこの画像を取り込むことにしよう。

まずはeclipseのパッケージ・エクスプローラーで、「AndroidTest」→「res」の順に開く。
そして「res」をクリックして選択状態にしたら、メニューの「ファイル」から「新規」→「フォルダー」と選んでこれをクリックする。

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

次に「res」の下に新規に「drawable」のフォルダーができるので、ここに用意したカードの画像を入れる。
入れ方はとても簡単で、エクスプローラ等からこのフォルダーに画像をドラッグ＆ドロップするだけ。

そうすると「ファイル操作」のダイアログが開くので、「ファイルをコピー」を選んで「OK」をクリックする。

eclipseのパッケージ・エクスプローラーの「drawable」をダブルクリックしてみると、画像がとりこまれたことが分かるね。
画像取り込み結果

さー画像も用意できたし、いよいよプログラムでこれを表示することにしよう。
すでに「AndroidTestActivity.java」を開いてる人はそのまま、そうでない人は開いてからプログラムに以下のようにコードを追加するべし。


package android.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.Display;
import android.view.Menu;
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)

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

        super.onCreate(savedInstanceState);

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

    /**
     * テーブルレイアウトを返却
     * @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)
            );
            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;
    }

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

この赤字の部分が今回の追加コードでチョット長いように思えるけれども、肝心なのは(5)と(6)のところだけ。
それ以降の部分は(5)(6)の詳細を記述しているだけなので、たった2行だと思って軽い気分で見てみよう。

では追加した部分は結局何をするコードなのか？と言うと、４×６のテーブルに画像を配置して、それを画面に表示しているんだね。
まず(5)でテーブルを用意して、(6)で表示しているわけ。

ところでテーブルっていうのはご飯を食べる食卓のことではなくて、要素が格子状に配列されたレイアウトのことだから念のため。
おなかが空いてても、今はご飯のことは忘れよう。

さて本題に戻って(5)の意味だけれども、これは「TableLayoutクラス」の変数を作って、それに「getTableLayout()」というメソッドで作成したテーブルを渡しているんだね。
そして「getTableLayout()」というメソッドは、その下に記述してある。

このメソッドにおいて重要なのは、「TableLayout」は「TableRow」という行を表すクラスで作られるってこと。
つまりテーブル(TableLayout)を作るには、テーブルの行(TableRow)を作って、それを下へ並べていくようなイメージかな。

というわけで、「getTableLayout()」の中身を見てみよう。
まず最初に「cellNum」という、テーブル全体のセルの数を計算している。

そしてその下でfor文を使って、iが0から(cellNum-1)の間で繰り返す処理を行っている。
この繰り返しの処理に、注目してみよう。

最初のif文の
　　if (i % COL == 0)
という条件で、テーブルの行(TableRow)を作っている。
つまり、カウンタのiが列数COLの倍数になるタイミングで行を生成しているわけ。

テーブルを作るには、テーブルの行を作って、それを下へ並べていくっていうイメージをここで思い出して欲しい。
そして、作った行にボタン(Button)をセットしている処理が、この後に続いている。

ここで急にボタンなんかが出てきてビックリしたかもしれないけれども、今回はカードをボタンで表すことにしたんだね。
今回のようにボタンを使う以外に他にもやり方はいろいろあるので、その辺を調べて試してみるのも勉強になるぞ。

勉強を人に押し付けたところで、話をプログラムに戻そう。
カード表示用にボタンを作ったら、(7)でそれぞれのボタンが識別できるようにIDをセットしている。

そして(8)と(9)は、ボタンの縦横のサイズをセットしている。
この処理は、下のほうでメソッドとして別に記述してあるけれども、内容はそれほど難しくないはず。

画面のサイズをテーブルの行と列のそれぞれの値で割って、ボタンのサイズを計算してるだけだ。
まぁ賢明なる貴殿には、敢えて説明するまでもないだろう。

続いて「setBackgroundDrawable」でボタンに画像をセットしてるんだけれども、注目して欲しいのはその引数。
　　getResources().getDrawable(R.drawable.card_back)
これで「drawable」フォルダに入れた画像「card_back.png」を取得してるんだね。

最後に「addView」で「tableRow」にボタンをセットして、以上の処理をcellNumの値だけ繰り返しているというわけ。
出来上がったテーブルのイメージは、こんな感じだ。

ボタン0	ボタン1	ボタン2	ボタン3
ボタン4	ボタン5	ボタン6	ボタン7
ボタン8	ボタン9	ボタン10	ボタン11
ボタン12	ボタン13	ボタン14	ボタン15
ボタン16	ボタン17	ボタン18	ボタン19
ボタン20	ボタン21	ボタン22	ボタン23

ボタンのIDが0から始まっていることに注意。

とまーザッと内容が分かったところで、いよいよ実際にプログラムを実行してみよう。
AVDを使った実行方法は、既にご承知のことと思うので特に説明は無し。

結果はこんなふうになったはずなので、ご確認あれ。
ようやく神経衰弱の形になってきたかな、って感じでしょ。
AVD実行結果

次項では、カードをめくる処理を追加してみよう。
乞うご期待。

まずは開発環境作り

Eclipseで新規プロジェクトを作成する

デフォルトのプログラムを変更してみる

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

前のページ次のページ

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

開発とかやったことなくても多分できる、アンドロイド・アプリの作り方

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

２．画面にカードを並べてみよう