GUI プログラミング第 2 回演習 Animals ~ 画像描画と音声再生 : 動物が増える 鳴く ~ 学習キーワード : イベント (ActionEvent, MouseEvent) レイアウト 可変長配列 (List) 継承 例外処理 タイマー処理 ニャー ワン カー <Animals サンプルのステップ > 今回のサンプルは ステップ 1 からステップ 3 まで各自順に進めていく Step3 までできた人は発展課題に挑戦してみてください Step 1 動物が増える Step 2 動物が鳴く Step 3 動物が鳴く間の画像が切り替わる発展課題その 1 動物をドラッグで動かす発展課題その 2 動物のサイズを自由に指定する <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() 1つ目の :&& 2つ目の : -1-
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-
< 作成手順その 1> 1.Animals プロジェクトを作成パッケージ エクスプローラで右クリック 新規 Java プロジェクトプロジェクト名 Animals 2. パッケージを作成 src フォルダを選択 右クリック 新規 パッケージパッケージ名 animals 3.Animals クラスを作成 描画される動物の属性 ( 種類 中心座標 サイズ ) を持つクラス animals パッケージを選択 右クリック 新規 クラスクラス名 Animal 4.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 java.awt.graphics; import java.awt.graphics2d; import java.awt.systemcolor; import java.awt.event.mouseevent; import java.awt.event.mouselistener; import java.io.file; import java.util.arraylist; import 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 関数から呼ばれる 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); * マウスクリックで呼ばれる関数 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 の * 4つとも記述しなければならないが このサンプルで使うのは * mouseclicked だけなので後は空でよい public void mouseentered(mouseevent e) { public void mouseexited(mouseevent e) { public void mousepressed(mouseevent e) { public void mousereleased(mouseevent e) { * 動物の種類 setter * @param aimaltype public void setanimaltype(int animaltype) { this.animaltype = animaltype; -6-
< 作成手順その 2 AnimalsFrame を作成 > 1. フレームを作成 aminals パッケージ選択 右クリック 新規 その他を選択 GUI Forms Swing JFrame を選んで 次へ Class Name は AnimalsFrame として 完了 2.Jigloo のメッセージが出てきたら OK 3.Look&Feel( プログラムの見た目 ) を設定フレームを選択 右クリック Set Look&Feel Windows を選択 4. レイアウトを設定 ( レイアウトについては 2 ページを参照 ) フレームを選択 右クリック Set Layout BorderLayout を選択 5. フレームのサイズを大きめにするソースの方をみて initgui() の中の下の方にあるサイズ指定部分を編集 setsize(400,300); setsize(600,500); 6. フレームのプレビューに戻り パネルを North に追加上部の Containers 右から 5 番目の JPanel を選び フレームに貼り付ける名前は northpanel Constraints の中の direction に North を選択 Layout が Flow なのを確かめて OK 7.northPanel の高さを 2,3 行入るほどに大きくする このくらい 8.MainPanel を張り付けるフレームを選択し 右クリック Add Add Custom Add custom class or layout を選択 MainPanel と入力して OK 名前を mainpanel とし Constraints の中の direction が Center になっていることを確認して OK 9. ラベルを張り付ける Components から JLabel を選び northpanel 内に置く名前は jlabel Text は クリックで動物が増えたり鳴いたり 動物の種類 : -7-
10. コンボボックスを張り付ける Components からラベルの 2 つ左隣の JComboBox を選び northpanel 内に置く名前は jcombobox 11. セパレータを張り付ける Components の右から 2 つ目の JSeparator を選び northpanel 内に置く名前は jseparator 横幅を十分大きくし フレームの幅と同じくらいになるまで広げる 12. northpanel の高さをセパレータがちょうど入るくらいに調節する このようになる 13. コンボボックスが変更されたときに実行されるメソッドのひな型を作成 jcombobox を選択し Event Name のリスト中の ActionListner を開いて actionperformed を inline に設定する 14. ソースを編集 ( 中略 ) 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(); 15. フレームのプレビューで コンボボックスの横幅を文字が見えるくらいまで大きくする 16. 共有フォルダから img,img2,sounds フォルダをコピーして Eclipse の Animals の直下に貼り付ける 17. 実行してみる -8-