积微成著 不积跬步,无以至千里

首页   >   web开发   >   自定义JTabbedPane详细图文教程

自定义JTabbedPane详细图文教程

之前写过两篇关于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);
    }


}

MyButtonUI在前面JCombobox的优化那篇文章中给过了。

右侧内容的填充,大家可以去看我在iteye上面分享的swingqq项目,这里就不来写代码实现了,今天主要是看看整体布局和左侧内容的实现,代码是完整的,大家可以直接拷贝下来运行。

QQ群:积微成著官方群(686430774),验证消息:积微成著

站长Q:1347384268(加好友请注明来意)

分享到:

欢迎分享本文,转载请注明出处!

作者:不忘初心

发布时间:2017-12-13

永久地址:http://www.jiweichengzhu.com/article/cc2b4e2ef62a415c92d472b382095f7b