【JavaSwing仿微信电脑版本】左侧导航栏实现

介绍

Java有一些主流的GUI框架，包括AWT，Swing、JavaFX等。AWT功能比较简易，JavaFx上手比较麻烦，而Swing是Java提供的轻量级的GUI框架，使用简单，上手也比较容易。

Swing框架提供了各种各样的类，用于创建不同类型的GUI组件和应用程序，使用Swing库可以使用图片，文本，输入框，列表等。

前期内容：

【JavaSwing仿微信电脑版本】主界面实现 - 掘金 (juejin.cn)

微信左侧导航栏

布局分析

左侧导航栏可以分为两个部分，一是上面头像和5个菜单选项，二是下面小程序等菜单选项栏。左侧菜单布局使用BoxLayout，把上面的子菜单栏设置为BoxLayout.NORTH，固定值左侧导航栏的上面位置；把下面的子菜单栏设置为BoxLayout.SOUTH固定至左侧导航栏的下面位置。
左侧导航栏还要设置它的背景颜色，我们可以根据微信的导航栏颜色设置左侧导航栏的背景色，导航栏颜色为16进制值：2E2E2E，RGB值：（46，46，46）。

• 设置布局

// 设置左侧导航栏父布局为BorderLayout
setLayout(new BorderLayout(0, 40)); 
// 把上面菜单栏添加至左侧菜单栏布局中 
add(topPanel, BorderLayout.NORTH);
// 把下面菜单栏添加至左侧菜单栏布局中 
add(bottomPanel, BorderLayout.SOUTH);

• 设置背景色

// 创建一个颜色
Color leftBarColor = new Color(46, 46, 46);
// 设置父布局容器的颜色
setBackground(leftBarColor);

左侧菜单栏布局排列效果：

上面菜单栏

上面菜单栏包含用户头像和5个菜单项，都是垂直排列的所以我们使用一个BoxLayout并把它设置为垂直排列

// 设置上面菜单栏的布局
topPanel.setLayout(new BoxLayout(topPanel, BoxLayout.Y_AXIS));

头像图片

头像图片放在左侧菜单栏最上方，在Swing中可以使用JLabel显示一张图片。

// 获取图片资源地址
String iconPath = Objects.requireNonNull(getClass().getResource("/img/img_tx1.png")).getPath();
// 创建一个图标对象
ImageIcon icon = new ImageIcon(iconPath);
// 创建一个显示图标的Label
JLabel imageLabel = new JLabel(icon);
// 设置图标距离
imageLabel.setBorder(BorderFactory.createEmptyBorder(30, 10, 15, 5));
// 把图标添加至容器中
topPanel.add(imageLabel);

添加头像图片效果：

5个子菜单

创建一个向布局添加图片的函数，以便我们方便代码编写。

 private void addImage(JPanel targetPanel, String iconName){
    iconName = "/img/"+iconName;
    String iconPath = Objects.requireNonNull(getClass().getResource(iconName)).getPath();
    ImageIcon icon = new ImageIcon(iconPath);
    JLabel imageLabel = new JLabel(icon);
    imageLabel.setBorder(BorderFactory.createEmptyBorder(2, 15, 15, 15));
    targetPanel.add(imageLabel);
}

使用addImage函数添加子菜单。addImage函数的第一个参数为目标容器，第二个参数为图片地址。addImage函数加载项目resources目录下img文件夹下的图片，所以使用时先把使用到的图片存放的正确的位置。

addImage(topPanel, "img_icon_chat_on.png");
addImage(topPanel, "img_icon_hy.png");
addImage(topPanel, "img_icon_sc.png");
addImage(topPanel, "img_icon_file.png");
addImage(topPanel, "img_icon_pq.png");

添加完头像和5个子菜单后的效果：

下面菜单栏

上面菜单栏包含3个菜单项，都是垂直排列的所以我们使用一个BoxLayout并把它设置为垂直排列

// 设置下面菜单栏的布局方式
bottomPanel.setLayout(new BoxLayout(bottomPanel, BoxLayout.Y_AXIS));

添加菜单

下面菜单栏的添加操作和上面菜单栏的添加方式是一样的，所以我们可以使用上面写好的addImage函数来给下面菜单栏添加子菜单。

addImage(bottomPanel, "img_icon_micro.png");
addImage(bottomPanel, "img_icon_phone.png");
addImage(bottomPanel, "img_icon_menu.png");

效果

完整代码

package com.mumu.java.wechat_gui.ui;

import javax.swing.*;
import javax.swing.border.EmptyBorder;
import java.awt.*;
import java.util.Objects;

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

/**
 * @Author: MuMu
 * @Date: 2024/4/9 10:38
 */
public class LeftBarPenal extends JPanel {
    private final JPanel topPanel = new JPanel();
    private final JPanel bottomPanel = new JPanel();
    public LeftBarPenal(){
        initLayout();
    }

    private void initLayout(){
        setLayout(new BorderLayout(0, 40));
        setBackground(Left_bar_color);
        add(topPanel, BorderLayout.NORTH);
        add(bottomPanel, BorderLayout.SOUTH);
        topMenu();
        bottomMenu();
    }

    private void topMenu(){
        topPanel.setLayout(new BoxLayout(topPanel, BoxLayout.Y_AXIS));
        topPanel.setBackground(Left_bar_color);

        // 添加头像
        String iconPath = Objects.requireNonNull(getClass().getResource("/img/img_tx1.png")).getPath();
        ImageIcon icon = new ImageIcon(iconPath);
        JLabel imageLabel = new JLabel(icon);
        imageLabel.setBorder(BorderFactory.createEmptyBorder(30, 10, 15, 10));
        topPanel.add(imageLabel);

        // 添加5个子菜单
        addImage(topPanel, "img_icon_chat_on.png");
        addImage(topPanel, "img_icon_hy.png");
        addImage(topPanel, "img_icon_sc.png");
        addImage(topPanel, "img_icon_file.png");
        addImage(topPanel, "img_icon_pq.png");
    }

    private void bottomMenu(){
        bottomPanel.setLayout(new BoxLayout(bottomPanel, BoxLayout.Y_AXIS));
        bottomPanel.setBackground(Left_bar_color);


        addImage(bottomPanel, "img_icon_micro.png");
        addImage(bottomPanel, "img_icon_phone.png");
        addImage(bottomPanel, "img_icon_menu.png");
    }

    private void addImage(JPanel targetPanel, String iconName){
        iconName = "/img/"+iconName;
        String iconPath = Objects.requireNonNull(getClass().getResource(iconName)).getPath();
        ImageIcon icon = new ImageIcon(iconPath);
        JLabel imageLabel = new JLabel(icon);
        imageLabel.setBorder(BorderFactory.createEmptyBorder(2, 15, 15, 15));
        targetPanel.add(imageLabel);
    }
}