【JavaSwing仿微信电脑版本】主界面实现

介绍

Java有一些主流的GUI框架，包括AWT，Swing、JavaFX等。AWT功能比较简易，JavaFx上手比较麻烦，而Swing是Java提供的轻量级的GUI框架，使用简单，上手也比较容易。
Swing框架提供了各种各样的类，用于创建不同类型的GUI组件和应用程序，使用Swing库可以使用图片，文本，输入框，列表等。

最近使用Swing做了一些简单的带用户界面的Java程序，学过Java的都知道Java是一个高级计算机编程语言之一，Java可以做后端开发，算法开发等，使用Java开发桌面应用比较少，因为Java提供的UI库并不美观，使用它创建的界面比较先low。但是Java提供了面向对象，我们可以结合Java已提供的UI库和自己自定义一些功能实现比较好看的图形用户界面。

本文使用Swing库 仿微信PC Windows版本实现了一个图形用户界面，实现效果截图如下图所示。

微信PC Windows版本主界面截图如下：

下面我们一步步地使用Swing库完成 图形用户界面的设计和开发，每个步骤有相关介绍。使用的开发环境如下：

操作系统：window11 家庭版
Java版本：JDK1.8
使用软件：IDEA社区版

创建项目

为方便开发和管理项目分别创建三个包，把每个不同部分都分开来开发。
data：存放一些用户数据，好友列表等数据。
theme：页面样式（颜色，字体，窗口大小等）
ui：创建页面

创建页面

界面划分分析

我们可以把微信的主界面分为三个模块，分别是左侧导航栏，好友列表和聊天区。界面分好以后可以把不同区的功能分开来开发。

窗口创建

上面我们已经分析好窗口的构造和元素，下面我们可以开始创建串口。

我们分别创建4个类，一个MainWindow作为主窗口，继承JFrame，作为我们的主界面。
LeftBarPanel类：作为左侧导航栏，继承JPanel。
FriendListPanel类：好友列表显示，继承JPanel.
ChatPanel类：作为聊天区，继承JPanel。

创建好相关类后我们就可以按分好的模块进行开发。

主窗口

• 主窗口创建部分

package com.mumu.java.wechat_gui.ui;

import javax.swing.*;

import static com.mumu.java.wechat_gui.theme.MainWindowTheme.*;

/**
 * @Author: MuMu
 * @Date: 2024/4/9 10:19
 */
public class MainWindow extends JFrame {
    public MainWindow() {
        setTitle(Window_title);  // 窗口标题
        setSize(Window_width, Window_height);  // 窗口大小
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);  // 关闭按钮：退出程序
        setVisible(true);  // 窗口可见
    }
}

• 主窗口样式

package com.mumu.java.wechat_gui.theme;

/**
 * @Author: MuMu
 * @Date: 2024/4/9 10:26
 */
public class MainWindowTheme {
    public static final String Window_title = "JFrame微信";
    public static final int Window_width = 720;
    public static final int Window_height = 550;
}

• 主窗口运行测试

Java程序从main函数开始执行，所以我们在项目中创建一个main函数，运行我们的MainWindow，查看我们的主窗口的显示效果。

package com.mumu.java.wechat_gui;

import com.mumu.java.wechat_gui.ui.MainWindow;

/**
 * @Author: MuMu
 * @Date: 2024/4/9 10:00
 */
public class Main {
    public static void main(String[] args) {
        MainWindow mainWindow = new MainWindow();
    }
}

创建三个容器

我们上面已经把主界面分了三个部分，下面我们按分好的分别创建每个容器。

左侧导航栏容器

package com.mumu.java.wechat_gui.ui;

import javax.swing.*;
import java.awt.*;

import static com.mumu.java.wechat_gui.theme.LeftBarTheme.*;

/**
 * @Author: MuMu
 * @Date: 2024/4/9 10:38
 */
public class LeftBarPenal extends JPanel {
    public LeftBarPenal(){
        initLayout();
    }

    private void initLayout(){
        setLayout(new BorderLayout(0,40));
        setBackground(Left_bar_color);

        JLabel jLabel = new JLabel("  导航栏  ");
        jLabel.setForeground(new Color(255, 255, 255));
        add(jLabel, BorderLayout.CENTER);
    }
}

好友列表容器

package com.mumu.java.wechat_gui.ui;

import javax.swing.*;
import java.awt.*;

import static com.mumu.java.wechat_gui.theme.FriendListTheme.Friend_penal_color;

/**
 * @Author: MuMu
 * @Date: 2024/4/9 10:38
 */
public class FriendListPenal extends JPanel {
    public FriendListPenal(){
        initLayout();
    }

    private void initLayout(){
        setLayout(new BorderLayout());
        setBackground(Friend_penal_color);

        JLabel jLabel = new JLabel(" 好友列表");
        add(jLabel, BorderLayout.CENTER);
    }

}

聊天区容器

package com.mumu.java.wechat_gui.ui;

import javax.swing.*;
import java.awt.*;

import static com.mumu.java.wechat_gui.theme.ChatTheme.Chat_penal_color;

/**
 * @Author: MuMu
 * @Date: 2024/4/9 10:38
 */
public class ChatPenal extends JPanel {
    public ChatPenal(){
        initLayout();
    }

    private void initLayout(){
        setLayout(new BorderLayout());
        setBackground(Chat_penal_color);

        JLabel jLabel = new JLabel(" 聊天区");
        add(jLabel, BorderLayout.CENTER);
    }

}

主界面效果

Java的Swing库提供了一些布局，我们要根据我们的分析选择一个合适的布局来构造我们的主界面，我们在这里选择使用BorderLayout布局。Swing库提供的常见布局介绍如下：

BorderLayout：将容器分为东、西、南、北、中五个区域，每个区域只能放置一个组件，通常用于构建具有边缘控制面板的应用程序。
FlowLayout：按照添加的顺序依次排列组件，当空间不足时会自动换行。
GridLayout：将容器分为行和列，所有的组件都会被等分放置在行和列中。
GridBagLayout：通过设置每个组件的约束条件来确定组件的位置和大小，是最灵活的布局管理器之一。
BoxLayout：沿着单一轴线（水平或垂直）排列组件，可以实现水平或垂直的盒式布局。
CardLayout：允许在同一区域显示多个组件，但一次只能显示其中的一个，通过切换不同的组件来实现视图的切换。
GroupLayout：用于在水平和垂直方向上组织组件，支持嵌套和并列的组件布局。

窗体布局划分

我们先把窗口分为两个区域：导航区和操作区。
导航区包含上面分析的导航栏，操作区包含好友列表和聊天区。
我们使用BorderLayout把每个容器放到主界面上。

• 主界面布局设计图

• 布局设计Java代码

private void initLayout(){
    setLayout(new BorderLayout());
    // 左侧导航栏
    add(new LeftBarPenal(), BorderLayout.WEST);

    JPanel jPanel = new JPanel();
    jPanel.setLayout(new BorderLayout());
    jPanel.add(new FriendListPenal(), BorderLayout.WEST);
    jPanel.add(new ChatPenal(), BorderLayout.CENTER);
    add(jPanel);
}

• 测试

本节到此结束，下节开始实现导航栏和其他部分。