Android vector path strokeLineCap round XML线条圆头样式

8次阅读

Android vector path strokeLineCap round XML线条圆头样式

vector xmlstrokeLineCap 设为 round 没生效?

直接原因是:androidVectorDrawable 在 API 24 以下不支持 strokeLineCapstrokeLineJoin 属性,它们会被完全忽略。你写的 android:strokeLineCap="round" 在旧设备上等于没写。

实操建议:

  • 检查目标最低 SDK:minSdkVersion ≥ 24 才能安全使用 strokeLineCap
  • 若需兼容 API 21–23,必须改用 PathParser 手动扩展路径端点(比如在每段线头加半圆弧),或改用 PNG 替代
  • 注意 android studio 预览可能显示正常(它用高版本渲染引擎),但真机跑低版本会回退为 butt

XML 里怎么正确写 strokeLineCap="round"

语法本身很简单,但位置和组合容易错。它必须写在 <path></path> 标签内,且只对带 android:strokeWidth 的描边路径起作用 —— 填充色(android:fillColor)完全不响应这个属性。

常见错误现象:

  • android:strokeLineCap="round" 写在 <group></group> 或根 <vector></vector> 上 → 无效
  • 漏了 android:strokeWidth(哪怕设为 1)→ 圆头不出现
  • 路径是闭合的(以 Z 结尾)→ strokeLineCap 对首尾连接点无影响,只作用于开放路径的起点和终点

正确示例:

<path     android:pathData="M10,20 L90,20"     android:strokeColor="#000"     android:strokeWidth="4"     android:strokeLineCap="round" />

为什么有时 round 看起来像 butt

本质是线条太短或 strokeWidth 太大,导致两个圆头重叠或超出可视区。Android 的圆头半径 = strokeWidth / 2,它会向外延伸,不占路径长度本身。

使用场景下要注意:

  • 短线段(比如 M0,0 L1,0)+ 大描边(strokeWidth="8")→ 圆头覆盖整个线段,视觉上只剩两个圆 blob
  • 路径起点/终点靠近 View 边界 → 圆头被裁剪,看起来像平头
  • 嵌套在 <group></group> 里做了 android:scaleX → 缩放不影响 strokeLineCap 半径计算,可能导致比例失调

替代方案:API 21–23 兼容 round 头的务实做法

不升级 minSdk 的前提下,真要圆头,只能绕过 vector 原生能力。最可行的是预处理 SVG 路径,在导出前把直线端点手动替换成带圆角的贝塞尔曲线(即用 AC 指令模拟半圆)。

或者更轻量:

  • AppCompatImageView + app:srcCompat 加载 vector,确保 runtime 使用 VectorDrawableCompat(但它仍不支持 strokeLineCap
  • 对关键图标单独切两套资源:drawable-v24/ 放带 round 的 vector,drawable/ 放已烘焙好圆头效果的 PNG
  • 避免在动画中动态修改 strokeLineCap —— 它不是可动画属性,也不会触发重绘

真正麻烦的不是写法,是得时刻盯着 minSdk 和设计稿里那几像素的圆头是否在所有机型上都露出来了。

text=ZqhQzanResources