Android：如何绘制Vector Drawable？求教程与工具指导

一、核心概念拆解（无需复杂数学） #

不用纠结深层数学原理，先搞懂几个核心元素的作用：

• vector：整个矢量图的画布，viewportWidth/viewportHeight是画布的坐标系统（左上角为原点(0,0)，x向右增大，y向下增大），和实际显示的dp尺寸无关，用来统一绘制比例。
• group：相当于图层分组，可以对一组path做平移、旋转、缩放等变换，比如把多个路径放到一个group里，统一调整位置。
• path：绘制具体形状的核心，通过pathData里的指令来定义路径：
  • M x,y：Move to，把“画笔”移动到(x,y)点，不画线
  • L x,y：Line to，从当前点画直线到(x,y)
  • A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y：Arc to，画圆弧，rx/ry是椭圆的x/y半径，large-arc-flag选0（小弧）或1（大弧），sweep-flag选0（逆时针）或1（顺时针）
  • C x1,y1 x2,y2 x,y：Cubic Bezier，从当前点到(x,y)画曲线，(x1,y1)和(x2,y2)是两个控制点，用来调整曲线弧度
  • Z：Close，闭合当前路径

二、可视化理解与实用工具 #

• 可视化辅助：把viewport想象成一张方格纸，每个坐标对应方格上的点。比如画一个100x50的圆角矩形，pathData就是M0,0 L100,0 A5,5 0 0 1 100,50 L0,50 A5,5 0 0 1 0,0 Z，对应方格纸上的四个角加圆角。
• 绘图工具：
  • Android Studio自带的Vector Asset Studio：直接新建Vector Asset，用内置的形状编辑器拖曳调整，实时生成代码，不用手动写指令。
  • 设计工具转SVG：用Sketch、Figma画好气泡，导出SVG后，在Android Studio里导入成Vector Drawable（注意清理冗余属性）。
  • 在线可视化编辑器：Android Studio的Vector Editor支持直接拖曳路径节点，调整控制点，直观看到形状和代码的对应关系。

三、信使文本气泡代码实现（含尾部） #

气泡由圆角矩形主体+尾部尖点组成，以下是完整代码，重点看尾部的绘制逻辑：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="120dp"
    android:viewportWidth="200"
    android:viewportHeight="120">

    <!-- 蓝色信使气泡，带左下尾部 -->
    <path
        android:fillColor="#007AFF"
        android:pathData="M20,10 
                         L180,10 
                         A10,10 0 0 1 190,20 
                         L190,100 
                         A10,10 0 0 1 180,110 
                         L40,110 
                         L30,120 
                         L20,110 
                         Z"/>
</vector>

代码解释： #

1. viewportWidth="200" android:viewportHeight="120"：定义画布坐标范围为200x120，方便精准绘制。
2. 主体圆角矩形：从(20,10)开始，画直线到右上角(180,10)，用A10,10画10dp的圆角到(190,20)，再直线到右下角(190,100)，同样画圆角到(180,110)。
3. 尾部绘制：从(180,110)直线到(40,110)，然后到尾部尖点(30,120)，再回到(20,110)，最后用Z闭合路径，形成三角形尾部。
4. 若要尾部更圆润，把尾部的直线换成贝塞尔曲线，比如将L30,120 L20,110改成C28,116 22,116 20,110，这样尾部会有自然的弧度。

内容的提问来源于stack exchange，提问作者Regress.arg