Android（API 21+）如何在按钮文本外绘制圆圈

这种「选中状态+当前标识」的需求在日历、日期选择器里特别常见，咱们可以用CSS类组合的方式来实现，逻辑清晰还容易维护：

1. HTML结构设计 #

给按钮添加两个独立的状态类，让状态可以自由组合：

• selected：标记选中状态（负责修改背景）
• current：标记当前数字（负责添加文本外的圆圈）

比如同时拥有两个类的按钮，就是「选中+当前」的双重状态：

<div class="btn-group">
  <button class="num-btn">21</button>
  <button class="num-btn selected">22</button>
  <button class="num-btn selected current">23</button> <!-- 双重状态 -->
  <button class="num-btn current">24</button> <!-- 仅当前状态 -->
  <button class="num-btn">25</button>
</div>

2. CSS样式实现 #

先写基础按钮样式，再分别处理两个状态，重点保证current的圆圈在任何状态下都能清晰显示：

/* 基础按钮样式 */
.num-btn {
  border: none;
  width: 40px;
  height: 40px;
  margin: 0 5px;
  border-radius: 50%; /* 可选：把按钮做成圆形，更贴合日历风格 */
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}

/* 选中状态：修改背景色 */
.num-btn.selected {
  background-color: #2563eb; /* 蓝色背景，可根据需求自定义 */
  color: white;
}

/* 当前状态：给文本添加外层圆圈 */
.num-btn.current {
  position: relative;
}
/* 用伪元素画圆圈，不会干扰按钮本身的背景样式 */
.num-btn.current::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid #ef4444; /* 红色圆圈，可自定义 */
  border-radius: 50%;
  pointer-events: none; /* 避免圆圈遮挡按钮点击事件 */
}

/* 可选优化：双重状态时调整圆圈颜色，提升对比度 */
.num-btn.selected.current::after {
  border-color: white; /* 选中状态下用白色圆圈，和蓝色背景更搭配 */
}

3. 效果说明 #

• 普通按钮：默认样式，无背景无圆圈
• 仅选中：蓝色背景+白色文字
• 仅当前：默认背景+红色圆圈包裹数字
• 选中+当前：蓝色背景+白色文字+白色外层圆圈（完美区分双重状态）

这种方式的核心是状态解耦，你只需要根据业务逻辑给按钮添加/移除对应的类就行，不用写复杂的条件判断样式，后期维护也很方便～

内容的提问来源于stack exchange，提问作者yitzih