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;
	}

	@Override
	protected 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;
	}

	@Override
	public Dimension getPreferredSize() {
		return new Dimension(this.getWidth(), height);
	}

	@Override
	public 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