Java制作一个更加真实的按钮

ゝ一纸荒年。 2022-10-12 05:45 64阅读 0赞

水一期博客

--------------------

制作一个真实的按钮很简单，比如swing按钮

JButton jb = new JButton();

好吧是肯定有点丑的

--------------------

当我们在点击一个按钮的时候，步骤可以分为以下几步:

1.  停留在按钮上方
2.  点击（长按）按钮
3.  抬起

那么每一步的按钮都是不一样的，是不是可以用这个步骤来制作一个极其真实的按钮呢？  
其实根本不需要JButton，几张图片就可以

### 1.原始的按钮 ###

原始的按钮是鼠标并没有停留在它的上方  
假设初始按钮是这样的：  
![在这里插入图片描述][20210704100535231.png]  
代码：

JPanel jp = new JPanel();
    ImageIcon i = new ImageIcon("Button.png");
    JLabel jl = new JLabel(i);
    jp.add(jl);
    this.add(jp);
    this.setVisible(true);
    this.setSize(500,400);
    this.setResizable(false);

可以看到我们已经有一个"按钮"了  
![在这里插入图片描述][20210704101724103.png]

### 2.鼠标停留在上方的按钮 ###

假设鼠标停在上方时按钮是这样的：  
![在这里插入图片描述][2021070410184564.png]  
那么现在只需判断鼠标是否在按钮上方就可以了  
用一种比较简单的方法：鼠标监听事件（MouseListener）  
一共有5个方法：点击、按下、释放、进入、离开

//鼠标在组件上按下并释放时调用
    void mouseClicked(MouseEvent e)
    //鼠标在组件上按下时调用
    void mousePressed(MouseEvent e)
    //鼠标在组件上释放时调用
    void mouseReleased(MouseEvent e)
    //鼠标在组件上停留时调用
    void mouseEntered(MouseEvent e)
    //鼠标离开组件时调用
    void mouseExited(MouseEvent e)

很显然，第4个方法正是我们需要的  
如果鼠标在label上停留，那么label就切换到另一种图片

--------------------

首先要对`label`添加监听

jl.addMouseListener(this);

之后判断一下是不是`jl`

void mouseEntered(MouseEvent e) { 
    	if(e.getSource() == jl) { 
    		
    	}
    }

如果是，则将`jl`的图片更改为另一种图片

void mouseEntered(MouseEvent e) { 
    	if(e.getSource() == jl) { 
    		jl.setIcon(new ImageIcon("EnterButton.png"));
    	}
    }

运行下，可以发现我们停留时图片发生了变化  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ0NTU5OA_size_16_color_FFFFFF_t_70]

### 3.鼠标点击按钮时 ###

和上面的一样  
这次我们需要用到第一种方法

void mouseClicked(MouseEvent e) { 
    	if(e.getSource()==jl) { 
    		jl.setIcon(new ImageIcon("图片的路径"));
    	}
    }

### 4.鼠标离开按钮时 ###

这次我们需要用到第5种方法

void mouseExited(MouseEvent e) { 
    	if(e.getSource()==jl) { 
                jl.setIcon(new ImageIcon("Button.png"));
        }
    }

将图片改为初始按钮即可

--------------------

### 5.改变鼠标光标 ###

当我们点击一些按钮的时候，鼠标的光标会发生一些变化  
那么我们是不是也可以做到呢？

--------------------

假设停留在按钮上时变为`链接选择`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ0NTU5OA_size_16_color_FFFFFF_t_70 1]  
那么只需在停留方法中添加一行：

//更改为链接选择光标
    this.setCursor(Cursor.HAND_CURSOR);

在离开方法中添加一行：

//更改为默认光标
    this.setCursor(Cursor.DEFAULT_CURSOR);

效果图：  
![在这里插入图片描述][20210704112339373.gif]

### 完整代码： ###

package com.qq.me;
    
    import javax.swing.*;
    import java.awt.*;
    import java.awt.event.MouseEvent;
    import java.awt.event.MouseListener;
    
    public class MyButton extends JFrame implements MouseListener { 
    
        ImageIcon i;
        JPanel jp;
        JLabel jl;
        public static void main(String args[]) { 
            MyButton mb = new MyButton();
        }
    
        public MyButton() { 
            jp = new JPanel();
            i = new ImageIcon("Button.png");
            jl = new JLabel(i);
            jp.add(jl);
            jl.addMouseListener(this);
            this.add(jp);
            this.setVisible(true);
            this.setSize(500,400);
            this.setResizable(false);
            this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        }
    
        @Override
        public void mouseClicked(MouseEvent e) { 
            
        }
    
        @Override
        public void mousePressed(MouseEvent e) { 
    
        }
    
        @Override
        public void mouseReleased(MouseEvent e) { 
    
        }
    
        @Override
        public void mouseEntered(MouseEvent e) { 
            if(e.getSource()==jl) { 
                jl.setIcon(new ImageIcon("EnterButton.png"));
                this.setCursor(Cursor.HAND_CURSOR);
            }
        }
    
        @Override
        public void mouseExited(MouseEvent e) { 
            if(e.getSource()==jl) { 
                jl.setIcon(new ImageIcon("Button.png"));
                this.setCursor(Cursor.DEFAULT_CURSOR);
            }
        }
    }

--------------------

如果觉得按钮周围有空白的话，可以用PS消掉  
或者觉得截的按钮有大有小，可以用PS调整

--------------------

你确定不三连嘛？  
三连再走吧！

[20210704100535231.png]: /images/20221005/1bfc8dcc034c41e4a1c99dd46f1fa228.png
[20210704101724103.png]: /images/20221005/d67c1739bf9c4ac1af1af8beeef74faf.png
[2021070410184564.png]: /images/20221005/cc9e1856759f46dfb57d6dbc58c2b02a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ0NTU5OA_size_16_color_FFFFFF_t_70]: /images/20221005/958d09b84bf241fdb405c3065c3b1702.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQ0NTU5OA_size_16_color_FFFFFF_t_70 1]: /images/20221005/b8b1cced7234483d8141d51f867f357a.png
[20210704112339373.gif]: /images/20221005/8a3a2868be904cda9904bce9d9c58619.png