Collapse折叠面板
折叠面板可以用作空间上合理利用,可以随心所欲展开喜欢的内容,收起不喜欢的内容.
比如在idea编辑器中通过alt+4唤醒运行日志,再次alt+4可以隐藏.
在h5中,可以通过很简单的display属性实现,
思路
- 总面板以标题区域和内容区域组成
- 点击标题区域时隐藏内容区域,再次点击显示内容区域,重复此流程
那么关心的核心内容就是内容区域是否是显示状态 - 隐藏内容组件同时,需要隐藏内容组件的占用空间,那么可以借助JXMultiSplitPane来处理
swing实现
代码
tips
- 需要swing 布局\内置组件\事件有一定了解
- 需要swingx有一定了解
import cn.hutool.core.util.RandomUtil;
import com.formdev.flatlaf.FlatLightLaf;
import com.mynote.core.ui.BorderBuilder;
import com.mynote.core.ui.ColorBuilder;
import com.mynote.core.util.FrameUtil;
import com.mynote.core.view.Row;
import com.mynote.example.demo.AbstractDefaultPanel;
import org.jdesktop.swingx.JXMultiSplitPane;
import org.jdesktop.swingx.MultiSplitLayout;
import javax.swing.*;
import java.awt.*;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
/**
* 折叠面板测试
*/
public class CollapseTest extends AbstractDefaultPanel {
private Icon collapsedIcon;
private Icon expandedIcon;
private MultiSplitLayout multiSplitLayout;
private JXMultiSplitPane collapsePanel;
private Row title;
private JLabel titleLabel;
private Row content;
@Override
protected void init() {
/*切割面板布局*/
String defaultLayout = "(COLUMN " +
"(LEAF name=title weight=0.1)" +
"(LEAF name=content weight=0.9)" +
")";
multiSplitLayout = new MultiSplitLayout(MultiSplitLayout.parseModel(defaultLayout));
collapsedIcon = UIManager.getIcon("Tree.collapsedIcon");
expandedIcon = UIManager.getIcon("Tree.expandedIcon");
collapsePanel = new JXMultiSplitPane();
collapsePanel.setLayout(multiSplitLayout);
collapsePanel.setBackground(Color.white);
collapsePanel.setBorder(BorderFactory.createLineBorder(ColorBuilder.LABEL_GRAY_COLOR1));
createTitle();
createContent();
}
private void createTitle() {
title = new Row();
titleLabel = new JLabel("collapse测试", collapsedIcon, SwingConstants.CENTER);
title.add(titleLabel);
collapsePanel.add(title, "title");
}
private void createContent() {
content = new Row();
String text = RandomUtil.randomString(200);
JTextArea textArea = new JTextArea(text);
textArea.setPreferredSize(new Dimension(400, 200));
textArea.setEditable(false);
textArea.setLineWrap(true);
textArea.setBackground(Color.white);
content.setBackground(Color.white);
content.add(textArea);
collapsePanel.add(content, "content");
}
@Override
protected void render() {
multiSplitLayout.displayNode("content",false);
multiSplitLayout.layoutByWeight(title);
view.add(collapsePanel, "center,w 400");
super.add(view);
}
@Override
protected void bindEvents() {
title.addMouseListener(new MouseAdapter() {
@Override
public void mouseClicked(MouseEvent e) {
boolean isShow = content.isVisible();
multiSplitLayout.displayNode("content",!isShow);
if (isShow) {
titleLabel.setIcon(collapsedIcon);
title.setBorder(BorderFactory.createEmptyBorder());
} else {
titleLabel.setIcon(expandedIcon);
title.setBorder(BorderBuilder.bottomBorder(1, ColorBuilder.LABEL_GRAY_COLOR1));
}
// collapsePanel.revalidate();
// collapsePanel.repaint();
multiSplitLayout.layoutByWeight(title);
}
});
}
public static void main(String[] args) {
FlatLightLaf.install();
FrameUtil.launchTest(new CollapseTest());
}
}