Java Swing 自定义组件库分享第八期
作者：袖梨
2026-05-28
Swing原生的JCheckBox组件在不同操作系统下呈现不同风格，通过自定义Icon接口可实现统一且灵活的复选框样式。本文将详细介绍CusCheckBox的设计思路与实现方法。
自定义复选框 — CusCheckBox
一、背景
由于Swing的JCheckBox采用系统默认样式，导致跨平台显示效果不一致，且无法自定义圆角、颜色等视觉效果。CusCheckBox通过实现Icon接口，提供了完整的自定义绘制方案，支持圆角设置、多状态颜色配置以及悬停效果等特性。
二、核心设计
CusCheckBox由两个核心类构成：
- CheckBoxIcon：负责图标绘制逻辑，实现背景、边框及选中标记的渲染
- CusCheckBox：继承JCheckBox，集成自定义图标并提供丰富的样式配置方法
三、CheckBoxIcon 源码
import lombok.Setter;import javax.swing.*;
import java.awt.*;/**
* 自定义 JCheckBox 图标类
* 实现 Icon 接口，负责绘制复选框的图标部分
*
* 使用示例：
* CheckBoxIcon icon = new CheckBoxIcon(20, Color.decode("#409EFF"), Color.WHITE);
*/
@Setter
public class CheckBoxIcon implements Icon {
/** 复选框大小 */
private int size;
/** 圆角 */
private boolean rounded = true;
/** 圆角半径 */
private int borderRadius = 8;
/** 边框宽度 */
private int borderThickness = 1;
/** 边框颜色 */
private Color borderColor = Color.GRAY;
/** 选中背景颜色 */
private Color selectedBg;
/** 对勾颜色 */
private Color checkColor;
/** 悬停颜色 */
private Color hoverColor;
/** 禁用颜色 */
private Color disabledColor = Color.decode("#E4E7ED");
/** 对勾宽度 */
private float checkThickness = 2.0f;
/** 是否使用对勾（true=对勾，false=叉号） */
private boolean useCheckMark = true;
/** 是否启用 */
private boolean enabled = true; /**
* 构造函数
* @param size 图标尺寸
* @param selectedBg 选中时的背景色
* @param checkColor 对勾颜色
*/
public CheckBoxIcon(int size, Color selectedBg, Color checkColor) {
this.size = Math.max(16, size);
this.selectedBg = selectedBg;
this.checkColor = checkColor;
} @Override
public void paintIcon(Component c, Graphics g, int x, int y) {
AbstractButton button = (AbstractButton) c;
ButtonModel model = button.getModel();
Graphics2D g2 = (Graphics2D) g;
// 启用抗锯齿
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
// 获取状态
boolean isSelected = model.isSelected();
boolean isPressed = model.isPressed();
boolean isRollover = model.isRollover();
// 计算实际绘制区域
int drawWidth = size - 1;
int drawHeight = size - 1;
// 根据状态选择颜色
Color currentBorder = enabled ? borderColor : disabledColor;
Color currentBg = Color.WHITE;
if (isSelected) {
currentBg = enabled ? selectedBg : disabledColor.brighter();
}
if (isRollover && !isPressed && enabled && null != hoverColor) {
currentBg = hoverColor;
}
if (isPressed && enabled) {
currentBg = selectedBg.darker();
}
if (!enabled) {
currentBg = disabledColor;
}
// 绘制背景
g2.setColor(currentBg);
if (rounded) {
g2.fillRoundRect(x, y, drawWidth, drawHeight, borderRadius, borderRadius);
} else {
g2.fillRect(x, y, drawWidth, drawHeight);
}
// 绘制边框
g2.setColor(currentBorder);
g2.setStroke(new BasicStroke(borderThickness));
if (rounded) {
g2.drawRoundRect(x, y, drawWidth, drawHeight, borderRadius, borderRadius);
} else {
g2.drawRect(x, y, drawWidth, drawHeight);
}
// 绘制选中标记
if (isSelected) {
drawCheckMark(g2, x, y, drawWidth, drawHeight);
}
} /**
* 绘制选中标记（对勾或叉号）
* @param g2 Graphics2D 对象
* @param x 起始 X 坐标
* @param y 起始 Y 坐标
* @param width 绘制宽度
* @param height 绘制高度
*/
private void drawCheckMark(Graphics2D g2, int x, int y, int width, int height) {
Color currentCheckColor = enabled ? checkColor : Color.DARK_GRAY;
g2.setColor(currentCheckColor);
g2.setStroke(new BasicStroke(checkThickness, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));
// 20% 内边距
float padding = width * 0.2f;
int startX = (int) (x + padding);
int startY = y + height / 2;
int midX = x + width / 2;
int midY = (int) (y + height - padding);
int endX = (int) (x + width - padding);
int endY = (int) (y + padding);
if (useCheckMark) {
// 对勾
g2.drawLine(startX, startY, midX, midY);
g2.drawLine(midX, midY, endX, endY);
} else {
// 叉号
g2.drawLine(startX, startY, endX, endY);
g2.drawLine(startX, endY, endX, startY);
}
} @Override
public int getIconWidth() {
return size;
} @Override
public int getIconHeight() {
return size;
} /**
* 设置图标尺寸
* @param size 尺寸
*/
public void setSize(int size) {
this.size = Math.max(16, size);
}
}
四、CusCheckBox 源码
import javax.swing.*;
import java.awt.*;/**
* 自定义复选框
* 通过自定义 Icon 实现统一的复选框样式
*
* 使用示例：
* CusCheckBox checkBox = new CusCheckBox("同意协议");
* checkBox.setSelected(true);
* checkBox.setHoverColor(Color.LIGHT_GRAY);
*/
public class CusCheckBox extends JCheckBox {
/** 默认尺寸 */
private static final int DEFAULT_SIZE = 20;
/** 默认选中背景颜色 */
private static final Color DEFAULT_BG = Color.decode("#409EFF");
/** 默认选中对勾颜色 */
private static final Color DEFAULT_CHECK = Color.WHITE;
/** 内部图标实例 */
private final CheckBoxIcon icon; /**
* 默认构造函数
* @param text 复选框文本
*/
public CusCheckBox(String text) {
this(text, DEFAULT_SIZE, DEFAULT_BG, DEFAULT_CHECK, false);
} /**
* 指定选中状态
* @param text 复选框文本
* @param selected 是否选中
*/
public CusCheckBox(String text, boolean selected) {
this(text, DEFAULT_SIZE, DEFAULT_BG, DEFAULT_CHECK, selected);
} /**
* 指定尺寸
* @param text 复选框文本
* @param size 图标尺寸
*/
public CusCheckBox(String text, int size) {
this(text, size, DEFAULT_BG, DEFAULT_CHECK, false);
} /**
* 指定尺寸和选中状态
* @param text 复选框文本
* @param size 图标尺寸
* @param selected 是否选中
*/
public CusCheckBox(String text, int size, boolean selected) {
this(text, size, DEFAULT_BG, DEFAULT_CHECK, selected);
} /**
* 指定颜色
* @param text 复选框文本
* @param bg 选中时背景色
* @param check 对勾颜色
*/
public CusCheckBox(String text, Color bg, Color check) {
this(text, DEFAULT_SIZE, bg, check, false);
} /**
* 指定颜色和选中状态
* @param text 复选框文本
* @param bg 选中时背景色
* @param check 对勾颜色
* @param selected 是否选中
*/
public CusCheckBox(String text, Color bg, Color check, boolean selected) {
this(text, DEFAULT_SIZE, bg, check, selected);
} /**
* 指定尺寸和颜色
* @param text 复选框文本
* @param size 图标尺寸
* @param bg 选中时背景色
* @param check 对勾颜色
*/
public CusCheckBox(String text, int size, Color bg, Color check) {
this(text, size, bg, check, false);
} /**
* 完整构造函数
* @param text 复选框文本
* @param size 图标尺寸
* @param bg 选中时背景色
* @param check 对勾颜色
* @param selected 是否选中
*/
public CusCheckBox(String text, int size, Color bg, Color check, boolean selected) {
super(text);
// 创建自定义图标
this.icon = new CheckBoxIcon(size, bg, check);
// 设置图标（选中和未选z共用同一个图标实例，通过状态区分绘制）
this.setIcon(icon);
this.setSelectedIcon(icon);
// 设置选中状态
this.setSelected(selected);
// 设置文本颜色和字体
this.setForeground(Color.BLACK);
this.setFont(new Font("Microsoft YaHei", Font.PLAIN, 16));
// 设置透明背景，让父容器背景显示
this.setOpaque(false);
// 禁用默认内容区域填充
this.setContentAreaFilled(false);
// 禁用边框绘制
this.setBorderPainted(false);
// 图标与文字间距
this.setIconTextGap(10);
} /**
* 获取自定义图标
* @return 图标对象
*/
@Override
public CheckBoxIcon getIcon() {
return icon;
} /**
* 设置图标尺寸
* @param size 尺寸
*/
public void setIconSize(int size) {
icon.setSize(size);
revalidate();
repaint();
} /**
* 设置选中时的背景色
* @param color 颜色
*/
public void setSelectedBackground(Color color) {
icon.setSelectedBg(color);
repaint();
} /**
* 设置对勾颜色
* @param color 颜色
*/
public void setCheckColor(Color color) {
icon.setCheckColor(color);
repaint();
} /**
* 设置边框颜色
* @param color 颜色
*/
public void setBorderColor(Color color) {
icon.setBorderColor(color);
repaint();
} /**
* 设置是否圆角
* @param rounded 是否圆角
*/
public void setRounded(boolean rounded) {
icon.setRounded(rounded);
repaint();
} /**
* 设置圆角半径
* @param radius 半径
*/
public void setBorderRadius(int radius) {
icon.setRounded(true);
icon.setBorderRadius(radius);
repaint();
} /**
* 设置边框粗细
* @param thickness 粗细
*/
public void setBorderThickness(int thickness) {
icon.setBorderThickness(thickness);
repaint();
} /**
* 设置对勾线条粗细
* @param thickness 粗细
*/
public void setCheckThickness(float thickness) {
icon.setCheckThickness(thickness);
repaint();
} /**
* 设置使用对勾还是叉号
* @param useCheckMark true=对勾，false=叉号
*/
public void setUseCheckMark(boolean useCheckMark) {
icon.setUseCheckMark(useCheckMark);
repaint();
} /**
* 设置悬停时的背景色
* @param color 颜色
*/
public void setHoverColor(Color color) {
icon.setHoverColor(color);
repaint();
} /**
* 重写 setEnabled 以同步图标状态
* @param enabled 是否启用
*/
@Override
public void setEnabled(boolean enabled) {
super.setEnabled(enabled);
if (icon != null) {
icon.setEnabled(enabled);
repaint();
}
}
}
五、核心功能说明
图标绘制（CheckBoxIcon）：
- paintIcon方法实现状态感知绘制，支持选中/悬停/禁用等多种交互状态
- drawCheckMark方法提供对勾和叉号两种标记绘制方案
- 支持圆角半径、边框样式、多状态颜色等20余项视觉配置
