Android UI:使用矢量图,抛弃PNG

本文探讨了在Android应用中如何使用VectorDrawable替代PNG,以提高UI质量。详细介绍了如何通过Vector Asset Studio引入和设置Material Icons,并提供了一个简单的Demo,展示如何显示矢量图和运行动画。建议查看QProject的ui/vectordrawable分支获取示例代码。
摘要由CSDN通过智能技术生成
一、矢量图简介
最近在进行Android App“瘦身 ”的时候,了解到矢量图(VectorDrawable)相关概念。
从Android5.0(API level 21)开始,有两个类支持矢量图:VectorDrawable和AnimatedVectorDrawable。VectorDrawable是一个矢量图,定义在一个XML文件中的点、线和曲线,和它们相关颜色的信息集合。AnimatedVectorDrawable是矢量图动画,使用多个XML文件而不是针对不同分辨率使用多个图片来实现动画。
使用矢量图主要有如下两个优:
  图片扩展性:它可以进行缩放并且不损失图片的质量,这意味着使用同一个文件对不同屏幕密度调整大小并不损失图片的质量;
  图片大小小:同样大小和内容图片下相比,矢量图比PNG图片更小,这样就能得到更小的APK文件和更少的维护工作;
然而,系统渲染VectorDrawable需要花费更多时间。因为矢量图的初始化加载会比相应的光栅图片消耗更多的CPU周期,但是两者之间的内存消耗和性能接近。因此我们可以只考虑在显示小图片的时候使用矢量图(建议你限制矢量图在200*200dp),越大的图片在屏幕上显示会消耗更长的时间进行绘制;

二、VectorDrawable
1.VectorDrawable简介

VectorDrawable定义了一个静态Drawable对象。和SVG格式非常相似,每个Vector图形被定义成一个树型结构,它由path和group对象组成。每条path包含对象轮廓的几何形状,每个group包含了变化的详细信息。所有path的绘制顺序和它们在XML出现的顺序相同;

2.VectorDrawable XML文件生成
Android Studio包含一个称为Vector Asset Studio的工具,它提供了一个简单的方法将矢量图以XML文件的形式添加到项目中。支持如下两种方式:
  添加Meterial Icon;
  导入可拉伸矢量图(SVG)和Adobe Photoshop文档(PSD)文件;
启动Vector Asset Studio
Android Studio->项目窗口->Android视图->选择res目录->New->Vector Asset(Android Plugin for Gradle 1.5.0或者更高);


使用Meterial Icon
Google meterial Design规范提供了meterial icons,你可以在你的Android app中使用。Vector Asset Studio帮助你选择,导入和设置meterial icon大小,定义透明度和Right-to-Left(RTL)镜像设置;

选择Meterial Icon->点击Icon按钮->Select Icon对话框(右边)->选择导入图片->OK,根据你的需要改变资源名称,大小,透明度和Right-To-Left镜像设置,点击Next按钮:

根据你的需要改变模块和资源目录,点击Finish按钮:

在app/src/main/res/drawable目录下,Vector Asset Studio添加了一个定义了适量图片的XML文件ic_assignment_ind_black_24dp.xml;

使用本地文件(SVG,PSD)
Vector Asset Studio也可以让你导入你自己的SVG和PSD文件。SVG是W3C一个基于XML的开源标准,PSD文件格式支持Adobe Photoshop。它支持基本的标准,但不支持所有的SVG和PSD功能。当你选择一个SVG或者PSD文件,它会立即给出是否支持图形编码的反馈。尽管矢量图支持一个或者更多的色彩,在许多场景下使用黑色图标(android:fillColor=
  • 6
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值