Android 使用Vector XML文件创建矢量图片资源
http://blog.csdn.net/klxh2009/article/details/51121034 本文出自【付小华的博客】
Vector:矢量的意思
我们知道,在安卓开发过程中,经常使用到png格式的图片资源,这种图片需要有不同分辨率来做屏幕适配,当图片数量很大时,被打包的图片资源占据了app的绝大部分容量,使用Vector来创建图片,将大大减少png图片的使用,提高开发性能。废话不多说,可以先看下效果:
这就是一个矢量图,下面我来讲讲怎么来实现它吧:
所需工具:
1、阿里巴巴矢量图库(http://www.iconfont.cn/)
2、GIMP(GNU Image Manipulation Program)
其中,GIMP我提供了两种下载方式:
官网:http://www.gimp.org/
百度网盘:http://pan.baidu.com/s/1sl9VnRZ
3、Android Studio
实现步骤:
1、从阿里巴巴矢量图库下载需要的svg矢量图
(注意这里的尺寸)
2、使用已经安装好了的GIMP打开下载的这个矢量图
3、选择Tool Options下的魔棒点击刚刚打开的五角星
(这是选中之后的效果,出现蚂蚁线,,,会PS的同学应该对这个很明白的)
4、然后再按图示操作:选择【Select】-->【To Path】,就可以看到右边的Brushes窗口下的Paths选项里多了个路径。
5、导出路径
导出时选择自己需要导出到的路劲,输入文件名,建议导出使用xml格式的文件,我这里为“star.xml”,然后点击save
6、打开star.xml文件,可以看到好多数字,在path节点下的d里,这里的值就是我们需要的
7、我们使用Android Studio来写代码,在drawable目录下新建一个star_path.xml文件,内容如下:
其中需要注意这里的viewportHeight和viewportWidth值,设置太小就不能看到它的预览图了
- <?xml version="1.0" encoding="utf-8"?>
- <vector xmlns:android="http://schemas.android.com/apk/res/android"
- android:width="200dp"
- android:height="200dp"
- android:viewportHeight="200"
- android:viewportWidth="200">
- <path
- android:fillColor="#00BB9C"
- android:pathData="M 120.25,62.00
- C 121.56,64.62 124.79,71.70 126.63,73.44
- 129.39,76.04 138.05,76.58 142.00,77.13
- 142.00,77.13 178.00,82.00 178.00,82.00
- 174.13,90.18 158.14,103.06 150.99,110.04
- 148.73,112.24 143.25,117.35 142.11,120.00
- 140.83,122.98 142.80,131.54 143.42,135.00
- 143.42,135.00 150.00,171.00 150.00,171.00
- 142.14,169.53 124.31,158.91 116.00,154.75
- 113.30,153.40 105.49,149.02 103.00,148.88
- 99.54,148.69 91.24,153.75 88.00,155.58
- 81.75,159.10 61.89,169.90 56.00,171.00
- 56.00,171.00 61.80,136.00 61.80,136.00
- 61.80,136.00 63.60,120.58 63.60,120.58
- 63.60,120.58 53.00,109.00 53.00,109.00
- 53.00,109.00 27.00,82.00 27.00,82.00
- 27.00,82.00 63.00,77.13 63.00,77.13
- 67.09,76.56 75.64,76.00 78.61,73.44
- 81.01,71.37 84.64,63.21 86.25,60.00
- 86.25,60.00 102.00,28.00 102.00,28.00
- 106.72,32.72 116.58,54.66 120.25,62.00 Z
- M 91.25,75.00
- C 90.14,77.23 88.11,81.97 86.51,83.57
- 83.98,86.09 79.42,86.24 76.00,86.73
- 76.00,86.73 51.00,90.00 51.00,90.00
- 51.00,90.00 68.00,108.00 68.00,108.00
- 68.00,108.00 75.36,117.00 75.36,117.00
- 75.36,117.00 74.41,128.00 74.41,128.00
- 74.41,128.00 71.00,151.00 71.00,151.00
- 75.21,149.77 88.51,142.63 93.00,140.14
- 96.31,138.31 100.02,135.40 104.00,136.17
- 104.00,136.17 135.00,151.00 135.00,151.00
- 135.00,151.00 130.75,127.00 130.75,127.00
- 130.75,127.00 130.11,116.00 130.11,116.00
- 130.11,116.00 137.00,108.00 137.00,108.00
- 137.00,108.00 155.00,90.00 155.00,90.00
- 155.00,90.00 130.00,86.73 130.00,86.73
- 130.00,86.73 119.39,84.15 119.39,84.15
- 119.39,84.15 113.14,73.00 113.14,73.00
- 113.14,73.00 103.00,53.00 103.00,53.00
- 99.46,57.45 94.06,69.34 91.25,75.00 Z" />
- </vector>
8、最后在布局文件里使用:
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:paddingBottom="@dimen/activity_vertical_margin"
- android:paddingLeft="@dimen/activity_horizontal_margin"
- android:paddingRight="@dimen/activity_horizontal_margin"
- android:paddingTop="@dimen/activity_vertical_margin"
- tools:context="com.shenhua.vectordemo.MainActivity">
- <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="Hello World!" />
- <ImageView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_centerInParent="true"
- android:src="@drawable/star_path" />
- </RelativeLayout>
目录结构:
Android 使用Vector XML文件创建矢量图片资源相关推荐
- Android中具有动画效果的图片资源
Android动画和Transition系列文章 初识属性动画--使用Animator创建动画 再谈属性动画--介绍以及自定义Interpolator插值器 三谈属性动画--Keyframe以及Vie ...
- 【Android 安装包优化】Android 中使用 SVG 图片 ( Android 5.0 以下的矢量图方案 | 矢量图生成为 PNG 图片 )
文章目录 一.Android 5.0 以下的矢量图方案 二.矢量图生成为 PNG 图片 三.完整的 build.gradle 构建脚本 四.编译效果 五.参考资料 一.Android 5.0 以下的矢 ...
- VML,The Vector Markup Language(矢量可标记语言)
VML,The Vector Markup Language(矢量可标记语言) 什么是VML?VML相当于IE里面的画笔,可以实现你想要的图形,并结合脚本,可以使图形产生动态效果.VML是微软在199 ...
- Android开发历程_18(XML文件解析)
前言 本文主要介绍在Android中怎样来解析XML文件.主要采用的是SAX机制,SAX全称为Simple API for XML,它既是一种接口,也是一个软件包.作为接口,SAX是事件驱动型XML ...
- Android 如何在xmL 里面动态设置padding
如题,Android 如何在xmL 里面动态设置padding 有时候,你的布局加载完成之后,你findViewByid 找到控件,设置padding 会导致白条,布局闪动,那怎么办呢? 你是不是就想 ...
- android中string.xml使用总结,string.xml 的作用以及意义——国际化应用
为什么需要把应用中出现的文字单独存放在string.xml文件中呢? 一:是为了国际化,当需要国际化时,只需要再提供一个string.xml文件,把里面的汉子信息都修改为对应的语言(如,English ...
- android 颜色资源文件,android中colors.xml颜色设置资源文件的方法
1. 打开res目录下的values文件夹,双击打开colors.xml文件进行编辑 上代码 #008577 #00574B #D81B60 #ff0000 #0000ff 2. 在res目录下的la ...
- android获取string.xml的值(转)
为什么需要把应用中出现的文字单独存放在string.xml文件中呢? 一:是为了国际化,当需要国际化时,只需要再提供一个string.xml文件,把里面的汉子信息都修改为对应的语言(如,English ...
- 创建带有关联的 XML 架构的 XML 文件 从 XML 文件创建 XML 架构
一.创建带有关联的XML 架构的XML 文件 1.创建新的 Windows 应用程序项目 首先需要在 Visual Basic 或 Visual C# 中创建新的 Windows 应用程序.创建一个新 ...
- Android中解析XML
Android中解析XML 转载于:https://www.cnblogs.com/zhujiabin/p/5868993.html
最新文章
- Angular http跨域
- RTT设备与驱动之PIN设备
- 7个华为关于C语言的经典面试题
- excel表格不够怎么添加_这个Excel表格,怎么做的这么漂亮
- lisp 图元 天正 自定义_C# 自定义autolisp 函数 研究
- Tensorflow学习笔记2----文本分类模型
- 无法下载linux系统的驱动精灵,【驱动精灵和搜狗输入法 For Linux哪个好用】驱动精灵和搜狗输入法 For Linux对比-ZOL下载...
- H5本地储存Web Storage
- 2008年下半年软考在即 51CTO将实时提供试题和参考答案
- Hive 操作(一)
- URAL 1732. Ministry of Truth ( KMP 多模式串匹配 )
- 怎么测试网站服务器速度,怎么测试网站速度
- 计算机无法显示输入字体,电脑中ps输入字体不显示是怎么回事
- 使用USB充电的5号电池
- IOS学习笔记-加速度传感器(重力感应)-UIAccelerometer
- NSIS脚本学习:使用 LogicLib.nsh 实现基本流程控制结构
- Java微信支付API文档测试
- 橘子学ES03之Docker安装ELK+cerebro
- 百度2015校园招聘笔试题
- 如何在IntelliJ IDEA 中新建一个项目Project
热门文章
- Ubuntu软件下载速度慢解决
- 基于博弈论的诱饵路由设计及实现
- ps抠图神器:Topaz ReMask 5 for Mac
- ecshop二次开发之模板整合
- 邮件无法发送信息已被服务器拒绝,邮件被服务器拒绝发不出去的原因
- 语文学科html代码,语文教育专业介绍 [代码660201]
- CentOS 5 安装和配置无线网卡指南
- windows使用DD刻录工具刻录U盘
- 问题1:编译内核出现错误‘debian/stamp/build/kernel‘及解决方案
- boobooke ORACLE MYSQL C JAVA视频学习资料