【 Android 】Android 动态矢量图

背景：
2014 年 6 月 26 日 I/O 2014 开发者大会上 Google 正式推出了 Android L，它带来了全新的设计语言 Material Design，新的 API 也提供了 VectorDrawable ，意味着 Android 支持 SVG 类型的资源，也就是矢量图。

Material Design 时代的 Android 需要有声有色的东西来润色 App，增加用户体验。

示例GIF：

示例图.gif

静态矢量图可以使用 Android Studio 提供的 Vector Asset （在工程的 res 目录下右键 -> new -> Vector Asset ），也可以自己去写矢量图，但这不是本篇文章所要讲的。

动态矢量图

① 配置环境（使用 Android Studio 开发）
打开项目的 build.gradle(Module:app)，添加如下代码：

android {    ...    defaultConfig {        ...                vectorDrawables.useSupportLibrary = true    }    ...}dependencies {    ...        compile 'com.android.support:support-vector-drawable:26.0.0-alpha1'    compile 'com.android.support:animated-vector-drawable:26.0.0-alpha1'}

② 书写静态矢量图和动态矢量图文件
以 copy 这个文件为例，创建它的静态矢量图并命名： ic_copy_white_24dp.xml

<?xml version="1.0" encoding="utf-8"?>

效果如下：

copy.png

创建它的动态矢量图并命名： avd_copy.xml

<?xml version="1.0" encoding="utf-8"?>

③ 让动态矢量图能够真正的动起来
在调用图片的类里面对图片做点击事件（图片的id 替换为你自己项目的图片名）
1）如果图片是在界面上显示的：

图片的id.setOnClickListener(new View.OnClickListener() {    @Override    public void onClick(View view) {        Drawable drawable = 图片的id.getDrawable();        if (drawable instanceof Animatable) {            ((Animatable) drawable).start();        }    }});

2）如果图片是在 Menu 上显示的：

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {    super.onCreateOptionsMenu(menu);    getMenuInflater().inflate(R.menu.你项目里面的menu名, menu);    this.menu = menu;    return true;}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {    Drawable drawable = item.getIcon();    if (drawable instanceof Animatable) {        ((Animatable) drawable).start();    }    switch (item.getItemId()) {        case R.id.图片的id:            // TODO: 你想要实现的动作            break;    }    return super.onOptionsItemSelected(item);}

综上所述，图片就会在你点击的时候动起来，为 App 添彩！

完整项目已传至 GitHub，欢迎 Star 、Fork ！！！
https://github.com/cnwutianhao/AnimatedVector

动态矢量图

更多相关文章

随机推荐