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