Animals サンプル Step 1 動物の種類を指定しておいてクリックした場所に画像を貼り付ける < レイアウトについて > 前回はラベルやボタンの位置を座標で設定した Absolute Layout を選んだためであるレイアウトはどのようにボタンなどのコンポーネントを配置するかを決定す

Size: px

Start display at page:

Download "Animals サンプル Step 1 動物の種類を指定しておいてクリックした場所に画像を貼り付ける < レイアウトについて > 前回はラベルやボタンの位置を座標で設定した Absolute Layout を選んだためであるレイアウトはどのようにボタンなどのコンポーネントを配置するかを決定す"

ふさこももき
6 years ago
Views:

1 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

2 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-

MainPanel クラスを作成 JPanel を継承 (extends) MouseListener を実装 (implements) した動物描画メソッドを持つクラスフレームの Center に配置する animals パッケージを選択右クリック新規クラスクラス名 MainPanel スーパークラスの参照をクリック JPanel とうつと javax.

3 < 作成手順その 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-

4 Animal.java package animals; import java.awt.dimension; import java.awt.point; public class Animal { private int animaltype; // 動物の種類 private Point centerpoint; // 描画される画像の中心座標 private Dimension size; // 描画される画像のサイズ * コンストラクタ <br> * 動物の種類と画像サイズを指定座標のデフォルトは画面左上 animaltype width 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 で使うので用意しておく x y 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-

5 MainPanel.java 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-

6 MainPanel.java // システムカラー ( 背景色 ) を設定 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 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.

フレームのサイズを大きめにするソースの方をみて initgui() の中の下の方にあるサイズ指定部分を編集 setsize(400,300); setsize(600,500); 6.

7 < 作成手順その 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-

8 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-

Animals サンプル Step3 張り付けた動物の上をクリックするとそれぞれの鳴き声で鳴くその鳴く間一定時間 ( ここでは 1 秒間 ) 画像が別のものに変わる <アニメーションの基礎 : タイマーについて> アニメーションはアプリケーションが指定する間一定間隔でどんどん画像をおきかえ

Animals サンプル Step3 張り付けた動物の上をクリックするとそれぞれの鳴き声で鳴くその鳴く間一定時間 ( ここでは 1 秒間 ) 画像が別のものに変わるアニメーションはアプリケーションが指定する間一定間隔でどんどん画像をおきかえていくものであるこのサンプルでは動物画像の上をクリックすると画像を切り替え 1 秒後もとの画像に戻す操作をする