SVG在Android上的使用
阿里巴巴图片库:https://www.iconfont.cn/collections/detail?cid=9638
一:位图和矢量图的概念
- 位图又叫点阵图或像素图,计算机屏幕上的图是由屏幕上的发光点(即像素)构成的,每个点用二进制数据来描述其颜色与亮度等信息,这些点是离散的,类似于点阵。多个像素的色彩组合就形成了图像,称之为位图(像GIF、JPEG、PNG等都是位图图像格式)。
- 矢量图又叫向量图,是用一系列计算机指令来描述和记录一幅图,一幅图可以解为一系列由点、线、面等到组成的子图,它所记录的是对象的几何形状、线条粗细和色彩等。生成的矢量图文件存储量很小,特别适用于文字设计、图案设计、版式设计、标志设计、计算机辅助设计(CAD)、工艺美术设计、插图等。
二:什么是SVG
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用来定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
三:SVG的代码实现
- svg代码:
但是在android中是不支持svg代码,具体教程可查看W3school:https://www.w3school.com.cn/svg/index.asp
<svg class="icon"height="100"p-id="2332"t="1621585217711"version="1.1"viewBox="0 0 1024 1024"width="100"xmlns="http://www.w3.org/2000/svg"><pathd="M519.37694695 3.190031l0 861.30841098L439.62616795 864.49844201 439.62616795 3.190031l79.750779 0z"fill="#337ab7"p-id="2333"></path><pathd="M599.12772595 823.028037L481.09657295 1024l-121.221184-200.971963 239.252337 0z"fill="#337ab7"p-id="2334"></path>
</svg>
- 在android studio中以Vector代码形式来显示svg图片:
说到矢量图,顺便讲下Vector,在Android中指的是Vector Drawable,也就是Android中的矢量图,可以说Vector就是Android中的SVG实现(并不是支持全部的SVG语法,现已支持的完全足够用了),其实svg格式再android studio的显示就是转为Vector
四:SVG和平时用的位图有什么区别
- SVG是需要显示的时候再把图形绘制出来,所以显示的时候肯定会耗费一些资源(但是位图也需要渲染,具体谁占用的资源更多,需要根据设备来看)
- 因为是用的时候实时绘制,所以SVG不适合太过复杂的图片
- SVG属于矢量图片,不怕缩放失真
- SVG使用代码绘制,文件比较小
- SVG的图像无法像位图图像那么细腻、多层次、多细节
总结来看,如果是特定的icon图标或者一些不复杂的地方,使用SVG会更好
放几张图对比下:以下2张图片,分别是分别率为1024x1024的png和svg的图片,明显svg格式的图片大小不png小的多的多
以下图片是设置同样宽高的svg和png的2张图片,明显png格式的图片已经变得模糊了
五:SVG在Android中怎么用
1:Android5.0(即API21)开始支持SVG
对于大家minSDK19的开发习惯来说,还是有一些限制的,那怎么做像下兼容呢,这就涉及到了支持库,从AppCompat23.2开始,Google开始支持在低版本上使用Vector。(所谓的兼容也是个坑爹的兼容,即低版本非真实使用SVG,而是生成PNG图片)
API查看网址:https://developer.android.google.cn/reference/android/graphics/drawable/VectorDrawable?hl=en
2:5.0之前怎么使用SVG
对于5.0之前的兼容,同样用的是VectorDrawable,兼容需要做到以下几点:
1.Android Plugin for Gradle 2.0 or higher
2.在项目的gradle文件中添加兼容库依赖23.2.0以上
dependencies {compile 'com.android.support:appcompat-v7:23.2.0'
}
3.还需要打开一个兼容vectorDrawables的开关
android {defaultConfig {vectorDrawables.useSupportLibrary = true}
}
完成以上3步,即可开始创建Vector了
注意:
a:如果我们没有设置 vectorDrawables.useSupportLibrary = true 的话,则在build项目的时候,gradle会为vcetor创建不同分辨率下的png序列,即预栅格化我们的vector为真正的png图片并会被加入到apk中,无形中增加了apk的大小。这也是官方提到的另一种vector向后兼容的一种方式,如果对性能要求高的,对apk大小要求不高的,可以用这种方式,毕竟手机在将vector栅格化的时候需要一些时间,比直接加载png的费时。下图为gradle自动将vector转化为不同分辨率的
以上的这个实在设置minSdkVersion 21 即最小兼容版本小于5.0以下时,未设置vectorDrawables.useSupportLibrary = true 出现的效果,在21以上不需要设置
b:在适配的最低版本小于5.0时,在没有设置vectorDrawables.useSupportLibrary = true时,调用和平常的png等的调用方式相同, 但是会将cector的图片转为png存在各个尺寸的drawable里)
平常设置图片的方式有哪些呢:https://blog.csdn.net/u012693479/article/details/78211550
c:在测试的过程中,发现当适配的最低版本小于5.0时,运行在5.0以下的手机,且设置了vectorDrawables.useSupportLibrary = true时,在布局里不能用android:background和android:src 否则会奔溃,setImageResource可以正常使用,其他平常设置图片的方法不能正常使用
,如果是5.0以上的手机则都是正常的调用
3:Vector Asset的使用
- 在点击File—>New—>Vector Asset ,也可在res—>New—>Vector Asset打开Configure Vector Asset窗口
其中Clip Art代表选择android studio自带的 Vector Drawale图片,Local file(SVG,PSD)代表加载本地存在的SVG,PSD格式的图片,将其转化为xml放于drawable文件中
【Clip Art(剪切图)】
Name:xml文件名称
Clip Art:可以选择AS自带的图标
Size:设置矢量图的大小
Color:设置矢量图的颜色
Opacity:设置不透明度
Enable auto mirroring for RTL layout:为RTL布局启用自动镜像
详细描述RTL模式:https://blog.csdn.net/NoMasp/article/details/52074538
这些是android Studio自带的Vector Drawale图片,搜索框盘边的2个选项分别为,左一:每个图标的不同类型,最右边:筛选不同类型的图标
【Local file(本地SVG文件或者PSD文件)】
Name:xml文件名称
Size:设置矢量图的大小
Opacity:设置不透明度
Enable auto mirroring for RTL layout:为RTL布局启用自动镜像
Path:选择本地矢量图(比如svg图片)
从本地导入上面预留好的svg文件,如下:
最上边的箭头,引进来的SVG格式图片会转为xml格式,在drawable包下显示
<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="100dp"android:height="100dp"android:viewportWidth="1024"android:viewportHeight="1024"><pathandroid:pathData="M519.38,3.19l0,861.31L439.63,864.5 439.63,3.19l79.75,0z"android:fillColor="#337ab7" /><pathandroid:pathData="M599.13,823.03L481.1,1024l-121.22,-200.97 239.25,0z"android:fillColor="#337ab7"/>
</vector>
- 具体怎么调用呢
1:最低版本设置为5.0以上
调用方式和普调的图片一样
2:如果项目最低的版本要求是在5.0以下
a: 则不要在xml里用android:background这个来调用vector的图片,否则app运行在5.0以下是会奔溃的,5.0以上不会
b:Activity需继承AppCompatActivity,则可在布局中用ImageView,不是的话需用android.support.v7.widget.AppCompatImageView.
加上xmlns:app=”http://schemas.android.com/apk/res-auto”,再将drawable设置到app:srcCompat如下:
<ImageViewandroid:layout_width="100dp"android:layout_height="100dp"app:srcCompat="@drawable/ic_baseline_access_alarm_24" />
Java代码设置 mImageView.setImageResource(R.drawable.ic_baseline_access_alarm_24);
c:转成Drawable使用
图片有时是需要转成Drawable来使用,如TextView中的Drawable.为了兼容Android L以下版本,需要按照以下方法进行转换.
- 方法一:
VectorDrawableCompat vectorDrawableCompat = VectorDrawableCompat.create(getResources(), R.drawable.ic_baseline_backspace_24, null);
- 方法二:Activity中加静态代码块
static {AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);}
- 然后常规图片资源获得Drawable的方法去处理
Drawable drawable = ContextCompat.getDrawable(this,R.drawable.ic_baseline_backspace_24);
- 如果没加静态代码块,5.0下会Crash.
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);的方法描述解释了如何兼容AndroidL下版本使用SVG与注意事项.
建议使用第一种方法,较灵活.
六:语法
具体语法详情见:https://www.cnblogs.com/yuhanghzsd/p/5466846.html
SVG在Android上的使用相关推荐
- android能用svg格式,Android加载html中svg格式图片进行显示
最近做的一个项目是把assets目录中的html显示出来,但是因为html里面有一些工程图片,虽然我用ViewPager和PhotoView,进行显示放大了,但是因为工程图片的线条较多还是比较模糊.所 ...
- android 载入svg动画,Android 加载SVG动画
Android 加载SVG动画 SVG 可以说是目前比较流行的图片格式,使用领域也十分广泛,例如:web 前端页面,Android ios 等移动应用.都可以使用 SVG 的图片格式.今天就要和大家谈 ...
- SVG - 在Android中使用矢量图全攻略
概念 什么是矢量图,SVG SVG全称:可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像 ...
- 如何在Android上显示wmf的文件
菜鸟进场,方圆十里,寸草不生 最近定制化一个app,需要显示wmf的文件,但是Android上无法对这种文件的直接显示,所以就需要对文件进行一个转换,网上对这方面的需求很少,所以简单的记录一下,就讲讲 ...
- android上传本地图片到服务器上,Android使用post方式上传图片到服务器的方法
本文实例讲述了Android使用post方式上传图片到服务器的方法.分享给大家供大家参考,具体如下: /** * 上传文件到服务器类 * * @author tom */ public class U ...
- 构建node.js基础镜像_在Android上构建Node.js应用程序
构建node.js基础镜像 by Aurélien Giraud 通过AurélienGiraud 在Android上构建Node.js应用程序-第1部分:Termux,Vim和Node.js (Bu ...
- 如何为Android上的产品设计一款合适的图标
如 果你已经完成了你的app,你一定会马上向其它人宣布这件事情.但是你需要注意一个很重要的问题,那就是app的图标.你的图标可能在项目启动之 前就已经设计好了,但我不喜欢这样,如果app没有完成实际上 ...
- Android上的MVP:如何组织显示层的内容
MVP(Model View Presenter)模式是著名的MVC(Model View Controller)模式的一个演化版本,目前它在Android应用开发中越来越重要了,大家也都在讨论关于M ...
- android上的i-jetty (1)环境搭建
android上的i-jetty (1)环境搭建 android ftp swiftp http://code.google.com/p/swiftp/ 介绍下如果把android设备作为一个web ...
最新文章
- “2018中国AI英雄风云榜”年度人物榜:“AI天才”何恺明
- HTML5实现屏幕手势解锁(转载)
- Myeclipse debug时出现跳行问题的解决
- 【转】C#实现SM2国密加密
- android判断主线程_android中从子线程切换到主线程,但是显得代码很臃肿,请教大牛是怎么自定义的?...
- java bitset_Java BitSet or()方法与示例
- python实现knn算法鸢尾花_Python学习之knn实现鸢尾花分类
- Java经典编程题50道之四十二
- Docker 为什么输给了Kubernetes?Docker 员工自述!
- Unity 安装个人免费版步骤详解
- 目标跟踪之Pysot系列代码训练(SiamRPN\SiamRPN++)
- 医院子母钟时钟系统可选方案
- PD QC充电器XP06诱骗取电9V 12V 15V 20V原理
- 手机qq2010java触屏_手机QQ2010(Java触屏)Beta2发布:操作更流畅
- 精神分裂型患者大脑结构和功能连接的改变
- 讯飞智能录音笔SR502内存升级为32G,帮用户留住更多动听旋律
- 生日悖论(python)
- 在Linux上,使用time优雅的统计程序运行时间
- 其他浏览器(firefox,chrome)可以上网 ie(Internet Explorer)无法上网 解决方法
- Python 发红包(用numpy)
热门文章
- 灯光秀制作讲解_灯光秀如何创作及其流程(一)
- 《乐高EV3机器人搭建与编程》——2.6 传感器
- golang 连接mysql,连接字符串参数
- 前端开发找工作都有哪些靠谱途径?
- 使用 Easy Sysprep v4(ES4) 封装 Windows 7教程
- 业务状态实时监控预警,「告警配置」来帮您
- 微信删除好友聊天记录还在吗?如何查看已删除的微信聊天记录
- 葡萄糖-聚乙二醇-6-羧甲基荧光素 Glucose-PEG-6-FAM
- oracle的dbtime,Oracle查询dbtime,以及各个指标的查询脚本
- java多线程批量处理