Java使用图片自定义登录窗体

一、问题概述

Java是一门面向对象的编程语言，从出版至今，Java对其自身不断改进，Java的图形界面编程也做的越来越好，从AWT到更高级的Swing。但是，我们的需求永远是无法满足的，有时候我们需要自定义窗体，特别是一张漂亮的图片做一个窗体，那就再好不过了。那么，今天我就把用图片自定义应用窗体的方法分享给大家。

二、实现方法

1、用图片自定义应用窗体效果图；

图1 Java使用图片自定义应用窗体效果图

2、创建一个类继承Swing中JFrame，然后定义一个BufferedImage变量，用于设定应用窗体背景图，在定义一个ImageIcon变量，用来保存你自定义的图片；在根据图1的样子，分别定义两个JLable,一个JTextField，一个JPasswordField，三个JButton。图片的导入和组件的创建不在鳌诉。

说明：图1右上角的红色关闭窗体按钮是自定义图片p上去的，然后通过Java的鼠标事件来判断鼠标点击的范围是否在红色区域内，如果觉得上诉的按钮或者是文本框不好看，也可以用自定义的图片去定义样式，此内容不再本教程讲解范围之类，具体方法请参阅我博客“Java自定义图片按钮”。

下面给出变量代码：

// 用来设定窗体不规则样式的图片，这里只用它来创建窗体形状
private BufferedImage img;
//用它来显示这张图片
private ImageIcon background;
//用户名输入框
private JTextField userText = new JTextField(30);
//密码输入框
private JPasswordField passwordText = new JPasswordField(30);
private JLabel userLabel = new JLabel("账 号:");
private JLabel passwordLabel = new JLabel("密 码: ");
private JButton okbtn = new JButton("确定");
private JButton resert = new JButton("重置");
private JButton register = new JButton("注册");
// 记录窗体移动的坐标
private Point origin;

如果不使用JLable 来显示background图片，效果是这样的：

图2 未设置背景图像效果图

为方便测试，再此给出图片原图（P得不是很好，P得越清晰，就越不容易产生锯齿和白边哦）：

图3 应用原图

3、创建一个和图片形状一样的窗体；

/**
* 创建和图片形状一样的窗体
* 并监听窗体移动事件
* @throws IOException
*/
private void initialize() throws IOException { // 窗体初始化
// 设定窗体大小和图片一样大
this.setSize(img.getWidth(null), img.getHeight(null));
// 设定禁用窗体装饰，这样就取消了默认的窗体结构
this.setUndecorated(true);
// 初始化用于移动窗体的原点
this.origin = new Point();

// 调用AWTUtilities的setWindowShape方法设定本窗体为制定的Shape形状
AWTUtilities.setWindowShape(this, getImageShape(img));
// 设定窗体可见度
AWTUtilities.setWindowOpacity(this, 0.8f);

this.setLocationRelativeTo(null);
this.setAlwaysOnTop(true);
// 由于取消了默认的窗体结构，所以我们要手动设置一下移动窗体的方法
this.addMouseListener(new OwnListener());
//监听鼠标移动事件
addMouseMotionListener(new MouseMotionAdapter() {
public void mouseDragged(MouseEvent e) {
Point p = getLocation();
setLocation(p.x + e.getX() - origin.x, p.y + e.getY()
- origin.y);
}
});
}
/**
* 将Image图像转换为Shape图形
* @param img
* @return
*/
public Shape getImageShape(Image img) {
ArrayList<Integer> x = new ArrayList<Integer>();
ArrayList<Integer> y = new ArrayList<Integer>();
int width = img.getWidth(null);// 图像宽度
int height = img.getHeight(null);// 图像高度

// 筛选像素
// 首先获取图像所有的像素信息
PixelGrabber pgr = new PixelGrabber(img, 0, 0, -1, -1, true);
try {
pgr.grabPixels();
} catch (InterruptedException ex) {
ex.getStackTrace();
}
int pixels[] = (int[]) pgr.getPixels();

// 循环像素
for (int i = 0; i < pixels.length; i++) {
// 筛选，将不透明的像素的坐标加入到坐标ArrayList x和y中
int alpha = getAlpha(pixels[i]);
if (alpha == 0) {
continue;
} else {
x.add(i % width > 0 ? i % width - 1 : 0);
y.add(i % width == 0 ? (i == 0 ? 0 : i / width - 1) : i / width);
}
}

// 建立图像矩阵并初始化(0为透明,1为不透明)
int[][] matrix = new int[height][width];
for (int i = 0; i < height; i++) {
for (int j = 0; j < width; j++) {
matrix[i][j] = 0;
}
}

// 导入坐标ArrayList中的不透明坐标信息
for (int c = 0; c < x.size(); c++) {
matrix[y.get(c)][x.get(c)] = 1;
}

/*
* 由于Area类所表示区域可以进行合并，我们逐一水平"扫描"图像矩阵的每一行，
* 将不透明的像素生成为Rectangle，再将每一行的Rectangle通过Area类的rec
* 对象进行合并，最后形成一个完整的Shape图形
*/
Area rec = new Area();
int temp = 0;

for (int i = 0; i < height; i++) {
for (int j = 0; j < width; j++) {
if (matrix[i][j] == 1) {
if (temp == 0)
temp = j;
else if (j == width) {
if (temp == 0) {
Rectangle rectemp = new Rectangle(j, i, 1, 1);
rec.add(new Area(rectemp));
} else {
Rectangle rectemp = new Rectangle(temp, i,
j - temp, 1);
rec.add(new Area(rectemp));
temp = 0;
}
}
} else {
if (temp != 0) {
Rectangle rectemp = new Rectangle(temp, i, j - temp, 1);
rec.add(new Area(rectemp));
temp = 0;
}
}
}
temp = 0;
}
return rec;
}

/**
* 取得透明度
* @param pixel
* @return
*/
private int getAlpha(int pixel) {
return (pixel >> 24) & 0xff;
}

4、初始化窗体并显示

/**
* 构造方法
* 初始化窗体
*/
public LoginWindow() {
super();

sql = new DriveSQL();

background = new ImageIcon("image1\\login1.png");
JLabel back = new JLabel(background);
back.setBounds(0, 0, background.getIconWidth(),
background.getIconHeight());
/*
* 首先初始化一张图片，我们可以选择一张有透明部分的不规则图片
*  (要想图片能够显示透明，必须使用PNG格式的图片)
*/
MediaTracker mt = new MediaTracker(this);

try {
img = ImageIO.read(new File("image1\\login1.png"));
} catch (IOException e1) {
e1.printStackTrace();
}

mt.addImage(img, 0);

try {
mt.waitForAll(); // 开始加载由此媒体跟踪器跟踪的所有图像
} catch (InterruptedException e) {
e.printStackTrace();
}

try {
initialize(); // 窗体形状初始化
} catch (IOException e) {
e.printStackTrace();
}

addMenu();
this.add(back);
this.setVisible(true);
}
/**
* 组件初始化
*/
public void addMenu() {
//采用绝对布局，要将默认布局置空
this.setLayout(null);
//设置字体
Font font = new Font("", 0, 18);
userLabel.setForeground(Color.white);
passwordLabel.setForeground(Color.white);
userLabel.setFont(font);
passwordLabel.setFont(font);
passwordText.setEchoChar('*');

userLabel.setBounds(80, 120, 100, 50);
passwordLabel.setBounds(80, 160, 100, 50);
userText.setBounds(140, 130, 170, 30);
passwordText.setBounds(140, 170, 170, 30);
okbtn.setBounds(81, 210, 60, 25);
resert.setBounds(166, 210, 60, 25);
register.setBounds(251, 210, 60, 25);

this.add(userLabel);
this.add(userText);
this.add(passwordLabel);
this.add(passwordText);
this.add(okbtn);
this.add(resert);
this.add(register);

okbtn.addMouseListener(new OwnListener());
resert.addMouseListener(new OwnListener());
register.addMouseListener(new OwnListener());
userText.addKeyListener(new KeyOwnListener());
passwordText.addKeyListener(new KeyOwnListener());
}

5、事件响应

/**
* 事件监听
* @author Admin
*
*/
private class OwnListener extends MouseAdapter {
public void mousePressed(MouseEvent e) {
origin.x = e.getX();
origin.y = e.getY();
}

// 窗体上单击鼠标右键关闭程序
public void mouseClicked(MouseEvent e) {
//如果点击的区域位于右上角红色按钮，则关闭程序
if (new Circle(350, 63, 11).contants(e.getX(), e.getY())) {
System.exit(0);
} else if (e.getSource() == okbtn) {
//验证用户是否合法，并打开主程序
} else if (e.getSource() == resert) {
userText.setText("");
passwordText.setText("");
} else if (e.getSource() == register) {
//打开注册页面
}
}

public void mouseReleased(MouseEvent e) {
super.mouseReleased(e);
}
}

三、小结

1、要实现自定义图片创建窗体，必须使用Java的第三方库的类“AWTUtilities”，如果你在使用时发现找不到此类，原因可能是你的JDK版本过低或者是你配置时没有导入第三方库。如无法解决，请联系我。

2、创建窗体时，采用绝对布局，要将原有的默认布局置空，否则很难控制。具体原因可以自己去尝试。

3、如果要实现窗体透明，图片必须使用png格式，小编曾经就是实现不了透明效果头疼了很久，最后发现只有png格式的图片可以实现透明效果。

4、部分源码参考网络和前辈博客，感谢提供相应资料。

5、由于小编初出茅庐，文中难免有错误之处，还望指正，谢谢合作。

四、完整源码

import java.awt.Color;
import java.awt.Font;
import java.awt.Image;
import java.awt.MediaTracker;
import java.awt.Point;
import java.awt.Rectangle;
import java.awt.Shape;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionAdapter;
import java.awt.geom.Area;
import java.awt.image.BufferedImage;
import java.awt.image.PixelGrabber;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;

import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JOptionPane;
import javax.swing.JPasswordField;
import javax.swing.JTextField;

import com.assistclass.Circle;
import com.data.Reader;
import com.frame.MainFrame;
import com.sqlservice.DriveSQL;
import com.sun.awt.AWTUtilities;

/**
* 用户登录窗体
* @author Admin
*
*/
public class LoginWindow extends JFrame {

private static final long serialVersionUID = 1L;
private Point origin; // 用于移动窗体
private BufferedImage img; // 用来设定窗体不规则样式的图片

private ImageIcon background;
private JTextField userText = new JTextField(30);
private JPasswordField passwordText = new JPasswordField(30);
private JLabel userLabel = new JLabel("账 号:");
private JLabel passwordLabel = new JLabel("密 码: ");
private JButton okbtn = new JButton("确定");
private JButton resert = new JButton("重置");
private JButton register = new JButton("注册");

/**
* 初始化窗体
*/
public LoginWindow() {
super();
background = new ImageIcon("image1\\login1.png");
JLabel back = new JLabel(background);
back.setBounds(0, 0, background.getIconWidth(),
background.getIconHeight());
/*
* 首先初始化一张图片，我们可以选择一张有透明部分的不规则图片
*  (要想图片能够显示透明，必须使用PNG格式的图片)
*/
MediaTracker mt = new MediaTracker(this);

try {
img = ImageIO.read(new File("image1\\login1.png"));
} catch (IOException e1) {
e1.printStackTrace();
}

mt.addImage(img, 0);

try {
mt.waitForAll(); // 开始加载由此媒体跟踪器跟踪的所有图像
} catch (InterruptedException e) {
e.printStackTrace();
}

try {
initialize(); // 窗体形状初始化
} catch (IOException e) {
e.printStackTrace();
}

addMenu();
this.add(back);
this.setVisible(true);
}

/**
* 组件初始化
*/
public void addMenu() {
this.setLayout(null);
//设置字体
Font font = new Font("", 0, 18);
userLabel.setForeground(Color.white);
passwordLabel.setForeground(Color.white);
userLabel.setFont(font);
passwordLabel.setFont(font);
passwordText.setEchoChar('*');

userLabel.setBounds(80, 120, 100, 50);
passwordLabel.setBounds(80, 160, 100, 50);
userText.setBounds(140, 130, 170, 30);
passwordText.setBounds(140, 170, 170, 30);
okbtn.setBounds(81, 210, 60, 25);
resert.setBounds(166, 210, 60, 25);
register.setBounds(251, 210, 60, 25);

this.add(userLabel);
this.add(userText);
this.add(passwordLabel);
this.add(passwordText);
this.add(okbtn);
this.add(resert);
this.add(register);

okbtn.addMouseListener(new OwnListener());
resert.addMouseListener(new OwnListener());
register.addMouseListener(new OwnListener());
userText.addKeyListener(new KeyOwnListener());
passwordText.addKeyListener(new KeyOwnListener());

userText.setText("20160601");
passwordText.setText("84878323");
}

/**
* 创建和图片形状一样的窗体
* @throws IOException
*/
private void initialize() throws IOException { // 窗体初始化
// 设定窗体大小和图片一样大
this.setSize(img.getWidth(null), img.getHeight(null));
// 设定禁用窗体装饰，这样就取消了默认的窗体结构
this.setUndecorated(true);
// 初始化用于移动窗体的原点
this.origin = new Point();

// 调用AWTUtilities的setWindowShape方法设定本窗体为制定的Shape形状
AWTUtilities.setWindowShape(this, getImageShape(img));
// 设定窗体可见度
AWTUtilities.setWindowOpacity(this, 0.8f);

this.setLocationRelativeTo(null);
this.setAlwaysOnTop(true);
// 由于取消了默认的窗体结构，所以我们要手动设置一下移动窗体的方法
this.addMouseListener(new OwnListener());
//监听鼠标移动事件
addMouseMotionListener(new MouseMotionAdapter() {
public void mouseDragged(MouseEvent e) {
Point p = getLocation();
setLocation(p.x + e.getX() - origin.x, p.y + e.getY()
- origin.y);
}
});
}

/**
* 将Image图像转换为Shape图形
* @param img
* @return
*/
public Shape getImageShape(Image img) {
ArrayList<Integer> x = new ArrayList<Integer>();
ArrayList<Integer> y = new ArrayList<Integer>();
int width = img.getWidth(null);// 图像宽度
int height = img.getHeight(null);// 图像高度

// 筛选像素
// 首先获取图像所有的像素信息
PixelGrabber pgr = new PixelGrabber(img, 0, 0, -1, -1, true);
try {
pgr.grabPixels();
} catch (InterruptedException ex) {
ex.getStackTrace();
}
int pixels[] = (int[]) pgr.getPixels();

// 循环像素
for (int i = 0; i < pixels.length; i++) {
// 筛选，将不透明的像素的坐标加入到坐标ArrayList x和y中
int alpha = getAlpha(pixels[i]);
if (alpha == 0) {
continue;
} else {
x.add(i % width > 0 ? i % width - 1 : 0);
y.add(i % width == 0 ? (i == 0 ? 0 : i / width - 1) : i / width);
}
}

// 建立图像矩阵并初始化(0为透明,1为不透明)
int[][] matrix = new int[height][width];
for (int i = 0; i < height; i++) {
for (int j = 0; j < width; j++) {
matrix[i][j] = 0;
}
}

// 导入坐标ArrayList中的不透明坐标信息
for (int c = 0; c < x.size(); c++) {
matrix[y.get(c)][x.get(c)] = 1;
}

/*
* 由于Area类所表示区域可以进行合并，我们逐一水平"扫描"图像矩阵的每一行，
* 将不透明的像素生成为Rectangle，再将每一行的Rectangle通过Area类的rec
* 对象进行合并，最后形成一个完整的Shape图形
*/
Area rec = new Area();
int temp = 0;

for (int i = 0; i < height; i++) {
for (int j = 0; j < width; j++) {
if (matrix[i][j] == 1) {
if (temp == 0)
temp = j;
else if (j == width) {
if (temp == 0) {
Rectangle rectemp = new Rectangle(j, i, 1, 1);
rec.add(new Area(rectemp));
} else {
Rectangle rectemp = new Rectangle(temp, i,
j - temp, 1);
rec.add(new Area(rectemp));
temp = 0;
}
}
} else {
if (temp != 0) {
Rectangle rectemp = new Rectangle(temp, i, j - temp, 1);
rec.add(new Area(rectemp));
temp = 0;
}
}
}
temp = 0;
}
return rec;
}

/**
* 取得透明度
* @param pixel
* @return
*/
private int getAlpha(int pixel) {
return (pixel >> 24) & 0xff;
}

/**
* 事件监听
* @author Admin
*
*/
private class OwnListener extends MouseAdapter {
public void mousePressed(MouseEvent e) {
origin.x = e.getX();
origin.y = e.getY();
}

// 窗体上单击鼠标右键关闭程序
public void mouseClicked(MouseEvent e) {
//如果点击的区域位于右上角红色按钮，则关闭程序
if (new Circle(350, 63, 11).contants(e.getX(), e.getY())) {
System.exit(0);
} else if (e.getSource() == okbtn) {
//验证用户是否合法，合法打开主程序
} else if (e.getSource() == resert) {
userText.setText("");
passwordText.setText("");
} else if (e.getSource() == register) {
//打开注册页面
}
}

public void mouseReleased(MouseEvent e) {
super.mouseReleased(e);
}
}

/**
* 监听键盘Enter键，实现Enter登录
* @author Admin
*
*/
private class KeyOwnListener extends KeyAdapter {
public void keyPressed(KeyEvent e) {
if (10 == e.getKeyCode()) {
//验证用户是否合法，合法打开主程序
}
}
}
}