您现在的位置是：网站首页 > 代码编程 > JAVA开发JAVA开发

【原】自定义JTabbedPane详细图文教程

不忘初心 2017-12-13 围观() 评论() 点赞() 【JAVA开发】

简介：之前写过两篇关于JTabbedPane组件的UI优化，当时给大家提到过一个思路，如果觉着原生的组件优化起来太麻烦，可以自己定义一个组件，可能有的人不知道怎么自定

之前写过两篇关于JTabbedPane组件的UI优化，当时给大家提到过一个思路，如果觉着原生的组件优化起来太麻烦，可以自己定义一个组件，可能有的人不知道怎么自定义，今天就来教大家一下，自己定义一个简单的JTabbedPane。

还有一个非常重要的原因：JTabbedPane的tab页签如果有很多的时候，官方提供了两种处理方式，一种是换行展示，另外一种是左右切换，恕我直言，真的是丑的没法看。

自定义JTabbedPane详细图文教程

哎哟我去，丑到它妈都不认识它了

自定义JTabbedPane详细图文教程

哇，这个更丑，就不能来个滚动条吗？

哎，没办法，自己动手丰衣足食，还是遵从我一贯的风格，简单大方，案例来模仿一下QQ的聊天窗口的结构，前段时间将QQ升级成了TIM，已经忘了原来的QQ聊天窗口长什么样了，不过大体还是差不多，截一张图来看看我们到底要做成什么样子

自定义JTabbedPane详细图文教程

上面的图片中，我们可以看到，整个窗体是左右结构，左侧是好友或者群组的展示，右侧是聊天消息的展示，所以我们可以用一个jpanel，使用BorderLayout布局，使用west和center来实现这个左右结构

自定义JTabbedPane详细图文教程

这个太简单了，就不给代码了，待会儿在最后面统一给代码。

右侧因为要动态切换，肯定是一个卡片布局CardLayout，关于CardLayout，精髓就是“一次只能展示一个”，这个时候就很符合这个场景了，我们聊天的时候，正在聊的窗口肯定只会有一个，所以这里就不再多说了，直接一个jpanel设置成卡片布局就行了，这次侧重点是左侧的实现。

还记得当时在jtree优化的那篇文章中，重绘node节点的时候，那个node节点跟这里的效果长得还是蛮像的，大家可以去参考一下，这个地方就直接一个滚动面板，然后放很多jpanel，然后jpanel里面再放置三个小块，分别是图标、名字、关闭按钮。

真的没多少东西说，直接来看一下效果吧：

自定义JTabbedPane详细图文教程

怎么样，是不是还是有模有样的，哈哈，直接来上代码：

package com.wolffy.frame;

import com.alee.extended.layout.VerticalFlowLayout;
import com.wolffy.ui.MyButtonUI;
import com.wolffy.ui.MyScrollBarUI;
import com.wolffy.util.ImgUtils;

import javax.swing.BorderFactory;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.ScrollPaneConstants;
import javax.swing.WindowConstants;
import java.awt.BorderLayout;
import java.awt.CardLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;


/**
 * Created by SongFei on 2017/12/13.
 */
public class ChatFrame extends JFrame {

    private JPanel jPanel;

    private JPanel left;

    private JPanel right;

    private JScrollPane scrollPane;

    private CardLayout cardLayout = new CardLayout();

    private JPanel last;

    public ChatFrame() {
        initGUI();
    }

    private void initGUI() {
        setSize(790, 700);
        //setUndecorated(true);
        setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);

        jPanel = new JPanel();
        jPanel.setLayout(new BorderLayout());
        getContentPane().add(jPanel, BorderLayout.CENTER);

        left = new JPanel();
        left.setBackground(Color.cyan);
        // VerticalFlowLayout是FlowLayout的升级版，可以实现纵向排版
        // 几个参数分别是：起始方向、横向间距、纵向间距、是否横向填充、是否纵向填充
        left.setLayout(new VerticalFlowLayout(VerticalFlowLayout.TOP, 0, 1, true, false));
//        left.setPreferredSize(new Dimension(200, 700));
//        jPanel.add(left, BorderLayout.WEST);

        scrollPane = new JScrollPane(left);
        scrollPane.setBorder(null);
        scrollPane.setPreferredSize(new Dimension(200, 700));
        scrollPane.getVerticalScrollBar().setUI(new MyScrollBarUI());// 改变ui
        scrollPane.getVerticalScrollBar().setUnitIncrement(50);// 鼠标滚动速度
        scrollPane.setHorizontalScrollBarPolicy(ScrollPaneConstants.HORIZONTAL_SCROLLBAR_NEVER);// 禁止横向滚动条
        jPanel.add(scrollPane, BorderLayout.WEST);

        right = new JPanel();
        right.setBackground(Color.orange);
        right.setLayout(cardLayout);
        jPanel.add(right, BorderLayout.CENTER);

        // 放置20个item看看效果，可以点击切换
        for (int i = 0; i < 20; i++) {
            JPanel item = new JPanel();
            item.setLayout(null);
            item.setBackground(Color.WHITE);
            item.setPreferredSize(new Dimension(100, 50));
            left.add(item);

            int j = i;
            item.addMouseListener(new MouseAdapter() {
                @Override
                public void mouseClicked(MouseEvent e) {
                    cardLayout.show(right, "room" + j);
                    item.setBackground(Color.LIGHT_GRAY);
                    if (last != null) {
                        last.setBackground(Color.WHITE);
                    }
                    last = item;
                }
            });

            JLabel icon = new JLabel();
            icon.setBounds(0, 0, 50, 50);
            icon.setBackground(Color.pink);
            icon.setBorder(BorderFactory.createEmptyBorder(5, 5, 5, 5));
            icon.setIcon(ImgUtils.getIcon("qq_icon.png"));
            item.add(icon);

            JLabel name = new JLabel();
            name.setBounds(50, 0, 100, 50);
            name.setText("不忘初心-" + i);
            item.add(name);

            JButton close = new JButton("X");
            close.setBounds(150, 0, 50, 50);
            close.setUI(new MyButtonUI());
            item.add(close);

            JLabel room = new JLabel("不忘初心-" + i);
            right.add(room, "room" + i);
        }

    }

    public static void main(String[] args) {
        ChatFrame chatFrame = new ChatFrame();
        chatFrame.setVisible(true);
        //loginFrame.pack();
        chatFrame.setLocationRelativeTo(null);
    }


}