Android 矢量图 vector

最新推荐文章于 2024-05-17 10:56:58 发布

33重天

最新推荐文章于 2024-05-17 10:56:58 发布

阅读量516

点赞数

分类专栏： Android 文章标签： android

本文链接：https://blog.csdn.net/qq_22025741/article/details/117815767

版权

Android 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

阿里矢量图标
可缩放向量图形（Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维向量图形的图形格式。SVG由W3C制定，是一个开放标准。

SVG何以可以任意缩放而不会失真，drawable-(m|h|xh|xxh|xxxh)dpi和mipmap-(m|h|xh|xxh|xxxh)dpi这俩货就可以省省了；
SVG文件一般都比较小，省去很去资源达到apk缩包的目的；
SVG占用内存非常小，性能高。但是SVG明显的缺点是没有位图表达的色彩丰富;
Android API 21（5.0）引入了一个Drawable的子类VectorDrawable目的就是用来渲染矢图，AnimatedVectorDrawable用来播放矢量动画。之前老的小于21的API设备可以分别使用VectorDrawableCompat和AnimatedVectorDrawableCompat这两个兼容包来同样达到渲染矢量图的目的。本文只讨论矢量图，不讨论矢量动画。
minSdkVersion>=21：用xml文件或者代码定义VectorDrawable，和普通的Drawable用法一样，不再需要额外任何东西；如何编写矢量图，下文有介绍.
minSdkVersion<21：如果想要渲染矢量图的话必须在app模块的build.gralde文件里添加一行代码
minSdkVersion<21以及更多：上面的第二种情况是使用兼容包，但是兼容包仅支持AppCompatImageView和AppCompatImageButton及其子类矢量图，而且矢量图的引用必须放在app:srcCompat属性中才会被识别并生效，代码必须这样写才行：

<android.support.v7.widget.AppCompatImageView
      app:layout_constraintBottom_toBottomOf="parent"
      android:layout_width="100dp"
      android:layout_height="100dp"
      app:srcCompat="@drawable/ic_oval"/>

ic_oval.xml是我们使用xml编写的矢量图，如果想要TextView的drawableTop或者其他额外方式使用矢量图渲染，那么必须在Activity中加入代码：

static {
    AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}

示例：

在drawable目录下新建drawable resource

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:alpha="1"
    android:name="@string/app_name"
    android:autoMirrored="true"
    android:viewportHeight="1024"
    android:viewportWidth="1024">

    <path
        android:pathData="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z"
        android:fillColor="#FA5151" />
    <path
        android:pathData="M512 620c-17.7 0-32-14.3-32-32V300c0-17.7 14.3-32 32-32s32 14.3 32 32v288c0 17.7-14.3 32-32 32z"
        android:fillColor="#FFFFFF" />
    <path
        android:pathData="M512 718m-38 0a38 38 0 1 0 76 0 38 38 0 1 0-76 0Z"
        android:fillColor="#FFFFFF" />
</vector>