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

简介: 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

相关文章
|
4月前
|
JavaScript
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
248 1
|
开发框架 API C++
ESP32 + HaaS Python UI Lite 组件 打造倒计时面板
ESP32 + HaaS Python UI Lite 组件 打造倒计时面板
170 0
Vant UI 中 van-collapse 下拉折叠面板如何默认展开第一项
Vant UI 中 van-collapse 下拉折叠面板如何默认展开第一项
810 0
Vant UI 中 van-collapse 下拉折叠面板如何默认展开第一项
|
开发工具 内存技术
启明云端分享:86盒智能新型开关面板UI设计
86 盒智能新型开关面板是基于公司 8ms GUI 平台开发的,用户新建工程后,在设计器实现 UI设计。针对86面板UI,启明云端在8ms开发工具平台上提供了丰富的素材,您可以一健克隆,快速出品产品DEMO。
387 0
启明云端分享:86盒智能新型开关面板UI设计
|
传感器 数据可视化 芯片
启明云端分享:可私人订制UI的86盒智能新型开关面板
今天给大家介绍的是86盒智能新型开关面板,86 盒智能新型开关面板是基于公司 8ms GUI 平台开发的,用户新建工程后,在设计器实现 UI 设计,在积木(Blockly)实现逻辑设计,代码编译成功后,通过烧录工具,将整个工程下载到 86 盒智能新型开关面板。
387 0
启明云端分享:可私人订制UI的86盒智能新型开关面板
|
Java
Swing UI - 可收起与开展内容面板实现演示
基于JAVA Swing实现的自定义组件可折叠的JPanel组件 基本思想: 可折叠面板,分为两个部分-头部面板与内容面板 头部面板– 显示标题,以及对应的icon图标,监听鼠标事件决定内容面板隐藏或者显示 内容面板– 普通的JPanel组件。
1144 0
|
5天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
1月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
110 3