Android矢量可绘制
在本教程中，我们将讨论Android Vector Drawable。
此外，我们将在我们的Android应用程序中实现它们。
Android矢量可绘制
通常，我们使用PNG作为可绘制图像。
为了使PNG图像适合不同的屏幕尺寸，我们创建了多个具有不同尺寸和密度的PNG素材资源。
随后，PNG图像会占用另外的空间并导致Android Apps的APK尺寸较大。
这就是Vector Drawable拯救我们的地方！它们是PNG图像的替代品。
VectorDrawable是在XML文件中定义为一组点，线和曲线及其关联颜色信息的矢量图形。
可以根据屏幕尺寸缩放它们，而不会降低质量。
它们也可以快速呈现到屏幕上。
VectorDrawable是一个XML文件。
您可以使用New | New在您的可绘制文件夹中添加一个Vector Vector。
矢量资产。
因此，我们可以创建"材质设计"图标的Vector drawables。
VectorDrawable的代码如下所示：
它们被设置在" vector"标签中。
android：viewportWidth和android：viewportHeight用于设置可绘制边界的宽度和高度。
在这些尺寸内，可绘制矢量在画布上绘制。
路径是创建可绘制对象的标签。
在路径内部，我们创建直线，曲线，弧线并设置边框，背景色。
我们在pathData中执行path命令。
Vector Drawables自Android Lollipop及更高版本开始引入，但由于向后兼容，它们也与早期版本兼容。
为矢量资产创建路径
路径命令由字母和坐标组成。
想象一下在进行绘画时创建路径。
大写字母表示绝对位置。
小写代表相对位置。
M – moveto命令。
这是一种将铅笔移动到视图上给定坐标的方式。
示例M 100100将虚拟铅笔移动到画布上的100、100坐标。L –命令行。
用于从当前位置到指定位置画一条线。
示例：" M 100 100，L 120 100"绘制一条水平线。
z-用于关闭路径。
它从最后位置到第一个位置画一条线。
示例" M 100 100 L 120 100 L 120 120 L 100 120 Z"创建一个正方形。C-用于创建贝塞尔曲线。
在此之后，我们需要指定三组坐标。
第一个和第二个将是起点和终点之间的两个控制点。" A" –用于绘制圆弧。
之后，您需要指定以下格式：(rx ry x轴旋转大弧标志sweep-flag x y)。
rx ry和x轴是指定的两个半径。
通过在group标签内设置path标签，我们可以在一个向量中指定多个路径。
利用上述知识，让我们在Android应用程序中创建一些有趣的随机矢量绘图。
Android矢量可绘制代码
下面给出了activity_main.xml布局的代码：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/ic_rectangle"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@drawable/ic_w"
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:src="@drawable/ic_w_fill"
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="16dp"
android:layout_gravity="center_vertical"
android:layout_height="16dp"
android:src="@drawable/ic_a"
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:src="@drawable/ic_c"
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:src="@drawable/ic_0"
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:src="@drawable/ic_jd"
</LinearLayout>
让我们一次查看每个Vector Drawables实现。
ic_rectangle.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="https://schemas.android.com/apk/res/android"
android:width="100dp"
android:height="100dp"
android:viewportHeight="100"
android:viewportWidth="100">
<path
android:name="light_triangle"
android:fillColor="@color/colorPrimary"
android:pathData="M 100,0 L 0,100 100,100 z"
<path
android:name="dark_triangle"
android:fillColor="@color/colorPrimaryDark"
android:pathData="M 0,0 L 100,0 0,100 z"
</vector>
在上面的代码中，我们创建了两个路径。
每个都是直角三角形。
在LinearLayout上进行设置将使背景看起来像：
ic_w.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="https://schemas.android.com/apk/res/android"
android:width="50dp"
android:height="50dp"
android:viewportHeight="50.0"
android:viewportWidth="50.0">
<group android:name="w">
<path
android:name="one"
android:pathData="M 25 0 L 10 40"
android:strokeColor="#FFF"
android:strokeWidth="1"
<path
android:name="two"
android:pathData="M 25 0 L 40 40"
android:strokeColor="#FFF"
android:strokeWidth="1"
<path
android:name="three"
android:pathData="M 10 40 L 0 0 "
android:strokeColor="#FFF"
android:strokeWidth="1"
<path
android:name="four"
android:pathData="M 40 40 L 50 0"
android:strokeColor="#FFF"
android:strokeWidth="1"
</group>
</vector>
在上面的代码中，我们尝试使用线条创建W符号。
注意：我们可以将所有内容合并到一个path命令中，而不是单独的路径。
尽管您可以使用多个路径来清楚地了解每个路径的作用。
ic_w_filled.xml在以下代码中，我们将使用z命令关闭路径并其中填充颜色：
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="https://schemas.android.com/apk/res/android"
android:width="50dp"
android:height="50dp"
android:viewportHeight="50.0"
android:viewportWidth="50.0">
<group android:name="wFilled">
<path
android:name="one"
android:pathData="M 25 0 L 10 40 M 25 0 L 40 40"
android:strokeColor="#000"
android:strokeWidth="1"
<path
android:name="two"
android:fillColor="@android:color/holo_orange_light"
android:pathData="M 10 40 L 0 0 L 25 0 Z"
android:strokeColor="#FFF"
android:strokeWidth="1"
<path
android:name="three"
android:fillColor="@android:color/holo_orange_light"
android:pathData="M 40 40 L 50 0 L 25 0 Z"
android:strokeColor="#FFF"
android:strokeWidth="1"
</group>
</vector>
ic_a.xml使用路径创建A字母。
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="https://schemas.android.com/apk/res/android"
android:width="50dp"
android:height="50dp"
android:viewportHeight="50.0"
android:viewportWidth="50.0">
<group android:name="a">
<path
android:name="one"
android:pathData="M 25 0 L 10 40"
android:strokeColor="#FFF"
android:strokeWidth="2"
<path
android:name="two"
android:pathData="M 25 0 L 40 40"
android:strokeColor="#FFF"
android:strokeWidth="2"
<path
android:name="three"
android:pathData="M 15 25 L 34 25"
android:strokeColor="#FFF"
android:strokeWidth="2"
</group>
</vector>
ic_c.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="https://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp"
android:viewportHeight="48.0"
android:viewportWidth="48.0">
<path
android:name="curves"
android:pathData="M 25 0 C -25 12.5 22 40 25 25"
android:strokeColor="#FFF"
android:strokeWidth="1"
</vector>
A和C字母矢量可绘制外观如下：
ic_0.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="https://schemas.android.com/apk/res/android"
android:width="60dp"
android:height="60dp"
android:viewportHeight="50"
android:viewportWidth="50">
<path
android:fillColor="@android:color/holo_green_dark"
android:pathData="M16,25
A10,10 0 2,2 36,25
A10,10 0 2,2 16,25 Z"
</vector>
使用两个圆弧制成一个圆，然后将其闭合。
现在到最后。
让我们使用可绘制矢量创建一个theitroad JD示例图标。
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="https://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp"
android:viewportHeight="48.0"
android:viewportWidth="48.0">
<group android:name="thing">
<path
android:name="curves"
android:pathData="M 25 14 L 12 10 M 25 13 L 25 30 M 25 30 C 20 35 12 30 12 25"
android:strokeColor="#000"
android:strokeWidth="1"
<path
android:name="curves"
android:pathData="M 30 20 L 35 30 M 30 10 C 45 15 45 25 20 10"
android:strokeColor="@android:color/holo_red_dark"
android:strokeWidth="1"
</group>
</vector>
