android绘制矢量图

In this tutorial, we’ll be discussing Android Vector Drawable. Furthermore, we’ll be implementing them in our Android Application.

在本教程中，我们将讨论Android Vector Drawable。 此外，我们将在我们的Android应用程序中实现它们。

Android矢量可绘制 (Android Vector Drawable)

Often we use PNG as our drawable images. In order for the PNG images to work for different screen sizes, we create multiple PNG assets with different sizes and densities. Subsequently, PNG images take up extra space and lead to large APK sizes of the Android Apps.

通常，我们使用PNG作为可绘制图像。 为了使PNG图像适合不同的屏幕尺寸，我们创建了多个具有不同尺寸和密度的PNG素材资源。 随后，PNG图像会占用额外的空间，从而导致Android Apps的APK尺寸变大。

This is where Vector Drawable comes to our rescue! They are your replacement for PNG images.

这就是Vector Drawable拯救我们的地方！ 它们是PNG图像的替代品。

A VectorDrawable is a vector graphic defined in an XML file as a set of points, lines, and curves along with its associated color information.

VectorDrawable是在XML文件中定义为一组点，线和曲线及其关联的颜色信息的矢量图形。

They can be scaled according to the screen size without loss in quality. They are rendered quickly onto the screen too. VectorDrawable are an XML file.

可以根据屏幕尺寸缩放它们，而不会降低质量。 它们也可以快速呈现到屏幕上。 VectorDrawable是一个XML文件。

You can add a new Vector Asset in your drawable folder using New | Vector Asset.

您可以使用New | New在您的可绘制文件夹中添加一个新的Vector Asset。 向量资产 。

Thus we can create Vector drawables of Material Design icons. The code for the VectorDrawable looks like this:

因此，我们可以创建“材质设计”图标的Vector drawables。 VectorDrawable的代码如下所示：

They are set in the vector tag. android:viewportWidth and android:viewportHeight are used in setting the width and height of the drawable bounds. Within these dimensions, the vector drawable is drawn on the canvas.

它们在vector标签中设置。 android:viewportWidth和android:viewportHeight用于设置可绘制范围的宽度和高度。 在这些尺寸内，可绘制矢量在画布上绘制。

path is the tag that creates the drawable. Inside the path we create lines, curves, arcs and set the border, background color. We do so path commands in the pathData.

path是创建可绘制对象的标签。 在路径内部，我们创建直线，曲线，弧线并设置边框，背景色。 我们在pathData执行path命令。

为矢量资产创建路径 (Creating Path for Vector Assets)

The path commands consist of an alphabet followed by coordinates. Imagine creating paths as doing a painting. Uppercase alphabets represent absolute position. Lowercase represent relative position.

路径命令由字母和坐标组成。 想象一下在进行绘画时创建路径。 大写字母表示绝对位置。 小写字母表示相对位置。

• M – moveto command. It’s a way of saying move your pencil to the given coordinate on the view. Example M 100 100 moves an imaginary pencil to the 100, 100 coordinate on the canvas.M – moveto命令。 这是一种将铅笔移动到视图上给定坐标的方式。 示例M 100100将虚拟铅笔移动到画布上的100、100坐标。
• L – line to command. Is used to draw a line from the current position to the position specified.
  Example : M 100 100, L 120 100 draws a horizontal line.L –命令行 。 用于从当前位置到指定位置画一条线。
  示例： M 100 100, L 120 100画一条水平线。
• z – This is used to close a path. It draws a line from the last position to the first position. Example M 100 100 L 120 100 L 120 120 L 100 120 Z creates a square.z –用于关闭路径。 它从最后一个位置到第一个位置画一条线。 示例M 100 100 L 120 100 L 120 120 L 100 120 Z创建一个正方形。
• C – This is used to create a bezier curve. We need to specify three sets of coordinates after this. The first and second would the two control points between the initial point and the end point.C –用于创建贝塞尔曲线。 在此之后，我们需要指定三组坐标。 第一个和第二个将是起点和终点之间的两个控制点。
• A – is used to draw an arc. After a you need to specify the following format: (rx ry x-axis-rotation large-arc-flag sweep-flag x y). rx ry and x axis are the two radii specified.A –用于绘制圆弧。 之后，您需要指定以下格式：（rx ry x轴旋转大弧标志sweep-flag xy）。 rx ry和x轴是指定的两个半径。

Let’s create some random interesting Vector Drawable in our Android Application using the above knowledge.

让我们使用以上知识在我们的Android应用程序中创建一些随机有趣的Vector Drawable。

Android Vector Drawable示例项目结构 (Android Vector Drawable Example Project Structure)

Android矢量可绘制代码 (Android Vector Drawable Code)

The code for the activity_main.xml layout is given below:

下面给出了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"><ImageViewandroid:layout_width="32dp"android:layout_height="32dp"android:src="@drawable/ic_w" /><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="8dp"android:src="@drawable/ic_w_fill" /><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"><ImageViewandroid:layout_width="16dp"android:layout_gravity="center_vertical"android:layout_height="16dp"android:src="@drawable/ic_a" /><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="8dp"android:src="@drawable/ic_c" /></LinearLayout><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="8dp"android:src="@drawable/ic_0" /><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="8dp"android:src="@drawable/ic_jd" /></LinearLayout>

Let’s look at each of the Vector Drawables implementation one a time.

让我们一次查看每个Vector Drawables实现。

ic_rectangle.xml

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"><pathandroid:name="light_triangle"android:fillColor="@color/colorPrimary"android:pathData="M 100,0 L 0,100 100,100 z" /><pathandroid:name="dark_triangle"android:fillColor="@color/colorPrimaryDark"android:pathData="M 0,0 L 100,0 0,100 z" /></vector>

In the above code, we’ve created two paths. Each a right-angled triangle.

在上面的代码中，我们创建了两个路径。 每个直角三角形。

Setting this on our LinearLayout would make the background look like:

在LinearLayout上进行设置将使背景看起来像：

ic_w.xml

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"><pathandroid:name="one"android:pathData="M 25 0 L 10 40"android:strokeColor="#FFF"android:strokeWidth="1" /><pathandroid:name="two"android:pathData="M 25 0  L 40 40"android:strokeColor="#FFF"android:strokeWidth="1" /><pathandroid:name="three"android:pathData="M 10 40 L 0 0 "android:strokeColor="#FFF"android:strokeWidth="1" /><pathandroid:name="four"android:pathData="M 40 40 L 50 0"android:strokeColor="#FFF"android:strokeWidth="1" /></group>
</vector>

In the above code, we’re trying to create a W symbol using lines.

在上面的代码中，我们尝试使用线条创建W符号。

Note: Instead of a separate path, we can merge all in a single path command. Though you can use multiple paths for getting a clear understanding of what each path does.

注意：除了单独的路径，我们还可以在单​​个path命令中合并所有内容。 尽管您可以使用多个路径来清楚地了解每个路径的作用。

ic_w_filled.xml
In the below code, we’ll use the z command to close the paths and fill color inside them:

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"><pathandroid:name="one"android:pathData="M 25 0 L 10 40 M 25 0 L 40 40"android:strokeColor="#000"android:strokeWidth="1" /><pathandroid: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" /><pathandroid: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
Let’s create the A letter using paths.

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"><pathandroid:name="one"android:pathData="M 25 0 L 10 40"android:strokeColor="#FFF"android:strokeWidth="2" /><pathandroid:name="two"android:pathData="M 25 0  L 40 40"android:strokeColor="#FFF"android:strokeWidth="2" /><pathandroid:name="three"android:pathData="M 15 25 L 34 25"android:strokeColor="#FFF"android:strokeWidth="2" /></group>
</vector>

ic_c.xml

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"><pathandroid:name="curves"android:pathData="M 25 0 C -25 12.5 22 40 25 25"android:strokeColor="#FFF"android:strokeWidth="1" />
</vector>

The A and C letters vector drawable look as:

A和C字母矢量可绘制外观如下：

ic_0.xml

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"><pathandroid:fillColor="@android:color/holo_green_dark"android:pathData="M16,25A10,10 0 2,2 36,25A10,10 0 2,2 16,25 Z" />
</vector>

A circle is made using two arcs which are then closed.

使用两个圆弧制成一个圆，然后将其闭合。

Now for the last. Let’s create a JournalDev JD sample icon using vector drawable.

现在到最后。 让我们使用vector drawable创建一个JournalDev 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"><pathandroid:name="curves"android:pathData="M 25 10 L 12 10 M 25 10 L 25 30 M 25 30 C 20 35 15 30 12 25"android:strokeColor="#000"android:strokeWidth="1" /><pathandroid:name="curves"android:pathData="M 30 10 L 30 30 M 30 10 C 45 15 45 25 30 30"android:strokeColor="@android:color/holo_red_dark"android:strokeWidth="1" /></group>
</vector>

Finally, our application’s output looks like this:

最后，我们的应用程序的输出如下所示：

This brings an end to this tutorial. You can download the final Android VectorDrawable project from the link below:

本教程到此结束。 您可以从下面的链接下载最终的Android VectorDrawable项目：

翻译自: https://www.journaldev.com/20968/android-vector-drawable

android绘制矢量图