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

水一期博客

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

JButton jb = new JButton();

好吧是肯定有点丑的

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

停留在按钮上方
点击（长按）按钮
抬起

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

1.原始的按钮

原始的按钮是鼠标并没有停留在它的上方
假设初始按钮是这样的：

代码：

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);

可以看到我们已经有一个"按钮"了

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

假设鼠标停在上方时按钮是这样的：

那么现在只需判断鼠标是否在按钮上方就可以了
用一种比较简单的方法：鼠标监听事件（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"));}
}

运行下，可以发现我们停留时图片发生了变化

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.改变鼠标光标

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

假设停留在按钮上时变为链接选择

那么只需在停留方法中添加一行：

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

在离开方法中添加一行：

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

效果图：

完整代码：

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);}@Overridepublic void mouseClicked(MouseEvent e) {}@Overridepublic void mousePressed(MouseEvent e) {}@Overridepublic void mouseReleased(MouseEvent e) {}@Overridepublic void mouseEntered(MouseEvent e) {if(e.getSource()==jl) {jl.setIcon(new ImageIcon("EnterButton.png"));this.setCursor(Cursor.HAND_CURSOR);}}@Overridepublic void mouseExited(MouseEvent e) {if(e.getSource()==jl) {jl.setIcon(new ImageIcon("Button.png"));this.setCursor(Cursor.DEFAULT_CURSOR);}}
}

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

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