Animals_step1 - Infty Project

GUI プログラミング第 2 回演習 Animals
～画像描画と音声再生：動物が増える、鳴く～
学習キーワード：イベント（ActionEvent, MouseEvent）、レイアウト、
可変長配列（List）
、継承、例外処理、タイマー処理
ワン
ニャー
カー
＜Animals サンプルのステップ＞
今回のサンプルは、ステップ１からステップ３まで各自順に進めていく。Step３までできた人は発展課
題に挑戦してみてください。
Step 1 動物が増える
Step 2 動物が鳴く
Step 3 動物が鳴く間の画像が切り替わる
発展課題その１動物をドラッグで動かす
発展課題その２動物のサイズを自由に指定する
＜Eclipse の起動＞
• eclipse.zip を D:ドライブにコピーし、右クリック→ここに解凍
• workspace を S:ドライブから D:ドライブにコピー
• eclipse.exe を起動
• workspace を D:¥workspace に設定
＜前回課題の解答＞
ア：(frame.getWidth()-180)/2
イ：frame.getHeight()-insets.top-36
カ：(frame.getWidth()-180)/2+90
キ：frame.getHeight()-insets.top-36
サ：frame.getWidth()
シ：frame.getHeight()
ス：frame.getWidth()
１つ目の□：&&
２つ目の□：||
-1-
ウ：80
エ：26
ク：90
ケ：26
セ：frame.getHeight()
【Animals サンプル Step 1】
動物の種類を指定しておいて、クリックした場所に画像を貼り付ける。
＜レイアウトについて＞
前回は、ラベルやボタンの位置を座標で設定した。Absolute Layout を選んだためである。
レイアウトは、どのようにボタンなどのコンポーネントを配置するかを決定するもの。今回は、
・Border Layout
・Flow Layout
を使う。
Flow Layout を指定すると、
ラベルやボタンなどのコンポーネントを追加した順に左から並べていく。
コンポーネント全体は追加したフレームやパネルの中心にセンタリングされる。
フレームの Set Layout から何かレイアウトを指定しなかった場合、デフォルトの Border レイアウト
が有効になる。Border Layout は、次の図のように North,South, West, East, Center の配置属性がある。
North,South は高さを、West, East は幅を指定することができる。残りが Center となる。Center は必
須だが、他はなくてもよい。
＜パネル（JPanel）について＞
Swing には、フレーム(JFrame)の他にコンポーネントを貼り付けられるものとして JPanel というク
ラスがある。ラベルなどを乗せたパネル自体をフレームに貼り付けることができる。また、パネルにも
レイアウトを指定することができる。
今回のサンプルでは、フレームに Border Layout を指定し、North と Center にパネルを置く。Notrth
のパネルには Flow Layout を使い、ラベルとコンボボックス、セパレータを順に置くことにする。
-2-
＜作成手順その１＞
１．Animals プロジェクトを作成
パッケージ・エクスプローラで右クリック→新規→Java プロジェクト
プロジェクト名 Animals
２．パッケージを作成
src フォルダを選択→右クリック→新規→パッケージ
パッケージ名 animals
３．Animals クラスを作成
…描画される動物の属性（種類、中心座標、サイズ）を持つクラス
animals パッケージを選択→右クリック→新規→クラス
クラス名 Animal
４．MainPanel クラスを作成
…JPanel を継承(extends)、MouseListener を実装(implements)した動物描画メソッドを持つクラ
ス。フレームの Center に配置する。
animals パッケージを選択→右クリック→新規→クラス
・クラス名 MainPanel
・スーパークラスの参照をクリック→「JPanel」とうつと、javax.swing の JPanel が出てくるので、
それを選択して OK
・インターフェースの追加をクリック→「MouseListener」で出てくるクラスを選択して OK
※説明のためにコメントが多くあるが、必要以上書かなくてもよい
※クラスの継承※
クラスは親クラス（スーパークラス）を設定して、その子クラス（サブクラス）になることができる。
サブクラスは、スーパークラスの全ての変数（メンバ）と関数（メソッド）を受け継ぐ。
前回の HelloWorldFrame は JFrame クラスのサブクラスである。今回は、JPanel をスーパークラス
として MainPanel をつくる。
JFrame も JPanel も Java が用意してくれているクラスなので、自分で定義したい部分だけ追記する
だけで様々な機能を使うことができるようになる。
public MainPanel extends JPanel implements MouseListener {
サブクラス
スーパークラス
インターフェース
※インターフェース※ implements すると、記述しなければならないメソッドがいくつか出てくる。
ここでは、Mouse のイベントを処理するために必要と考えてください。
-3-
Animal.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
package animals;
import java.awt.Dimension;
import java.awt.Point;
public class Animal {
private int animalType;
private Point centerPoint;
private Dimension size;
// 動物の種類
// 描画される画像の中心座標
// 描画される画像のサイズ
/**
* コンストラクタ<br>
* 動物の種類と画像サイズを指定、座標のデフォルトは画面左上
* @param animalType
* @param width
* @param height
*/
public Animal(int animalType, int width, int height) {
this.animalType = animalType;
size = new Dimension(width, height);
centerPoint = new Point(width/2, height/2);
}
/**
* 指定された(x,y)の点がオブジェクトの画像矩形に含まれるかを返す<br>
* Step2 で使うので用意しておく
* @param x
* @param y
* @return
*/
public boolean contains(int x, int y) {
return centerPoint.x - size.width/2 < x
&& x < centerPoint.x + size.width/2
&& centerPoint.y - size.height/2 < y
&& y < centerPoint.y + size.height/2;
}
/* setter and getter--------------------------------------*/
public int getAnimalType() {
return animalType;
}
public void setAnimalType(int animalType) {
this.animalType = animalType;
}
public Point getCenterPoint() {
return centerPoint;
}
public void setCenterPoint(Point centerPoint) {
this.centerPoint = centerPoint;
}
public void setCenterPoint(int x, int y) {
centerPoint = new Point(x, y);
}
public Dimension getSize() {
return size;
}
public void setSize(Dimension size) {
this.size = size;
}
public void setSize(int width, int height) {
size = new Dimension(width, height);
}
-4-
MainPanel.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
package animals;
import
import
import
import
import
import
import
import
java.awt.Graphics;
java.awt.Graphics2D;
java.awt.SystemColor;
java.awt.event.MouseEvent;
java.awt.event.MouseListener;
java.io.File;
java.util.ArrayList;
java.util.List;
import javax.swing.ImageIcon;
import javax.swing.JPanel;
public class MainPanel extends JPanel
implements MouseListener {
private int animalType = 0;
private List<ImageIcon> images;
private List<Animal> animals;
// 動物の種類
// 動物の画像リスト（可変長配列）
// 動物のリスト（可変長配列）
private int imgWidth = 100;
private int imgHeight = 100;
// 画像幅
// 画像高さ
private int x,y; // クリックされた座標の一時保管用フィールド
/**
* コンストラクタ
*/
public MainPanel() {
super();
// マウスイベントを受け取れるようにする
addMouseListener(this);
// 初期化
/* List は直接 new できず、リストの種類を指定する必要がある。
* 普通に使う List は ArrayList で new すれば問題ない。*/
images = new ArrayList<ImageIcon>();
animals = new ArrayList<Animal>();
}
/**
* ファイル数に応じて各インスタンスを初期化
* new したあと必ず呼ぶ
* 本当はコンストラクタ内に書く処理だが、そうすると
* プレビューしたときにツールがエラーを出してしまうので処理を分けている
*/
public void init() {
// img ディレクトリを取得
/* File クラスはディレクトリを含むファイルの概念を表す
* 相対パスで書くことができる */
File imgDir = new File("img");
// img ディレクトリにあるファイルを配列にして全て取り出す
File imgFiles[] = imgDir.listFiles();
// List に画像オブジェクトを追加
/* getAbsolutePath 関数：ファイルの絶対パスを String で返す*/
for (int i=0; i<imgFiles.length; i++) {
images.add(new ImageIcon(imgFiles[i].getAbsolutePath()));
}
}
/**
* 描画メソッド<br>
* repaint 関数から呼ばれる
*/
@Override
public void paintComponent(Graphics g) {
/* パネルにボタンなどが配置されているときのため
* 今回は実際に意味はないが、慣例として忘れないよう書いておく*/
super.paintComponents(g);
// より様々な描画方法が可能になるようにキャスト
Graphics2D g2d = (Graphics2D)g;
-5-
MainPanel.java
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
// システムカラー(背景色)を設定
g2d.setColor(SystemColor.control);
// 画面をいったんクリア
g2d.fillRect(0, 0, this.getWidth(), this.getHeight());
// 動物描画
/* Java5 からは可変長配列 List のループを以下ように書くことができる
* animal には animals リストから順にとった Animal オブジェクトがはいる */
for (Animal animal : animals) {
// 画像を描画
/* drawImage(画像オブジェクト, x 座標, y 座標, 幅, 高さ, ImageObserver)
* ImageObserver は画像のロードを通知するもの。たいていは this でよい */
g2d.drawImage(images.get(animal.getAnimalType()).getImage(),
animal.getCenterPoint().x-animal.getSize().width/2,
animal.getCenterPoint().y-animal.getSize().height/2,
animal.getSize().width, animal.getSize().height, this);
}
}
/**
* マウスクリックで呼ばれる関数
*/
@Override
public void mouseClicked(MouseEvent e) {
// クリックされた座標を取得
x = e.getX();
y = e.getY();
// Animal オブジェクトを生成
Animal animal = new Animal(animalType, imgWidth, imgHeight);
// 中心座標を設定
animal.setCenterPoint(x, y);
// リストに追加
animals.add(animal);
// 再描画
repaint();
}
/*
*
*
*
MouseListener を implements しているため、
mouseClicked・mouseEntered・mouseExited・mousePressed・mouseReleased の
４つとも記述しなければならないが、このサンプルで使うのは
mouseClicked だけなので後は空でよい。 */
@Override
public void mouseEntered(MouseEvent e) {
}
@Override
public void mouseExited(MouseEvent e) {
}
@Override
public void mousePressed(MouseEvent e) {
}
@Override
public void mouseReleased(MouseEvent e) {
}
/**
* 動物の種類 setter
* @param aimalType
*/
public void setAnimalType(int animalType) {
this.animalType = animalType;
}
}
-6-
＜作成手順その２ AnimalsFrame を作成＞
１．フレームを作成
aminals パッケージ選択→右クリック→新規→その他を選択
GUI Forms→Swing→JFrame を選んで「次へ」
Class Name は AnimalsFrame として「完了」
２．Jigloo のメッセージが出てきたら「OK」
３．Look&Feel（プログラムの見た目）を設定
フレームを選択→右クリック→Set Look&Feel→Windows を選択
４．レイアウトを設定（※レイアウトについては、2 ページを参照）
フレームを選択→右クリック→Set Layout→BorderLayout を選択
５．フレームのサイズを大きめにする
ソースの方をみて、initGUI()の中の下の方にあるサイズ指定部分を編集
setSize(400,300); → setSize(600,500);
６．フレームのプレビューに戻り、パネルを North に追加
上部の「Containers」右から 5 番目の「JPanel」を選び、フレームに貼り付ける
名前は northPanel、Constraints の中の direction に North を選択
Layout が Flow なのを確かめて OK
７．northPanel の高さを 2，3 行入るほどに大きくする
↓このくらい
８．MainPanel を張り付ける
フレームを選択し、右クリック→Add…→Add Custom→Add custom class or layout を選択
「MainPanel」と入力して OK
名前を mainPanel とし、Constraints の中の direction が Center になっていることを確認して OK
９．ラベルを張り付ける
Components から「JLabel」を選び、northPanel 内に置く
名前は「jLabel」
、Text は「クリックで動物が増えたり鳴いたり。
動物の種類：」
-7-
１０．コンボボックスを張り付ける
Components からラベルの 2 つ左隣の「JComboBox」を選び、northPanel 内に置く
名前は「jComboBox」
１１．セパレータを張り付ける
Components の右から 2 つ目の「JSeparator」を選び、northPanel 内に置く
名前は「jSeparator」
横幅を十分大きくし、フレームの幅と同じくらいになるまで広げる
１２． northPanel の高さをセパレータがちょうど入るくらいに調節する
↓このようになる
１３．コンボボックスが変更されたときに実行されるメソッドのひな型を作成
jComboBox を選択し、Event Name のリスト中の ActionListner を開いて actionPerformed を
inline に設定する
１４．ソースを編集
・・・
（中略）
・・・
ComboBoxModel jComboBoxModel =
new DefaultComboBoxModel(
new String[] { " 猫 ", " 犬 ", " 鳥 "});
jComboBox.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent evt) {
JComboBox comboBox = (JComboBox)evt.getSource();
mainPanel.setAnimalType(comboBox.getSelectedIndex());
}
});
・・・
（中略）
・・・
mainPanel = new MainPanel();
mainPanel.init();
１５．フレームのプレビューで、コンボボックスの横幅を文字が見えるくらいまで大きくする
１６．共有フォルダから img,img2,sounds フォルダをコピーして、Eclipse の Animals の直下に貼り
付ける。
１７．実行してみる
-8-

Download Report