Swing UI - 可收起与开展内容面板实现演示

基于JAVA Swing实现的自定义组件可折叠的JPanel组件

基本思想：

可折叠面板，分为两个部分-头部面板与内容面板

头部面板– 显示标题，以及对应的icon图标，监听鼠标事件决定内容面板隐藏或者显示

内容面板– 普通的JPanel组件。

实现：

头部面板：

package com.gloomyfish.ui.demo;import java.awt.BorderLayout;import java.awt.Color;import java.awt.Dimension;import java.awt.Font;import java.awt.GradientPaint;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.RenderingHints;import java.awt.image.BufferedImage;import java.io.IOException;import javax.imageio.ImageIO;import javax.swing.JFrame;import javax.swing.JPanel;public class HeaderPanel extends JPanel {/** *  */private static final long serialVersionUID = 1L;private int height = 50;private Color bgColor;private boolean isShow;private String title;public void setShow(boolean isShow) {this.isShow = isShow;}public void setTitle(String title){this.title = title;}@Overrideprotected void paintComponent(Graphics g) {Graphics2D g2d = (Graphics2D) g.create();g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);BufferedImage panelImage = createPanelImage();g2d.drawImage(panelImage, null, 0, 0);}private BufferedImage createPanelImage() {BufferedImage panelImage = new BufferedImage(getWidth(), height, BufferedImage.TYPE_INT_ARGB);Graphics2D g2d = panelImage.createGraphics();g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);g2d.setRenderingHint(java.awt.RenderingHints.KEY_TEXT_ANTIALIASING,java.awt.RenderingHints.VALUE_TEXT_ANTIALIAS_ON);int width = getWidth();g2d.setPaint(bgColor);        g2d.fillRect(0, 0, width, height);        GradientPaint gradientPaint = new GradientPaint(0, height/2, Color.LIGHT_GRAY, 0, height, Color.DARK_GRAY);        g2d.setPaint(gradientPaint);        g2d.fillRect(0, height/2, width, height/2);        java.net.URL imageURL = null;        if(this.isShow)        {        imageURL = this.getClass().getResource("arrow-up-icon.png");        }        else        {        imageURL = this.getClass().getResource("arrow-down-icon.png");        }        java.net.URL titleIconURL = this.getClass().getResource("user.png"); //gallery_5.png        g2d.setFont(new Font("Serif", Font.BOLD, 24));        g2d.setPaint(Color.WHITE);        g2d.drawString(this.title, width/2-40, height-5);try {g2d.fillArc(width - 42, this.height/2, this.height/2, this.height/2, 0, 360);g2d.drawImage(ImageIO.read(imageURL), null, width - 42, this.height/2+2);g2d.drawImage(ImageIO.read(titleIconURL), null, 20, 5);} catch (IOException e) {System.err.println("An error occured when loading the image icon...");}return panelImage;}public void setHeight(int height) {this.height = height;}public void setBgColor(Color bgColor) {this.bgColor = bgColor;}@Overridepublic Dimension getPreferredSize() {return new Dimension(this.getWidth(), height);}@Overridepublic Dimension getSize() {return new Dimension(this.getWidth(), height);}public HeaderPanel(Color bgColor) {this.bgColor = bgColor;this.isShow = true;}public HeaderPanel(Color bgColor, String title) {this(bgColor);this.title = title;}public static void main(String[] args){        JFrame mainFrame = new JFrame("UI Demo - Gloomyfish");        mainFrame.getContentPane().setLayout(new BorderLayout());        mainFrame.getContentPane().add(new HeaderPanel(Color.BLACK), BorderLayout.CENTER);        mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);          mainFrame.pack();          mainFrame.setVisible(true);  }}

内容面板：

package com.gloomyfish.ui.demo;import java.awt.BorderLayout;import java.awt.Color;import java.awt.FlowLayout;import java.awt.GridLayout;import javax.swing.BorderFactory;import javax.swing.JButton;import javax.swing.JLabel;import javax.swing.JPanel;import javax.swing.JTextField;public class ContentPanel extends JPanel {/** *  */private static final long serialVersionUID = 1L;public ContentPanel(Color theme){this.setBorder(BorderFactory.createLineBorder(theme, 5));}public void createContent(){JPanel userPanel = new JPanel(new GridLayout(2,2));userPanel.setBorder(BorderFactory.createEmptyBorder(5, 5, 5, 5));userPanel.add(new JLabel("用户名："));JTextField txtField = new JTextField("", 10);userPanel.add(txtField);userPanel.add(new JLabel("密码："));JTextField pwdField = new JTextField("", 10);userPanel.add(pwdField);JButton okeBtn = new JButton("OK");JButton cancelBtn = new JButton("Cancel");JPanel btnPanel = new JPanel();btnPanel.setLayout(new FlowLayout(FlowLayout.RIGHT));btnPanel.add(okeBtn);btnPanel.add(cancelBtn);this.setLayout(new BorderLayout());this.add(userPanel, BorderLayout.CENTER);this.add(btnPanel, BorderLayout.SOUTH);}}

可折叠面板：

package com.gloomyfish.ui.demo;import java.awt.BorderLayout;import java.awt.Color;import java.awt.GridBagConstraints;import java.awt.GridBagLayout;import java.awt.Insets;import java.awt.event.MouseAdapter;import java.awt.event.MouseEvent;import javax.swing.JFrame;import javax.swing.JPanel;public class JExpandablePanel extends JPanel{/** *  */private static final long serialVersionUID = 1L;private HeaderPanel headerPanel;private ContentPanel contentPanel;public JExpandablePanel(){super();initComponents();}private void initComponents() {this.setLayout(new BorderLayout());Color theme = Color.BLACK;headerPanel = new HeaderPanel(theme, "欢迎登录");headerPanel.addMouseListener(new PanelAction());contentPanel = new ContentPanel(theme);contentPanel.createContent();this.add(headerPanel, BorderLayout.NORTH);this.add(contentPanel, BorderLayout.CENTER);setOpaque(false);}class PanelAction extends MouseAdapter{    public void mousePressed(MouseEvent e)      {      HeaderPanel hp = (HeaderPanel)e.getSource();      if(contentPanel.isShowing())    {    contentPanel.setVisible(false);    hp.setShow(false);    }    else     {    contentPanel.setVisible(true);    hp.setShow(true);    }    hp.getParent().validate();    hp.getParent().repaint();    }  }public static void main(String[] args){        JFrame mainFrame = new JFrame("UI Demo - Gloomyfish");        mainFrame.getContentPane().setLayout(new BorderLayout());        JPanel myPanel = new JPanel();        myPanel.setLayout(new GridBagLayout());        GridBagConstraints gbc = new GridBagConstraints();          JPanel[] panels = new JPanel[4]; //         gbc.insets = new Insets(1,3,0,3);          gbc.weightx = 1.0;          gbc.fill = GridBagConstraints.HORIZONTAL;          gbc.gridwidth = GridBagConstraints.REMAINDER;          for(int j = 0; j < panels.length; j++)          {          panels[j] = new JExpandablePanel();        myPanel.add(panels[j], gbc);          }          mainFrame.getContentPane().add(myPanel, BorderLayout.NORTH);        mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);          mainFrame.pack();        mainFrame.setVisible(true);  }}

效果图：

 

顶级技巧：

为了保证内容面板展开与收起时候，UI自动pack与刷新。尽量不要

设置UI的固定大小。使用JExpandablePanel时候，推荐使用GridBagLayout