如何在Android Studio中制作Custom Shape Button自定义形状按钮组

这类特殊形状按钮完全可以实现，主流有三种实现方案，你可以根据你的兼容性需求、形状复杂度选择：

方案1：clip-path 裁剪（实现成本最低） #

直接用CSS的clip-path属性对普通按钮元素做形状裁剪即可，不需要额外新增DOM节点，而且按钮的点击、hover等交互事件只会在裁剪后的可见区域触发，完全符合按钮交互逻辑。

• 示例代码（以右侧带半圆内凹的按钮为例）：

.custom-btn {
  width: 180px;
  height: 48px;
  background: #2385bb;
  color: #fff;
  border: none;
  cursor: pointer;
  /* 路径参数可根据你要的形状调整 */
  clip-path: polygon(
    0 0, 
    100% 0, 
    100% calc(50% - 12px), 
    calc(100% - 12px) 50%, 
    100% calc(50% + 12px), 
    100% 100%, 
    0 100%
  );
}

• 如果你对路径坐标不熟悉，可以找可视化的clip-path生成工具，拖拽调整出目标形状后直接复制生成的CSS代码即可。

方案2：伪元素拼接（兼容性最好） #

如果需要兼容IE等低版本浏览器，可以用主按钮元素加::before/::after伪元素拼接出目标形状：主元素做基础的矩形按钮主体，伪元素做凸起/内凹的特殊形状，用绝对定位固定到对应位置，内凹效果只需要把伪元素的背景色设置为和按钮所在页面的背景色一致即可。

• 示例代码：

.custom-btn {
  position: relative;
  width: 180px;
  height: 48px;
  padding-right: 24px;
  background: #2385bb;
  color: #fff;
  border: none;
  cursor: pointer;
}
.custom-btn::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /* 和页面背景色保持一致即可做出内凹效果 */
  background: #ffffff;
}

方案3：SVG绘制（复杂形状首选） #

如果按钮形状非常复杂，或者需要在不同尺寸下保持形状不变形，可以直接用SVG绘制按钮的形状路径，把点击等交互事件绑定在SVG元素上即可，还可以很方便的实现渐变、描边、特殊纹理等效果，自适应能力远高于CSS实现。

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