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

水一期博客

---

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

JButton jb = new JButton(); 

好吧是肯定有点丑的

---

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

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

那么每一步的按钮都是不一样的，是不是可以用这个步骤来制作一个极其真实的按钮呢？
其实根本不需要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);
    }

    @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调整

---

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