2.5、Android Studio添加多适配的向量图片

简介: Android Studio包含一个Vector Asset Studio的工具,可以帮助你添加Material图标和导入SVG(Scalable Vector Graphic)文件到你的项目中作为向量drawable资源。

Android Studio包含一个Vector Asset Studio的工具,可以帮助你添加Material图标和导入SVG(Scalable Vector Graphic)文件到你的项目中作为向量drawable资源。使用向量drawable资源来代替图片可以减少APK的大小,因为同样一个文件可以在不损失图片质量的情况下改变大小来适应不同分辨率的屏幕。旧版本的Android不支持向量drawable,Vector Asset Studio可以在构建的时候,帮助你把向量drawable转化成不同大小的图片。

关于Vector Asset Studio

Vector Asset Studio会将向量图片以XML文件描述的形式添加到项目中。维护一个XML文件要比维护多个分辨率的图片要简单很多。
Android4.4(API level 20)或更低的版本不支持向量drawable。如果过你的最小API level低于20,在使用Vector Asset Studio时有两个选项:生成PNG文件(默认)或者使用Support Library。

为了保持向后兼容,Vector Asset Studio生成向量drawable的栅格化图片。向量和栅格化资源会一起打包到APK文件中。在Java代码中,你可以视为向量资源为Drawable或者在XML代码中卫@drawable;当你的应用运行的时候,会根据当前系统的API版本来决定是使用向量资源还是栅格图片。

再者,为了使用Android Support Library 23.2或更高版本,你可以在build.gradle文件中添加一些声明。

支持的向量图片类型

谷歌material design规范提供了material图标,你可以直接应用于你的Android应用中。Vector Asset Studio帮助你选择,导入和更改material图标的大小。
Vector Asset Studio也可以帮助你导入你自己的SVG文件。SVG是一个基于XML的W3C的标准。Vector Asset Studio支持必要的标准,但并不是所有的特性。当你声明一个SVG文件,Vector Asset Studio告诉你是否支持这个图片代码。如果这个SVG代码不支持,它将这个文件转化为包含VectorDrawable代码的XML文件。

SVG文件的思考

一个向量drawable对于一个简单的图标是可以的。Material图标提供了非常好的图片类型的例子,转换成向量drawable也非常好。但是,很多app运行图标包含太多细节,所以它们比较适合用栅格化图片。

向量图片的初始化载入要比栅格化图片花费更多的CPU资源。之后,内存使用和性能两者是相同的。建议将向量图片限制为最大200*200 dp,否则,将会花费大量时间绘制。

虽然向量drawable支持一个或多个颜色,在许多情况下图标颜色都是黑色的(android:fillColor=”#FF000000”),利用这个特性,你可以在布局中使用的向量drawable中添加一个tint。图标颜色颜色将变成tint颜色。如果图标颜色不是黑色,图标颜色可能与tint颜色混合。

运行Vector Asset Studio

为了打开Vector Asset Studio,通过如下方式:
1、 在Android Studio中,打开一个Android应用项目。
2、 在Project窗口中,选择Android视图。
3、 右键单击res文件夹,选择New > Vector Asset。
Vector Asset Studio显示:
这里写图片描述

导入一个向量图像

Vector Asset Studio帮助你导入一个向量图像到你的app项目中。

添加一个material图标

1、 在Vector Asset Studio中,选择Material Icon
2、 选择Choose
3、 选择一个material图标并点击OK
图标出现在Vector Drawable Preview中。
4、 可选的,你可以更改资源名称,大小,透明度和RTL镜像设置。
5、 点击Next
6、 可选的。更改模块和资源目录。
7、 点击完成。
Vector Asset Studio添加一个定义了向量drawable的一个XML到你的项目的app/src/main/res/drawable/ 文件夹中。
8、 构建项目。
如果你的最小API level 是Android4.4或者更低,而且没有添加Support Library,Vector Asset Studio生成PNG文件,你不可以修改这些文件。

导入一个SVG文件

在打开Vector Asset Studio之后,你可以通过如下方式导入一个SVG文件:
1、 在Vector Asset Studio中,选择Local SVG file
文件必须是在本地。如果是在网上,你需要先下载到本地。
2、 点击需要导入的图片
图片显示在Vector Drawable Preview。
然而,如果SVG文件包含不支持的特性,将会在Vector Asset Studio的底部报出一个错误,如下:
这里写图片描述
3、 可选的。更改资源的名称、大小、透明度等设置
4、 点击Next
5、 可选的。更改模块和资源目录。
6、 点击Finish。
7、 构建项目。
如果你的最小API level 是Android4.4或者更低,而且没有添加Support Library,Vector Asset Studio生成PNG文件,你不可以修改这些文件。

添加一个向量Drawable到布局中

在一个布局文件中添加任何可以使用图标的控件,比如ImageButton,ImageView等等,指向一个向量资源。比如:下面的布局中在一个按钮中显示向量资源。
这里写图片描述
设置一个向量资源到控件中,执行如下几步:
1、 打开一个项目,导入一个向量资源
2、 在Project窗口的Android视图中,双击一个布局XML文件,比如content_main.xml
3、 点击Design 打开布局编辑器
4、 从Palette窗口中拖动ImageButton控件到布局编辑器中。
5、 在Properties窗口,定位到ImageButton的src属性,点击…
6、 在Resources对话框中,选择Project,导航到Drawable文件夹,选择一个向量资源。点击OK。
向量资源显示在ImageButton布局中。
7、 为了更改图片的颜色,可以设置tint属性。
如果你没有使用Support Library,ImageButton代码如下:

<ImageButton
  android:id="@+id/imageButton"
  android:src="@drawable/ic_build_24dp"
  android:tint="@color/colorAccent"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_below="@+id/textView2"
  android:layout_marginTop="168dp" />

在代码中使用一个向量Drawable
你可以在代码中用普通的方式来调用一个向量资源。当你运行一个app时,会根据你的API版本来判断显示向量或者栅格化图片。

在大部分情况下,你可以通过@drawable或Drawable访问向量资源。如下:

<ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
android:src="@drawable/myimage" />

如下:

Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage);

如下:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
   VectorDrawable vectorDrawable =  (VectorDrawable) drawable;
} else {
   BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
}

修改由Vector Asset Studio生成的XML代码

你可以修改向量资源的XML代码,但是不是PNG文件和在构建时生成的XML代码。但是,这种方式并不推荐。

本文作者:宋志辉
个人微博:点击进入

目录
相关文章
|
14天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
37 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
14天前
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
73 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
|
3月前
|
SQL 人工智能 Dart
Android Studio的插件生态非常丰富
Android Studio的插件生态非常丰富
184 1
|
3月前
|
Ubuntu Linux Android开发
Android Studio支持多种操作系统
Android Studio支持多种操作系统
171 1
|
3月前
|
数据可视化 开发工具 Android开发
Android Studio
Android Studio
253 1
|
3月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
89 8
|
4月前
|
Java Unix Linux
Android Studio中Terminal运行./gradlew clean build提示错误信息
遇到 `./gradlew clean build`命令执行出错时,首先应检查错误信息的具体内容,这通常会指向问题的根源。从权限、环境配置、依赖下载、版本兼容性到项目配置本身,逐一排查并应用相应的解决措施。记住,保持耐心,逐步解决问题,往往复杂问题都是由简单原因引起的。
515 2
|
5月前
|
存储 缓存 编解码
Android经典面试题之图片Bitmap怎么做优化
本文介绍了图片相关的内存优化方法,包括分辨率适配、图片压缩与缓存。文中详细讲解了如何根据不同分辨率放置图片资源,避免图片拉伸变形;并通过示例代码展示了使用`BitmapFactory.Options`进行图片压缩的具体步骤。此外,还介绍了Glide等第三方库如何利用LRU算法实现高效图片缓存。
92 20
Android经典面试题之图片Bitmap怎么做优化
|
5月前
|
XML IDE 开发工具
🔧Android Studio高级技巧大公开!效率翻倍,编码不再枯燥无味!🛠️
【9月更文挑战第11天】在软件开发领域,Android Studio凭借其强大的功能成为Android开发者的首选IDE。本文将揭示一些提升开发效率的高级技巧,包括自定义代码模板、重构工具、高级调试技巧及多模块架构。通过对比传统方法,这些技巧不仅能简化编码流程,还能显著提高生产力。例如,自定义模板可一键插入常用代码块;重构工具能智能分析并安全执行代码更改;高级调试技巧如条件断点有助于快速定位问题;多模块架构则提升了大型项目的可维护性和团队协作效率。掌握这些技巧,将使你的开发之旅更加高效与愉悦。
98 5
|
5月前
|
调度 Android开发 UED
Android经典实战之Android 14前台服务适配
本文介绍了在Android 14中适配前台服务的关键步骤与最佳实践,包括指定服务类型、请求权限、优化用户体验及使用WorkManager等。通过遵循这些指南,确保应用在新系统上顺畅运行并提升用户体验。
358 6

热门文章

最新文章

  • 1
    如何修复 Android 和 Windows 不支持视频编解码器的问题?
  • 2
    Android历史版本与APK文件结构
  • 3
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 5
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 6
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 9
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
  • 10
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    14
  • 2
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    28
  • 3
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 4
    Android历史版本与APK文件结构
    121
  • 5
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 6
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    23
  • 7
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    60
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    73
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121