Android XML drawable如何实现切角替代圆角（类M3 cornerFamily）

实现说明 #

常规<shape>标签的<corners>属性仅支持圆弧圆角，无法直接实现M3 cornerFamily 中cut（直边切角）的效果，最轻量化的实现方式是使用Vector Drawable自定义路径，无需引入自定义View，兼容性覆盖绝大多数主流Android版本。

效果参考：

可直接复用的代码 #

替换你原有的圆角shape即可，以下代码实现和原示例一致的填充色、10dp等效切距的切角效果：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="match_parent"
    android:height="match_parent"
    android:viewportWidth="100"
    android:viewportHeight="100">
    <!-- path坐标对应四个角的切角位置，调整数值可修改切角大小 -->
    <path
        android:fillColor="@color/colorWhiteDark_Primary"
        android:pathData="M10,0 L90,0 L100,10 L100,90 L90,100 L10,100 L0,90 L0,10 Z" />
</vector>

参数调整说明 #

• 切角大小修改：示例中viewport宽高设为100，切角点位偏移为10，对应10%的切角占比；如果需要精准匹配10dp切距，可根据控件实际宽高换算坐标比例，或直接将viewport设为控件实际dp尺寸，对应点位偏移填10即可。
• 单角定制：如果需要单独设置某一个角不切、或切角大小不同，直接修改path的点位坐标即可，例如不需要左上角切角时，将路径起始点改为M0,0，删除对应切角线段即可。
• 低版本兼容：如果需要适配API 21以下设备，在模块级build.gradle中开启vector兼容配置即可：

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

不推荐使用layer-list叠加三角形遮罩的方案，该方案适配不同控件尺寸的成本极高，代码冗余，维护性远低于Vector方案。

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