黑马Java创建图形界面（GUI）JFrame、Image拼图游戏【基础笔记】-优快云博客

本文链接：https://blog.youkuaiyun.com/Guang_how927/article/details/148655759

简介·序

组件详解

1 基本窗口JFrame常用方法

setTitle(String title)：设置窗口标题
```
frame.setTitle("窗口标题");  
 
```

setSize(int width, int height)：设置窗口大小

frame.setSize(800, 600);  // 宽度 800，高度 600

setVisible(true)：显示窗口（通常在最后调用）
```
frame.setVisible(true);  
 
```

setAlwaysOnTop(boolean)：设置窗口是否置顶

frame.setAlwaysOnTop(true);  // 设置为始终在最上层

setLocationRelativeTo(null)：将窗口置于屏幕中央
setDefaultCloseOperation(int operation)：设置关闭按钮的行为，常用参数有JFrame.EXIT_ON_CLOSE（退出程序）
```
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);  // 关闭时结束程序  
 
```
setLayout(LayoutManager manager)：设置布局管理器，如FlowLayout、BorderLayout等

addKeyListener(KeyListener l)：添加键盘监听器

frame.addKeyListener(new KeyListener() {  
    @Override  
    public void keyPressed(KeyEvent e) {  
        System.out.println("按键按下: " + e.getKeyCode());  
    }  
    // 其他方法 keyReleased, keyTyped  
});

注册键盘事件处理器，需实现三个核心方法：

keyPressed：物理按键按下时触发（适合功能键响应）
keyReleased：按键释放时触发
keyTyped：字符输入时触发（识别Unicode字符）

2 菜单JMenu解析

      //示例代码 创建菜单栏
    JMenuBar menuBar = new JMenuBar();
    JMenu fileMenu = new JMenu("文件");
    JMenuItem openItem = new JMenuItem("打开");
    fileMenu.add(openItem);
    menuBar.add(fileMenu);
    frame.setJMenuBar(menuBar); // 附加到窗口

JMenuBar
- 创建菜单栏流程
- 窗口顶部的菜单容器，可包含多个JMenu
- JMenu 与 JMenuItem 联动
JMenu
- 下拉菜单的标题项（如"文件"、“编辑”），其内部可嵌套：
- JMenuItem：可点击的菜单选项
- JSeparator：菜单项之间的分隔线
- JCheckBoxMenuItem：带复选框的菜单项
- JRadioButtonMenuItem：单选按钮菜单项
层级关系
JFrame → setJMenuBar() → JMenuBar → add(JMenu) → JMenu.add(JMenuItem)

3 图像与标签进阶应用

ImageIcon icon = new ImageIcon("path/to/image.png");
// 缩放图片
Image scaled = icon.getImage().getScaledInstance(width, height, Image.SCALE_SMOOTH);

图像处理流程

通过ImageIcon或ImageIO加载图像资源
使用getScaledInstance()调整尺寸
设置渲染提示（平滑/快速缩放）优化显示效果

            // 方法1：使用ImageIcon直接加载
            ImageIcon originalIcon = new ImageIcon("image.jpg");
            
            // 方法2：使用ImageIO专业加载
            BufferedImage originalImg = ImageIO.read(new File("image.jpg"));
            
            // 图像缩放处理
            Image scaledImg = originalImg.getScaledInstance(300, 200, Image.SCALE_SMOOTH);
            
            // 创建带图片的标签
            JLabel imgLabel = new JLabel(new ImageIcon(scaledImg));
            imgLabel.setText("<html><center>图片说明<br>第二行文字</center></html>");
            imgLabel.setHorizontalTextPosition(JLabel.CENTER);
            imgLabel.setVerticalTextPosition(JLabel.BOTTOM);
        
        // 创建带HTML的标签
        JLabel label = new JLabel(
            "<html><center><b>图像展示</b><br><font color=red>动态标签</font></center></html>",
            new ImageIcon(scaledImage),
            JLabel.CENTER
        );
        label.setVerticalTextPosition(JLabel.BOTTOM);
        label.setHorizontalTextPosition(JLabel.CENTER);

JLabel多功能实现
- 图文组合：同时显示图标和文字
- 动态更新：通过setIcon()实时切换图片
- HTML渲染：支持简单HTML格式文本
- 辅助功能：为视障用户提供文本描述
图像缓存优化
- 大尺寸图片建议使用VolatileImage或BufferedImage提升渲染性能

4 事件监听体系精要

键盘监听（KeyListener）

    //示例代码
        JFrame frame = new JFrame("键盘监听示例");
        JTextField textField = new JTextField(20);
        textField.setFocusable(true);
        
        textField.addKeyListener(new KeyAdapter() {
            public void keyPressed(KeyEvent e) {
                System.out.println("按下: " + KeyEvent.getKeyText(e.getKeyCode()));
            }
            public void keyReleased(KeyEvent e) {
                if(e.getKeyCode() == KeyEvent.VK_ESCAPE)
                    System.out.println("ESC键释放");
            }
            public void keyTyped(KeyEvent e) {
                System.out.println("输入字符: " + e.getKeyChar());
            }
        });

事件区分
- 功能键（F1~F12/ESC等）仅触发keyPressed/keyReleased
- 字符键会额外触发keyTyped
焦点问题
组件需获得焦点才能接收键盘事件，可通过setFocusable(true)激活
替代方案
复杂场景推荐使用Key Bindings机制，支持：
- 全局快捷键
- 多按键组合检测
- 无焦点限制的输入捕获

鼠标监听（MouseListener）

    //示例代码
        JFrame frame = new JFrame("鼠标监听示例");
        JPanel panel = new JPanel();
        panel.setPreferredSize(new Dimension(300, 200));
        
        panel.addMouseListener(new MouseAdapter() {
            public void mouseClicked(MouseEvent e) {
                System.out.println("点击次数: " + e.getClickCount());
            }
            public void mouseEntered(MouseEvent e) {
                panel.setBackground(Color.YELLOW);
            }
            public void mouseExited(MouseEvent e) {
                panel.setBackground(null);
            }
        });

五类基础事件
1. 点击（click） 2. 按下（press） 3. 释放（release）
2. 进入组件区域（enter） 5. 离开组件区域（exit）
高级扩展
- MouseMotionListener：追踪移动和拖拽轨迹
- MouseWheelListener：处理滚轮滚动事件

功能实现

一.登录/注册界面

1.1 实例化登录界面/实例化注册界面

创建三个测试界面

//1.创建一个游戏的主界面
JFrame gameJframe =new JFrame();
gameJframe.setsize(603,680);
gameJframe.setVisible(true);
//2.创建一个登录界面
JFrame loginJframe=new JFrame();
loginJframe.setsize(488,430);
loginJframe.setVisible(true);
//3.创建一个注册界面
JFrame registerJframe=newFrame();
registerJframe.setSize(488,500);
registerJframe.setVisible(true);

1.2 构造方法拆分LoginJFrame.java、GameJFrame.java、RegisterJFrame.java-启动入口

public static void main(String[] args) {
        // 实例化登录界面
        new LoginJFrame();
        // 实例化注册界面
        new RegisterJFrame();
        // 实例化游戏界面
        new GameJFrame();
    }

二.实例JFrame界面

public class GameJFrame extends JFrame{
    //JFrame 界面，窗体
    //子类呢?也表示界面，窗体
    //规定:GameJFrame这个界面表示的就是游戏的主界面//以后跟游戏相关的所有逻辑都写在这个类中
    public GameJFrame(){
        //设置界面的宽高
        this.setsize(603,680);//设置界面的标题
        this.setTitle("拼图单机版 v1.0");
        //设置界面置顶
        this.setAlwaysonTop(true);
        //设置界面居中
        this.setLocationRelativeTo(null);//设置关闭模式
        this.setDefaultcloseoperation(2);//让显示显示出来，建议写在最后this.setVisible(true);
    }
}

2.1 JMenuBar菜单栏

 private void initJMenuBar() {
        //整个菜单
        // 初始化菜单栏
        JMenuBar jMenuBar = new JMenuBar();
        
        // 创建功能菜单及其子项
        JMenu functionJMenu = new JMenu("功能");
        functionJMenu.add(replayItem);  // 添加"重新游戏"菜单项
        functionJMenu.add(reLoginItem); // 添加"重新登录"菜单项
        functionJMenu.add(closeItem);   // 添加"关闭游戏"菜单项
        
        // 创建关于菜单及其子项
        JMenu aboutJMenu = new JMenu("关于我们");
        aboutJMenu.add(accountItem);    // 添加"公众号"菜单项

        //给条目绑定事件
        replayItem.addActionListener(this);
        reLoginItem.addActionListener(this);
        closeItem.addActionListener(this);
        accountItem.addActionListener(this);

        jMenuBar.add(functionJMenu);
        jMenuBar.add(aboutJMenu);
        this.setJMenuBar(jMenuBar);
    //创建选项下
        // 绑定事件需要移出至JFrame方法
        JMenuItem replayItem = new JMenuItem("重新游戏");
        JMenuItem reLoginItem = new JMenuItem("重新登录");
        JMenuItem closeItem = new JMenuItem("关闭游戏");
        JMenuItem accountItem = new JMenuItem("公众号");

        this.setVisible(true);
    }

2.2 Image图片添加容器JLabel

private void initImage(){
    ImageIcon icon1 = new ImageIcon("c:\\Users\\moon\\IdeaProjects\\。。。图片位置");
    //创建一个JLabel的对象(管理容器)
    JLabel jLabel1 =new JLabel(icon1);
    //指定图片位置
    jLabel1.setBounds(0,0,105,105);
    //把管理容器添加到界面中
    //this.add(jLabel1);
    this.getContentPane().add(jLabel1);
}

2.3 加载图片

private void initImage() {
        //清空原本已经出现的所有图片
        this.getContentPane().removeAll();

//        int number=1;
        for (int i = 0; i < 4; i++) {
            for (int j = 0; j < 4; j++) {
                int num=data[i][j];
                    JLabel jLabel=new JLabel(new ImageIcon(path+num+".jpg"));
                jLabel.setBounds(105*j+83,105*i+134,105,105);
                //给图片添加边框
                jLabel.setBorder(new BevelBorder(1));
                //把容器添加到界面中
                this.getContentPane().add(jLabel);
                //下次加载下一张
//                number++;
            }
        }

//添加背景图片
        JLabel background = new JLabel(new ImageIcon("puzzlegame\\image\\background.png"));
        background.setBounds(40,40,508,560);
        this.getContentPane().add(background);

        //刷新一下背景图片
        this.getContentPane().repaint();
    }

三.事件监听Test

public class MyJFrame2 extends JFrame implements MouseListener {
    //创建按钮对象
    JButton jtb = new JButton("点我啊");
    //创建按钮对象2
//    JButton jtb2 = new JButton("你打我撒！！");
    public MyJFrame2() {
        //设置界面宽高
        this.setSize(600,600);
        //设置界面标题
        this.setTitle("演示");
        //设置界面置顶
        this.setAlwaysOnTop(true);
        //设置界面居中
        this.setLocationRelativeTo(null);
        //设置关闭模式
        this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        //设置默认居中显示，只有取消才xy添加组件
        this.setLayout(null);


        //设置位置的宽高
        jtb.setBounds(0,0,100,30);
        //绑定鼠标事件
        jtb.addMouseListener(this);

        //设置位置的宽高
//        jtb2.setBounds(100,0,100,50);
//        jtb2.addActionListener(this);
        //添加界面中
        this.getContentPane().add(jtb);
//        this.getContentPane().add(jtb2);
        this.setVisible(true);
    }


    @Override
    public void mouseClicked(MouseEvent e) {
        System.out.println("单击");
    }

    @Override
    public void mousePressed(MouseEvent e) {
        System.out.println("按下不松");
    }

    @Override
    public void mouseReleased(MouseEvent e) {
        System.out.println("松开");
    }

    @Override
    public void mouseEntered(MouseEvent e) {
        System.out.println("划入");
    }

    @Override
    public void mouseExited(MouseEvent e) {
        System.out.println("划出");
    }
}