效果图如图所示:
在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>
属性分析:
- android:width=“256dp” 指定Drawable的宽度
- android:height=“256dp” 指定Drawable的高度
- android:viewportWidth=“32” 将绘制向量路径的虚拟画布的宽度
- android:viewportHeight=“32” 定义将绘制向量路径的虚拟画布的高度
- path:使用path标签定义形状
- android:fillColor=“#8f00” 形状的颜色
- 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>