Slick2D——自定義按鈕

對於圖形界面來講，按鈕神馬的最最經常使用了。可是老用系統提供的那幾個按鈕控件不以爲單調嗎？爲了讓界面看起來了更加炫，其實按鈕控件徹底能夠DIY~~ 本篇就講解怎麼DIY屬於本身的Button！Let’s go!!

 

1.定製本身的Button，首先就須要前景，背景和按鈕按下時的樣式，固然按鈕的位置和寬高也是必須的。

  

後者就是按鈕被按下的樣子。仔細觀察按鈕，按鈕是由3部分組成

前景

背景

按鈕被按下時

 

由此，咱們能夠大體定義出Button類

   1: public class MyButton {

   2:     /**按鈕的位置和寬高*/

   3:     private float posX, posY, width, height;

   4:     /**按鈕的前景，背景以及被按下時的樣式*/

   5:     private Image foreground, background, clicked;

   6:     

   7:     public interface ClickAction {

   8:         public void onButtonClick(MyButton button);

   9:     }

  10:  

  11:     public MyButton(float posX, float posY) {

  12:         this(posX, posY, 200, 60);

  13:     }

  14:  

  15:     public MyButton(float posX, float posY, float width, float height) {

  16:         super();

  17:         this.posX = posX;

  18:         this.posY = posY;

  19:         this.width = width;

  20:         this.height = height;

  21:         

  22:         try {

  23:             foreground = new Image("res/p_w_picpath/btn_playnow.png");

  24:             background = new Image("res/p_w_picpath/btn_normal.png");

  25:             clicked = new Image("res/p_w_picpath/btn_pressed.png");

  26:         } catch (SlickException e) {

  27:             e.printStackTrace();

  28:         }

  29:     }

  30:  

  31:     public void draw(){

  32:         background.draw(posX, posY, width, height);

  33:         foreground.draw(posX, posY, width, height);

  34:     }

  35:     

  36: }

 

而後能夠在Slick框架裏定義一個MyButton對象，並繪製出來。

 

2.接下來，也是最重要的。按鈕的功能是什麼？不就是點擊按鈕而後觸發事件響應嗎？所以，要定義按鈕的事件響應。

   1: public class MyButton {

   2:     .....

   3:     

   4:     public interface ClickAction {

   5:         public void onButtonClick(MyButton button);

   6:     }

   7:  

   8:     .....

   9: }

回想在Swing編程裏，爲一個按鈕設置監聽器

   1: button.addActionListener(new ActionListener() {

   2:             

   3:             @Override

   4:             public void actionPerformed(ActionEvent e) {

   5:             }

   6:         });

能夠看到這裏的ActionListener不是接口就是抽象類。當點擊按鈕時，就會調用ActionListener.actionPerformed()方法。

一樣的，在自定義按鈕中，咱們也能夠在類的內部定義一個ClickAction接口，當自定義按鈕被按下時，調用ClickAction.onButtonClick()方法。

 

所以，咱們能夠在onButtonClick()實現當按鈕被按下時，會觸發事件的代碼。

 

3. 然而，怎麼才能知道按鈕是否被點擊或者按下了呢？

在Slick框架裏，會提供相應的鼠標方法，包括mousePressed，mouseReslease, mouseClicked等方法，這些方法參數中，系統會傳入當前鼠標所在的位置。

所以，只要知道鼠標的位置以及鼠標的狀態(按下，釋放)，就能夠知道當前按鈕是否被按下或點擊。

能夠在，MyButton內加入鼠標點擊的方法。

   1: public class MyButton {

   2:     /**按鈕的位置和寬高*/

   3:     private float posX, posY, width, height;

   4:     /**按鈕的前景，背景以及被按下時的樣式*/

   5:     private Image foreground, background, clicked;

   6:     private boolean isPressed, isRelease;

   7:     private ClickAction action;//持有點擊響應接口的引用,當按鈕被點擊時,調用該接口的方法.

   8:        

   9:     public void setOnClickAction(ClickAction action){

  10:         this.action = action;

  11:     }

  12:  

  13:     public void draw(){

  14:         background.draw(posX, posY, width, height);

  15:         foreground.draw(posX, posY, width, height);

  16:     }

  17:     

  18:     public void mouseClicked(float mousex, float mousey){

  19:         //Util是一個工具類，其中的inBound方法是判斷一個點是否在一個矩形當中

  20:         //posX,posY是矩形左上角的座標,width,height是矩形的寬高

  21:         //mousex,mousey是鼠標的位置

  22:         //所以,這段代碼就是判斷當前鼠標位置是否在按鈕範圍,若是在就調用按鈕響應事件

  23:         if(Util.inBound(posX, posY, width, height, mousex, mousey))

  24:             action.onButtonClick(this);

  25:     }

  26: }

而後在Slick框架內mouseClicked()內直接調用MyButton.mouseClicked()便可

   1: @Override

   2: public void mouseClicked(int button, int x, int y, int clickCount) {

   3:     this.button.mouseClicked(x, y);

   4: }

 

接着來測試一下自定義按鈕

   1: button = new MyButton(100, 100);

   2: button.setOnClickAction(new MyButton.ClickAction() {

   3:     

   4:     @Override

   5:     public void onButtonClick(MyButton button) {

   6:         // TODO Auto-generated method stub

   7:         System.out.println("按鈕被點擊");

   8:     }

   9: });

測試結果：

 

4.如今，按鈕的基本功能已經實現，但仍是有瑕疵….. 你能看出來按鈕時被按了嗎？？效果都是同樣的，按與不按根本沒有區別。

  爲了解決這一問題，就要爲按鈕添加狀態。

   1: private BUTTON_STATE curState;

   2:  

   3: private enum BUTTON_STATE{

   4:     BUTTON_STATE_IDLE,//按鈕空閒時的狀態,即按鈕未被按下

   5:     BUTTON_STATE_CLICKING//按鈕按下時的狀態

   6: };

而後就要在點擊的方法裏改變按鈕的狀態(PS點擊 Click包括 按下 Pressed 和 釋放 Release)

   1: public void mouseRelease(float mousex, float mousey){

   2:     if(Util.inBound(posX, posY, width, height, mousex, mousey))

   3:         curState = BUTTON_STATE.BUTTON_STATE_CLICKING.BUTTON_STATE_IDLE;

   4: }

   5:  

   6: public void mousePressed(float mousex, float mousey){

   7:     if(Util.inBound(posX, posY, width, height, mousex, mousey))

   8:         curState = BUTTON_STATE.BUTTON_STATE_CLICKING;

   9: }

 

此時，繪製按鈕就要根據按鈕的狀態來繪製了

   1: public void draw(){

   2:     switch (curState) {

   3:     case BUTTON_STATE_IDLE:

   4:         background.draw(posX, posY, width, height);

   5:         foreground.draw(posX, posY, width, height);

   6:         break;

   7:     

   8:     case BUTTON_STATE_CLICKING:

   9:         clicked.draw(posX, posY, width, height);

  10:         foreground.draw(posX, posY, width, height);

  11:         break;

  12:     }

  13: }

 

而後在Slick框架內的mousePressed，mouseRelease調用MyButton.mousePressed，MyButton.mouseRelease，用於改變按鈕的狀態。

   1: @Override

   2: public void mouseReleased(int button, int x, int y) {

   3:     this.button.mouseRelease(x, y);

   4: }

   5:  

   6: @Override

   7: public void mousePressed(int button, int x, int y) {

   8:     this.button.mousePressed(x, y);

   9: }

 

最後來測試一下

 

總結：自定義按鈕的步驟

1. 定義按鈕的前景，背景和被按下時的樣式

2.定義按鈕的事件響應(最重要！！！)

3.判斷按鈕是否被按下

4.爲按鈕添加狀態，被根據狀況改變狀態。