android5.0之Vector Drawables（矢量图）

最新推荐文章于 2024-04-01 01:47:56 发布
最新推荐文章于 2024-04-01 01:47:56 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： android提升 文章标签： android5-0 矢量图动画 vector
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33689414/article/details/51714456
版权

android5.0之Vector Drawables（矢量图）

效果图：

这里写图片描述

在res/drawable/目录下创建heart.xml，文件内容：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="256dp"
    android:height="256dp"
    android:viewportHeight="32"
    android:viewportWidth="32">
    <path
        android:fillColor="#f00"

        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.432,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>

pathData有5个参数（为了便于阅读，我在不同的参数之间用空格分割，但是空格并不是必须的，注意逗号不是参数分割符）。第一个参数值是M100,100，表示将当前的绘制点移动到100, 100的位置（大写字母M表示我们使用的是绝对坐标，我们可以使用小写字母m来表示相对坐标，这个规则适用于所有参数）。这将当前的位置定位到了正方形绘制区域的左上角

指定控件使用

<ImageView
        android:layout_width="256dp"
        android:layout_height="256dp"
        android:background="@drawable/heart" />

VectorDrawable动画：

方式一：

效果图：

这里写图片描述
在res/drawable目录下创建一个vector_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportWidth="500"
    android:viewportHeight="500"
    android:width="500px"
    android:height="500px">

    <group android:name="android">
        <group android:name="head_eyes">
            <path
                android:name="head"
                android:fillColor="#9FBF3B"
                android:pathData="M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104c-1.563-1.074-3.805-0.543-4.993,1.199L294.863,80.53c-13.807-5.439-29.139-8.47-45.299-8.47c-16.16,0-31.496,3.028-45.302,8.47l-20.948-30.41c-1.201-1.74-3.439-2.273-5.003-1.199c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298" />
            <path
                android:name="left_eye"
                android:fillColor="#FFFFFF"
                android:pathData="M203.956,129.438c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438" />
            <path
                android:name="right_eye"
                android:fillColor="#FFFFFF"
                android:pathData="M295.161,129.438c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438" />
        </group>
        <group android:name="arms">
            <path
                android:name="left_arm"
                android:fillColor="#9FBF3B"
                android:pathData="M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z" />
            <path
                android:name="right_arm"
                android:fillColor="#9FBF3B"
                android:pathData="M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z" />
        </group>
        <path
            android:name="body"
            android:fillColor="#9FBF3B"
            android:pathData="M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354v-54.744h37.371v54.744c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489H140.396z" />
    </group>

</vector>

在res/drawable目录下创建vector_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_drawable">

    <target
        android:name="head_eyes"
        android:animation="@animator/shrug" />

    <target
        android:name="arms"
        android:animation="@animator/shrug" />

</animated-vector>

在res/aninator目录下创建shrug.xml动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName="translateY"
        android:valueType="floatType"
        android:valueFrom="0"
        android:valueTo="-10"
        android:repeatMode="reverse"
        android:repeatCount="infinite"
        android:duration="250" />
</set>

在控件中使用：

 <ImageView
        android:id="@+id/iv"
        android:layout_width="256dp"
        android:layout_height="256dp"
        android:background="@drawable/vector_animtor" />

在java代码中执行动画：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final ImageView imageView = (ImageView) findViewById(R.id.iv);

        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Drawable drawable = v.getBackground();
                if (drawable instanceof Animatable) {
                    ((Animatable) drawable).start();
                }
            }
        });
    }
}

方式二：

效果图：

这里写图片描述
创建另外一个vector_drawable1.xml和vector_animator1.xml。

vector_drawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="path"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

vector_aniator.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_drawable1">
    <target
        android:name="rotationGroup"
        android:animation="@animator/rotation" />

    <target
        android:name="path"
        android:animation="@animator/path" />
</animated-vector>

rotation.xml动画和path.xml动画

rotation.xml

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

path.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

在控件中使用：

 <ImageView
        android:id="@+id/iv"
        android:layout_width="256dp"
        android:layout_height="256dp"
        android:background="@drawable/vector_animtor1" />

在java代码中执行动画：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final ImageView imageView = (ImageView) findViewById(R.id.iv);

        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Drawable drawable = v.getBackground();
                if (drawable instanceof Animatable) {
                    ((Animatable) drawable).start();
                }
            }
        });
    }
}

参考：VectorDrawable-第一二三四章

张行之
关注
专栏目录
如何玩转Android矢量图VectorDrawable
09-02
Android矢量图（VectorDrawable）是Android系统从API级别21开始引入的一种图形格式，用于替代传统的位图（Bitmap），以实现更高效、更灵活的图像处理。矢量图的最大优点在于其基于数学路径，可以无限缩放而不失真，...
Android 5.0以下vector资源兼容问题
lxfhjjsfq的专栏
08-05 419
如果使用SVG导出vector矢量图时，在Android 5.0以下会出现崩溃问题，报错一般为： Binary XML file line #1: invalid drawable tag vector 目前我在Android studio 4.1上遇到这个问题，工程使用的是androidx库，解决这个问题需要三步： 1.在配置文件中，打开兼容设置，在app或需要运行的module中的build.gradle中，android的defaultConfig中加入以下内容： ...
矢量图优化包大小---vectorDrawables.useSupportLibrary
lostfish123的专栏
12-27 589
是一个在 Android Gradle 插件中的配置选项，用于指定是否在应用中使用支持库（Support Library）来兼容矢量图形（Vector Drawables）。在 Android 5.0（API级别21）及以上版本，Android 系统本身开始支持矢量图形，可以直接在应用中使用矢量图形资源文件（以。然而，在使用 Support Library 的情况下，你可以在更低版本的 Android 设备上使用矢量图形。`，则在构建应用时，矢量图形将被转换成支持库中的 `
关于矢量图在android4.4中的使用
yuqingsen的博客
06-12 447
BUG 最近跟新了以下应用后发现，新添加的几个界面在Android4.4（最后的倔强，不想放弃4.4的适配）版本无法正常运行，会闪崩。 原因 矢量图是android5.0时候推出的在4.4无法适配 解决方法 在build中添加： defaultConfig { vectorDrawables.useSupportLibrary = true } 原以为加了这个就能美滋滋的使用，没想到依旧有两个界面会崩，少了一个，还是有用的；然后就开始找原因咯，最后发现是我的矢量图是在textview中的drawable
Android VectorDrawable 的使用
qq_38605423的博客
07-06 3574
Android VectorDrawable 的使用​ SVG的全称是Scalable Vector Graphics，叫可缩放矢量图形。它和位图（Bitmap）相对，SVG不会像位图一样因为缩放而让图片质量下降。它的优点在于节约空间，使用方便 Android 5.0中引入了 VectorDrawable 来支持矢量图(SVG)，同时还引入了 AnimatedVectorDrawable 来支
[译] 了解 Android 的矢量图片格式：VectorDrawable
最新发布
2301_79963818的博客
04-01 268
Canvas这两步的执行时间与矢量的复杂性和你执行的操作类型成正比。如果你使用非常复杂的形状，将会花费更长的时间将之解析成为[Path]( )。类似地，更多的绘制操作将花费更长的时间来执行（还有一些更耗费时间的，例如剪辑操作）。对于静态矢量，绘图阶段只需执行一次，然后可以缓存为Bitmap。对于动画矢量，就无法进行此优化，因为它们的属性必然会发生变化，需要重新绘制。将其与像 PNG 这样只需要解码文件内容的位图资源进行比较，这些资源随着时间的推移已经经过高度优化。这是位图与矢量图的基本权衡。
Android-轻松从你的代码改变vectordrawables的颜色
08-13
这个"Android-轻松从你的代码改变vectordrawables的颜色"的主题，就是针对这种需求提供的一种解决方案。 首先，让我们了解什么是Vector Drawables。Vector Drawables是Android 5.0（API级别21）引入的一种资源类型...
Android5.0新特性详解之全新的动画
09-01
在Android 5.0中，Vector Drawables的引入也是重大更新之一。它支持SVG格式的矢量图形，这意味着即使在不同分辨率的设备上，图标和图像都能保持清晰，而且这些矢量图形可以用于动画，增加了图形的动态性。 最后，...
android+矢量图+插件,如何玩转Android矢量图VectorDrawable
weixin_32842959的博客
05-26 844
从5.0(api等级21)开始，android开始支持矢量图了。关于什么是矢量图以及矢量图有什么优缺点不在本文的涉及范围之内，具体可以参考矢量图百科。不过这里要提一下它的优点：保存最少的信息，文件大小比位图要小，并且文件大小与物体的大小无关任意放大矢量图形，不会丢失细节或影响清晰度，因为矢量图形是与分辨率无关的。从以上两个优点来看，在项目中使用矢量图至少可以缩小我们apk包的尺寸，而且可以在屏幕适...
Android Vector曲折的兼容之路
热门推荐
eclipse_xu
07-06 2万+
Android Vector曲折的兼容之路两年前写书的时候，就在研究Android L提出的Vector，可研究下来发现，完全不具备兼容性，相信这也是它没有被广泛使用的一个原因，经过Google的不懈努力，现在Vector终于迎来了它的春天。 在文章后面，会给出本文的Demo和效果图，并开源在Github Vector DrawableAndroid 5.0发布的时候，Google提供了Vect
android 中vector的用法
android开发笔记
11-17 1万+
随着android L的发布，带来了VectorDrawable,矢量图的支持 矢量图在很久很久以前就已经应用起来了，是一种基于xml的图像，因为图片不提供具体的像素，只提供的是绘图的指令，所以好处是 占用内存非常小，性能高，可以任意缩放而不会失真，但是缺点也很明显，没有位图表达的色彩丰富。  然而现在app风格越来越扁平， 拟物化已经成了过去，矢量图成了越来越多人的选择。 android在最新...
Android5.0以下矢量图兼容问题探究
u014750748的专栏
09-11 1069
Android5.0以下矢量图兼容问题探究 关于如何使用矢量图的方法网上一抓一大把，无非就是在defaultConfig加上一句vectorDrawables.useSupportLibrary = true 和在BaseActity加上一句 static { AppCompatDelegate.setCompatVectorFromResourcesEnabled(t...
Android基础总结九:VectorDrawable
lixpjita39的专栏
09-27 1315
一、概述Android 5.0系统中引入了VectorDrawable来支持矢量图（SVG），同时还引入了AnimatedVectorDrawable来支持矢量图动画。由于兼容性问题，所以到目前使用矢量图的应用还是比较少。关于SVG的知识可以参考：SVG 教程二、VectorDrawable的优缺点优点：• Vector图像可以自动进行适配，不需要通过分辨率来设置不同的图片 • Vector图像可
android vector矢量图画图详解
小鬼不离
05-08 8184
SVG是一种矢量图格式，是Scalable Vector Graphics三个单词的首字母缩写。在xml文件中的标签是，画出的图形可以像一般的图片资源使用，例子如下： vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="
矢量图像资源详解（Vector drawables）
yingaizhu的博客
12-02 2113
前言     
关于Android4.4及以下版本，TextView中使用矢量图时报错的问题
进击的程序猿
08-03 2313
问题描述：在新项目的“我的”模块部分，每个条目左边是图片，图片右边是文字，然后条目末端是个向右的箭头，这个很常见，我是使用一个TextView来时实现的，由于UI那边没有切好左边的图，所以我这边在AndroidStudio里面新建了一个矢量图来代替了。在android5.0及以上版本的机子上运行，没有任何异常，但是在android4.4及下版本时，只要进入“我的”页面就崩溃。分析问题： 首先，先看一
Android控件之Textview
互联网
04-04 154
2014/04/04 决定重新系统地学习一遍Android上的各种控件 从TextView开始： 一、TextView概述 android.widget.TextView直接继承于android.view.View类. 直接子类有：Button、CheckedTextView、Chronometer、DigitalClock、EditText. 构造函数：(1)Te...
Android vector标签
架构师的成长之路的博客
09-28 3210
    更多干货 分布式实战（干货） spring cloud 实战（干货） mybatis 实战（干货） spring boot 实战（干货） React 入门实战（干货） 构建中小型互联网企业架构（干货） python 学习持续更新 ElasticSearch 笔记 kafka storm 实战 (干货)...
Android 5.0 Material Design 动画深度解析
本文将详细讲解其中的一些关键动画功能，包括Touchfeedback触摸反馈、CircularReveal圆形展示、Curvedmotion曲线运动、Viewstatechanges视图状态变化、VectorDrawables矢量图动画以及Activitytransitions活动转场。...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值