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 ウ：80 エ：26 カ：(frame.getWidth()-180)/2+90 キ：frame.getHeight()-insets.top-36 ク：90 ケ：26 サ：frame.getWidth() シ：frame.getHeight() ス：frame.getWidth() セ：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
＜作成手順その１＞ １．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 すると、記述しなければならないメソッドがいくつか出てくる。
Animal.java package animals; 1 2 import java.awt.Dimension; 3 import java.awt.Point; 4 5
public class Animal { 6
7
private int animalType; // 動物の種類 8
private Point centerPoint; // 描画される画像の中心座標 9
private Dimension size; // 描画される画像のサイズ 10 11 /** 12 * コンストラクタ<br> 13 * 動物の種類と画像サイズを指定、座標のデフォルトは画面左上 14 * @param animalType 15 * @param width 16 * @param height 17 */ 18
public Animal(int animalType, int width, int height) { 19
this.animalType = animalType; 20
size = new Dimension(width, height); 21
centerPoint = new Point(width/2, height/2); 22 } 23 24 /** 25 * 指定された(x,y)の点がオブジェクトの画像矩形に含まれるかを返す<br> 26 * Step2 で使うので用意しておく 27 * @param x 28 * @param y 29 * @return 30 */ 31
public boolean contains(int x, int y) { 32
return centerPoint.x - size.width/2 < x 33
&& x < centerPoint.x + size.width/2 34
&& centerPoint.y - size.height/2 < y 35
&& y < centerPoint.y + size.height/2; 36
} 37
38
/* setter and getter---*/ 39
40
public int getAnimalType() { 41
return animalType; 42
} 43
public void setAnimalType(int animalType) { 44
this.animalType = animalType; 45
} 46
public Point getCenterPoint() { 47
return centerPoint; 48
} 49
public void setCenterPoint(Point centerPoint) { 50
this.centerPoint = centerPoint; 51
} 52
public void setCenterPoint(int x, int y) { 53
centerPoint = new Point(x, y); 54
} 55
public Dimension getSize() { 56
return size; 57
} 58
public void setSize(Dimension size) { 59
this.size = size; 60
} 61
public void setSize(int width, int height) { 62
size = new Dimension(width, height); 63
} 64
MainPanel.java package animals; 1 2 import java.awt.Graphics; 3 import java.awt.Graphics2D; 4 import java.awt.SystemColor; 5 import java.awt.event.MouseEvent; 6 import java.awt.event.MouseListener; 7 import java.io.File; 8 import java.util.ArrayList; 9 import java.util.List; 10 11 import javax.swing.ImageIcon; 12 import javax.swing.JPanel; 13 14 15
public class MainPanel extends JPanel implements MouseListener { 16
17
private int animalType = 0; // 動物の種類 18
private List<ImageIcon> images; // 動物の画像リスト（可変長配列） 19
private List<Animal> animals; // 動物のリスト（可変長配列） 20
21
private int imgWidth = 100; // 画像幅
22
private int imgHeight = 100; // 画像高さ
23 24
private int x,y; // クリックされた座標の一時保管用フィールド 25 26 /** 27 * コンストラクタ 28 */ 29 public MainPanel() { 30 super(); 31 // マウスイベントを受け取れるようにする 32 addMouseListener(this); 33 // 初期化 34 /* List は直接 new できず、リストの種類を指定する必要がある。 35
* 普通に使う List は ArrayList で new すれば問題ない。*/ 36
images = new ArrayList<ImageIcon>(); 37
animals = new ArrayList<Animal>(); 38 } 39 40 /** 41 * ファイル数に応じて各インスタンスを初期化 42 * new したあと必ず呼ぶ 43 * 本当はコンストラクタ内に書く処理だが、そうすると 44 * プレビューしたときにツールがエラーを出してしまうので処理を分けている 45 */ 46
public void init() { 47 // img ディレクトリを取得 48 /* File クラスはディレクトリを含むファイルの概念を表す 49 * 相対パスで書くことができる */ 50
File imgDir = new File("img"); 51
// img ディレクトリにあるファイルを配列にして全て取り出す 52
File imgFiles[] = imgDir.listFiles(); 53
// List に画像オブジェクトを追加 54
/* getAbsolutePath 関数：ファイルの絶対パスを String で返す*/ 55
for (int i=0; i<imgFiles.length; i++) { 56 images.add(new ImageIcon(imgFiles[i].getAbsolutePath())); 57 } 58 } 59 60 /** 61 * 描画メソッド<br> 62 * repaint 関数から呼ばれる 63 */ 64 @Override 65
public void paintComponent(Graphics g) { 66 /* パネルにボタンなどが配置されているときのため 67 * 今回は実際に意味はないが、慣例として忘れないよう書いておく*/ 68 super.paintComponents(g); 69 // より様々な描画方法が可能になるようにキャスト 70
MainPanel.java // システムカラー(背景色)を設定 72 g2d.setColor(SystemColor.control); 73 // 画面をいったんクリア 74
g2d.fillRect(0, 0, this.getWidth(), this.getHeight()); 75
// 動物描画 76
/* Java5 からは可変長配列 List のループを以下ように書くことができる 77
* animal には animals リストから順にとった Animal オブジェクトがはいる */ 78
for (Animal animal : animals) { 79 // 画像を描画 80 /* drawImage(画像オブジェクト, x 座標, y 座標, 幅, 高さ, ImageObserver) 81 * ImageObserver は画像のロードを通知するもの。たいていは this でよい */ 82 g2d.drawImage(images.get(animal.getAnimalType()).getImage(), 83 animal.getCenterPoint().x-animal.getSize().width/2, 84 animal.getCenterPoint().y-animal.getSize().height/2, 85
animal.getSize().width, animal.getSize().height, this); 86 } 87 } 88 89 90 /** 91 * マウスクリックで呼ばれる関数 92 */ 93 @Override 94
public void mouseClicked(MouseEvent e) { 95 // クリックされた座標を取得 96 x = e.getX(); 97 y = e.getY(); 98 // Animal オブジェクトを生成 99
Animal animal = new Animal(animalType, imgWidth, imgHeight); 100 // 中心座標を設定 101 animal.setCenterPoint(x, y); 102 // リストに追加 103 animals.add(animal); 104 // 再描画 105 repaint(); 106 } 107 108 /* MouseListener を implements しているため、 109 * mouseClicked・mouseEntered・mouseExited・mousePressed・mouseReleased の 110 * ４つとも記述しなければならないが、このサンプルで使うのは 111 * mouseClicked だけなので後は空でよい。 */ 112 113 @Override 114
public void mouseEntered(MouseEvent e) { 115 } 116 117 @Override 118
public void mouseExited(MouseEvent e) { 119 } 120 121 @Override 122
public void mousePressed(MouseEvent e) { 123 } 124 125 @Override 126
public void mouseReleased(MouseEvent e) { 127 } 128 129 130 /** 131 * 動物の種類 setter 132 * @param aimalType 133 */ 134
public void setAnimalType(int animalType) { 135 this.animalType = animalType; 136 } 137 } 138
＜作成手順その２ 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 内に置く
-8- １０． コンボボックスを張り付ける 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 の直下に貼り 付ける。
