swing-扩展徽章组件JEBadge
前言
因为工作原因，好久没有写swing组件了，最近准备优化一个功能,希望有类似徽章的功能。
徽章在平时的app和h5 页面上经常常见 ，那么在swing中如何实现一个徽章功能呢。
技术分析
为什么不选择绘制方式，却选择JLayeredPane ？
- 比如扩展border ，自定义paintBorder，会什么样的效果
- 比如使用JLayer , 自定义LayerUI , 会什么样的效果
使用徽章元素绘制在默认组件上，根据默认组件上基于组件大小的相对位置定位徽章位置。
使用层级面板JLayeredPane 设置默认组件和徽章位于不同层级
实现徽章的小红点、自定义图标、最大值、自定义位置 功能
依赖组件
MigLayout ：可以方便的布局、调整组件大小和位置的框架
FlatLaf ： 大部分swing组件都已美化，至少符合个人的审美
MigLayout 和FlatLaf Maven 依赖参考
<dependency>
<groupId>com.miglayout</groupId>
<artifactId>miglayout-swing</artifactId>
<version>5.2</version>
</dependency>
<dependency>
<groupId>com.formdev</groupId>
<artifactId>flatlaf</artifactId>
<version>2.1</version>
</dependency>
JEBadge 代码
ThemeColor 只是个人喜欢的色值， 使用Color类也可
import cn.hutool.core.util.StrUtil;
import cn.note.swing.core.view.theme.ThemeColor;
import com.formdev.flatlaf.FlatClientProperties;
import net.miginfocom.swing.MigLayout;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import javax.annotation.Nonnull;
import javax.swing.*;
import javax.swing.event.AncestorEvent;
import javax.swing.event.AncestorListener;
import java.awt.*;
/**
* 基于MigLayout 布局和Flatlaf UI
* 扩展组件-徽章
*
* 支持dot 小红点
* 支持数值
* 支持图标
* 支持位置 NORTH_WEST SOUTH_WEST NORTH_EAST SOUTH_EAST
*
* 使用示例:
*
* JButton button3 = new JButton("MaxCount");
* JEBadge button3Badge = new JEBadge(button3);
* button3Badge.setCount(999);
* button3Badge.setMaxBadgeCount(99);
*
*
* @author jee
*/
public class JEBadge extends JLayeredPane {
private static Logger log = LoggerFactory.getLogger(JEBadge.class);
/**
* 默认前景色
*/
private final Color DEFAULT_FOREGROUND = Color.white;
/**
* 默认背景色
*/
private final Color DEFAULT_BACKGROUND = ThemeColor.dangerColor;
/**
* 默认图标时背景色
*/
private final Color DEFAULT_ICON_BACKGROUND = ThemeColor.noColor;
private JComponent wrapComp;
/**
* 颜色按钮
*/
private JButton badgeBtn;
/**
* 使用自定义图标
*/
private Icon badgeIcon;
/**
* 是否显示点
*/
private boolean dot;
/**
* 徽章大小
*/
private int badgeSize;
/**
* 徽章计数
*/
private int badgeCount;
/**
* 最大数量
*/
private int maxBadgeCount;
/**
* 默认位置
*/
private int badgeLocation = SwingConstants.NORTH_EAST;
public JEBadge(@Nonnull JComponent wrapComp) {
this(wrapComp, false);
}
public JEBadge(@Nonnull JComponent wrapComp, boolean dot) {
this.wrapComp = wrapComp;
badgeBtn = new JButton();
// 设置大小
if (dot) {
badgeSize = 8;
} else {
badgeSize = UIManager.getFont("Label.font").getSize() * 2;
}
this.setLayout(new MigLayout("insets " + badgeSize / 2, "grow", "grow"));
this.add(wrapComp, "center");
this.setLayer(wrapComp, JLayeredPane.DEFAULT_LAYER);
// 圆形徽章
badgeBtn.putClientProperty(FlatClientProperties.STYLE, "borderWidth:0");
badgeBtn.setBorderPainted(false);
badgeBtn.setForeground(DEFAULT_FOREGROUND);
badgeBtn.setBackground(DEFAULT_BACKGROUND);
badgeBtn.putClientProperty(FlatClientProperties.BUTTON_TYPE, FlatClientProperties.BUTTON_TYPE_ROUND_RECT);
this.setLayer(badgeBtn, JLayeredPane.MODAL_LAYER);
setDot(dot);
// 监听组件显示后追加徽章
this.wrapComp.addAncestorListener(new AncestorListener() {
@Override
public void ancestorAdded(AncestorEvent event) {
setBadgeLocation(wrapComp.getWidth(), wrapComp.getHeight());
}
@Override
public void ancestorRemoved(AncestorEvent event) {
}
@Override
public void ancestorMoved(AncestorEvent event) {
}
});
}
/**
* 设置徽章的四个角落位置
*
* @param location 仅支持SwingConstants.NORTH_WEST SOUTH_WEST NORTH_EAST SOUTH_EAST
*/
public void setBadgeLocation(int location) {
if (location == SwingConstants.NORTH_WEST) {
this.badgeLocation = SwingConstants.NORTH_WEST;
} else if (location == SwingConstants.SOUTH_WEST) {
this.badgeLocation = SwingConstants.SOUTH_WEST;
} else if (location == SwingConstants.NORTH_EAST) {
this.badgeLocation = SwingConstants.NORTH_EAST;
} else if (location == SwingConstants.SOUTH_EAST) {
this.badgeLocation = SwingConstants.SOUTH_EAST;
} else {
log.warn("参数不正确,无法更新位置,使用默认位置NORTH_EAST");
this.badgeLocation = SwingConstants.NORTH_EAST;
}
}
/**
* 设置徽章位置
*
* @param x x轴距离
* @param y y轴距离
*/
private void setBadgeLocation(int x, int y) {
// JLabel 无insets 特殊处理偏移量
int offsetX = 0;
if (wrapComp instanceof JLabel) {
offsetX = badgeSize;
} else {
offsetX = badgeSize / 2;
}
if (badgeLocation == SwingConstants.NORTH_EAST) {
x = x + offsetX;
y = 0;
} else if (badgeLocation == SwingConstants.SOUTH_EAST) {
x = x + offsetX;
} else if (badgeLocation == SwingConstants.NORTH_WEST) {
x = 0;
y = 0;
} else if (badgeLocation == SwingConstants.SOUTH_WEST) {
x = 0;
}
String location = StrUtil.format("pos {} {}", x, y);
this.remove(badgeBtn);
this.add(badgeBtn, location);
this.revalidate();
this.repaint();
}
/**
* 设置徽章数
* 对于dot模式不生效
*
* @param count 数量
*/
public void setCount(int count) {
if (dot) {
log.warn("已开启dot模式,count设置无效");
return;
}
if (count == 0) {
this.remove(badgeBtn);
} else {
badgeCount = count;
if (maxBadgeCount > 0 && badgeCount > maxBadgeCount) {
badgeBtn.setText(maxBadgeCount + "+");
} else {
badgeBtn.setText(String.valueOf(count));
}
}
}
/**
* 设置最大徽章数量
*
* @param maxBadgeCount 徽章数量
*/
public void setMaxBadgeCount(int maxBadgeCount) {
this.maxBadgeCount = maxBadgeCount;
this.setCount(this.badgeCount);
}
/**
* 设置徽章背景颜色
*
* @param color 颜色
*/
public void setBadgeBackgroundColor(Color color) {
badgeBtn.setBackground(color);
}
/**
* 设置徽章前景颜色
* 对于dot模式不生效
*
* @param color 颜色
*/
public void setBadgeForegroundColor(Color color) {
badgeBtn.setForeground(color);
}
/**
* 设置徽章是否按点显示
*
* @param dot 是否显示点装
*/
public void setDot(boolean dot) {
this.dot = dot;
if (this.dot) {
badgeBtn.setMargin(new Insets(2, 2, 2, 2));
badgeBtn.setText(null);
badgeBtn.setIcon(null);
} else {
badgeBtn.setMargin(new Insets(2, 4, 2, 4));
badgeBtn.setIcon(null);
if (badgeCount > 0) {
this.setCount(badgeCount);
}
}
}
/**
* 设置徽章使用自定义图标
*
* @param icon 图标
*/
public void setBadgeIcon(Icon icon) {
badgeBtn.setIcon(icon);
badgeBtn.setText(null);
badgeBtn.setBackground(DEFAULT_ICON_BACKGROUND);
this.dot = false;
}
}
JEBadge 测试代码
图片基于此代码
import cn.hutool.core.collection.CollUtil;
import cn.note.swing.core.util.FrameUtil;
import cn.note.swing.core.view.AbstractMigView;
import cn.note.swing.core.view.base.ButtonFactory;
import cn.note.swing.core.view.icon.SvgIconFactory;
import cn.note.swing.core.view.panel.PureColorPanel;
import cn.note.swing.core.view.theme.ThemeColor;
import cn.note.swing.core.view.theme.ThemeFlatLaf;
import com.formdev.flatlaf.extras.FlatSVGIcon;
import net.miginfocom.swing.MigLayout;
import javax.swing.*;
import java.util.List;
/**
* 徽章测试
*/
public class JEBadgeTest extends AbstractMigView {
@Override
protected MigLayout defineMigLayout() {
return new MigLayout("");
}
@Override
protected void render() {
// JEBadge Examples
JTextArea ps = new JTextArea("在没有insets的组件上使用徽章,需要特殊判断比如:JLabel ,虽然大部分组件具有insets,但是特殊组件时,可能JEBadge并不适用!");
ps.setEditable(false);
ps.setLineWrap(true);
view.add(ps, "growx,wrap");
// 系统组件
JEBadge button1Badge = new JEBadge(new JButton("Count"));
button1Badge.setCount(9);
JEBadge button2Badge = new JEBadge(new JButton("LargeCount"));
button2Badge.setCount(999);
JEBadge button3Badge = new JEBadge(ButtonFactory.primaryButton("MaxCount"));
button3Badge.setCount(999);
button3Badge.setMaxBadgeCount(99);
FlatSVGIcon okSvgIcon = SvgIconFactory.icon(SvgIconFactory.Message.ok);
okSvgIcon.setColorFilter(new FlatSVGIcon.ColorFilter(c -> ThemeColor.greenColor));
JEBadge button4Badge = new JEBadge(new JButton("IconBadge"));
button4Badge.setBadgeIcon(okSvgIcon);
JEBadge button5Badge = new JEBadge(new JButton("Dot"), true);
addRow("默认测试:", CollUtil.newArrayList(button1Badge, button2Badge, button3Badge, button4Badge, button5Badge));
// JEBadge with custom components
PureColorPanel pcp1 = new PureColorPanel(ThemeColor.primaryColor, 100);
pcp1.setText("NORTH_EAST");
JEBadge pcp1Badge = new JEBadge(pcp1, true);
FlatSVGIcon failSvgIcon = SvgIconFactory.icon(SvgIconFactory.Message.error);
failSvgIcon.setColorFilter(new FlatSVGIcon.ColorFilter(c -> ThemeColor.dangerColor));
PureColorPanel pcp2 = new PureColorPanel(ThemeColor.greenColor, 120,true);
pcp2.setText("SOUTH_EAST");
JEBadge pcp2Badge = new JEBadge(pcp2, true);
pcp2Badge.setBadgeIcon(failSvgIcon);
pcp2Badge.setBadgeLocation(SwingConstants.SOUTH_EAST);
PureColorPanel pcp3 = new PureColorPanel(ThemeColor.primaryColor, 100);
pcp3.setText("NORTH_WEST");
JEBadge pcp3Badge = new JEBadge(pcp3, true);
pcp3Badge.setBadgeLocation(SwingConstants.NORTH_WEST);
PureColorPanel pcp4 = new PureColorPanel(ThemeColor.greenColor, 100);
pcp4.setText("SOUTH_WEST");
JEBadge pcp4Badge = new JEBadge(pcp4, true);
pcp4Badge.setBadgeLocation(SwingConstants.SOUTH_WEST);
PureColorPanel pcp5 = new PureColorPanel(ThemeColor.primaryColor, 100);
JEBadge pcp5Badge = new JEBadge(pcp5);
pcp5Badge.setCount(8);
addRow("自定义组件:", CollUtil.newArrayList(pcp1Badge, pcp2Badge, pcp3Badge, pcp4Badge, pcp5Badge));
// JEBadge with Jlabel
JEBadge label1Badge = new JEBadge(new JLabel("JLabelBadge1"));
label1Badge.setCount(55);
JEBadge label2Badge = new JEBadge(new JLabel("NORTH_EAST"), true);
JEBadge label3Badge = new JEBadge(new JLabel("SOUTH_EAST"), true);
label3Badge.setBadgeLocation(SwingConstants.SOUTH_EAST);
addRow("在JLabel上使用:", CollUtil.newArrayList(label1Badge, label2Badge, label3Badge));
}
private void addRow(String category, List<? extends JComponent> components) {
JPanel row = new JPanel();
row.add(new JLabel(category));
components.forEach(c -> row.add(c));
view.add(row, "wrap");
}
public static void main(String[] args) {
ThemeFlatLaf.install();
FrameUtil.launchTest(JEBadgeTest.class);
}
}