演習2-3 画像アイコンの変更点

追加された行はこの色です。
削除された行はこの色です。
演習2-3 画像アイコンへ行く。
演習2-3 画像アイコンの差分を削除
[[TopPage]] > [[演習課題]] > 演習2-3 画像アイコン

* 画像アイコン [#n1693285]

まず，下記のプログラムと画像３枚を同じフォルダにダウンロードしてください．

&ref(GuiImageTest.java,,,GuiImageTest.java ダウンロード);／[[ソースコードファイルを見る>http://yoslab.net/netprog/source/GuiImageTest.java]]

画像ファイルの保存は，画像ファイル上で右クリックし&color(red){「名前をつけて画像を保存」};をクリックします．~
%%%★今までの保存先のフォルダとは異なるフォルダになっている場合がありますので，確認して保存してください．%%%

&ref(White.jpg,nolink); ... White.jpg~

&ref(Black.jpg,nolink); ... Black.jpg~

&ref(GreenFrame.jpg,nolink); ... GreenFrame.jpg~


コンパイルの方法は，これまでと同じです．

*** 説明 [#r4b21dee]

このプログラムは，演習2-2のプログラムのボタンに，上記でダウンロードした画像ファイルを貼り付けたものです．
（一部機能を省略しています）

このプログラムは，クリックするごとに，~
緑のアイコン → 白丸つきアイコン → 黒丸つきアイコン~
の順に変化していきます．


２１～２４行目で，３つの画像ファイルを，'''ImageIcon'''型の変数（オブジェクト）に読み込んでいます．
 //アイコンの設定
 whiteIcon = new ImageIcon("White.jpg");
 blackIcon = new ImageIcon("Black.jpg");
 boardIcon = new ImageIcon("GreenFrame.jpg");

２６～３５行目では，ボタンを５つ生成します．
 //ボタンの生成
 buttonArray = new JButton[5];//ボタンの配列を５個作成する[0]から[4]まで使える
 for(int i=0;i<5;i++){
     buttonArray[i] = new JButton(boardIcon);//ボタンにアイコンを設定する
     c.add(buttonArray[i]);//ペインに貼り付ける
     buttonArray[i].setBounds(i*45,10,45,45);//ボタンの大きさと位置を設定する．(x座標，y座標,xの幅,yの幅）
     buttonArray[i].addMouseListener(this);//ボタンをマウスでさわったときに反応するようにする
     buttonArray[i].addMouseMotionListener(this);//ボタンをマウスで動かそうとしたときに反応するようにする
     buttonArray[i].setActionCommand(Integer.toString(i));//ボタンに配列の情報を付加する（ネットワークを介してオブジェクトを識別するため）
 }
- 2行目：配列''buttonArray''に対して，５つの要素を持つ配列を作成します．
- 4行目：''new'' JButton(''boardIcon'');で，新しいボタンを作成しています．~
そして，初期画像として，緑のアイコン(boardIcon)をボタンに貼り付けます．
- 5行目：c.''add''(buttonArray[i]);で，()内に指定したボタンを，フォーム(ウィンドウ)に貼り付けます．（この処理をしないと，画面上に表示されません．）
- 6行目：''setBounds''(X位置, Y位置, 横幅, 縦長)で，ボタンの位置とサイズを指定します．
- 7,8行目：マウスをクリックしたときの処理です．
- 9行目：''setActionCommand''で，ボタンの(要素)番号を設定しています．


続いて，クリックしたときの処理が４４～５８行目に書かれています．
一部を抜粋します．
 JButton theButton = (JButton)e.getComponent();//クリックしたオブジェクトを得る．
 String theArrayIndex = theButton.getActionCommand();//ボタンの配列の番号を取り出す
 
 Icon theIcon = theButton.getIcon();//theIconには，現在のボタンに設定されたアイコンが入る
 System.out.println(theIcon);//デバッグ（確認用）に，クリックしたアイコンの名前を出力する
 
 if(theIcon.equals(boardIcon)){//アイコンがboardIconと同じなら
     theButton.setIcon(whiteIcon);//whiteIconに設定する
 }else{
     theButton.setIcon(blackIcon);//blackIconに設定する
 }

- 1行目：クリックされたボタンを，変数theButtonに代入します．
- 2行目：''getActionCommand()''メソッドを使って，theButton(クリックされたボタン)の要素番号を取得して，文字列型の変数''theArrayIndex''に代入します．
- 4行目：''getIcon()''メソッドを使って，theButton(クリックされたボタン)のアイコンを取得して，アイコン型の変数''theIcon''に代入します．
- 7,8行目：theIconがboardIconと同じかどうかを判断します．
同じであれば，''setIcon()''を使って，クリックされたアイコンをwhiteIconに変更します．

*** 練習 [#h7c4ef3b]

黒丸つきアイコンの状態になっているボタンをクリックすると，緑のアイコンが表示されるようにプログラムを修正してください．

*** ボタン以外の画像の作成 [#g39343e8]

[[Ｑ＆Ａ>Ｑ＆Ａ#a5f20601]]を参考にしてください．

#br

&size(16){[[&ref(http://yoslab.net/netprog/next.gif,nolink); 演習ページ>演習課題]]};
演習2-3 画像アイコン の変更点
