Android 通过Vector Drawable绘制心形

Posted 2021-08-12 路 宇

效果图如图所示：

在res/drawable目录下创建heart.xml，使用vector标签定义：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="256dp"
    android:height="256dp"
    android:viewportWidth="32"
    android:viewportHeight="32">
    <path
        android:fillColor="#8f00"
        android:pathData="M20.5,9.5
                          c-1.955,0,-3.83,1.268,-4.5,3
                          c-0.67,-1.732,-2.547,-3,-4.5,-3
                          C8.957,9.5,7,11.3432,7,14
                          c0,3.53,3.793,6.257,9,11.5
                          c5.207,-5.242,9,-7.97,9,-11.5
                          C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>

属性分析：

1. android:width=“256dp” 指定Drawable的宽度

2. android:height=“256dp” 指定Drawable的高度

3. android:viewportWidth=“32” 将绘制向量路径的虚拟画布的宽度

4. android:viewportHeight=“32” 定义将绘制向量路径的虚拟画布的高度

5. path：使用path标签定义形状

6. android:fillColor="#8f00" 形状的颜色

7. android:pathData：使用与SVG路径元素相同的语法来定义任意形状或线条

最后在布局页面调用即可：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/heart"
        />
</LinearLayout>