svgforandroid
1. Android 页面中png jpg gif webp svg的区别和使用
JPG能显示的颜色比gif和png要多的多;同时能得到很好的压缩;但是是一种失真压缩(压缩比;分辨率;可感知失真);jpg适合应用在那些允许轻微失真的像素色彩丰富的场景;不适合做简单色彩的图片(icon,小logo)。
支持动画;也是一种无损的图片格式(修改图片后;图片质量没有损失);仅支持8位颜色深度;受这个限制;gif不适合应用于各种色彩过于丰富的场景。
Google开发的一种旨在加快图片加载速度的图片格式,图片压缩体积大约是jpg的2/3;能大量节省服务器带宽资源和数据空间;也是一种有损压缩;目的就是加快网络图片的传输效率;让图片更快的显示在用户面前;目前所知道的只有高版本的W3C浏览器才支持 (chorme39+,safari7+)。
SVG正变得越来越热门,它不同于以上所有的文件类型,因为它是一个矢量文件格式。这就是说它实际上是由线条和曲线,而不是像素组成的。当你放大一个矢量图像时,你仍然看到一条曲线或一条线。当你放大一个由像素构成的图像时,你会看到像素。
对于小logo和图片来说;svg是很理想的;因为无论是Retina屏还是其他低分辨率的屏幕上显示都是一样的;svg的logo可以放大不失真;如果是像素构成的图片格式想要不失真就要多套的图片,svg是用XML编写的;可以用js来改变svg图片的颜色
Svg在渲染的时候需要比像素图更多的计算能力;更加的消耗性能;所以你的svg图比较复杂;可能会很耗费性能;甚至文件大小也很大
参考: https://segmentfault.com/a/1190000018258226
2. android系统有哪些开发者小技巧
下面是开始Android编程的好方法:
找一些与你想做事情类似的代码
调整它,尝试让它做你像做的事情
经历问题
使用StackOverflow解决问题
对每个你像添加的特征重复上述过程。这种方法能够激励你,因为你在保持不断迭代,不经意中你学到了很多。然而,当你发布应用时你还要做一些更深入的事情。
从一些可正常工作的代码到一个可怕的应用程序是一个巨大的跳跃,相比iOS平台Android更是如此 。当在iOS上发布应用时只是在一个设备上跳跃–你的手机–对很多设备而言都很相似–同样大小的屏幕,都有很好的硬件,95%上运行相同版本的操作系统。在Android应用中你不会遇到这种情况。
你的程序必须能够处理一切:从屏幕,处理器,定制的操作系统,API层级以及任何其他的特定设备。
这是我对使Android应用舒服起来的个人建议。
目标屏幕尺寸及解决方法
在Android世界里目前有超过100种的不同屏幕尺寸,但解决方法也很丰富。为使你的应用适应不同的屏幕配置有两件事情你需要确定:
你对不同的屏幕尺寸有一个好的布局和结构
你的图像在不同分辨率下工作良好
这些都是独立的任务,你可能有一个超级的tablet布局,但上面的图形看起来很糟糕。我们会依次讨论他们。
为不同的屏幕而设计
1.通常会用ScrollView 和 ListView 轻松搞定
当我们有一系列不同尺寸的大屏手机时,它们之间最大的不同就是屏幕的高度。因此ScrollView和ListView通常可是有效的工作,虽然有时它们并不能完全覆盖全部屏幕。在OpenSignal中的Dashboard标签下我们可以看到所有部件一气呵成,不存在滑动、对于许多高级类型标签中,滑动展示并不见得是一件坏事。如果你能够为你所有的设计匹配到各种屏幕上面去,那么最好不过。否则,这两个控件会让你用最小的开发代价来保证你的软件在大多数屏幕上正常展示。
Dashboard style 的设计不需要scroll
2: 使用文件夹. Android 的资源文件夹结构非常强大, 它允许开发者将不同的图片、字符串、布局文件、外形、颜色这些资源,在api、代码、屏幕尺寸等部分. 下面是一个例子,展示了在资源文件夹下你可以怎样做:
在 values-small 文件夹中存放了一个 bools.xml 文件, 文件中有如下几行代码:
<resources>
<bool name="small_screen">true</bool>
</resources>
在代码中我可这样引用:
if(getResources().getBoolean(R.bool.small_screen)){
getSupportActionBar().hide();
}
在小尺寸设备中boolean值将置为true 我此时将因此ActionBar来节省空间. 这段代码正是非凡的ActionBarSherlock 扩展库中的一部分,稍后再详细介绍. 在values-sw360dp文件夹中,存放对应屏幕宽于360dp的资源文件。与上面相同的位置,有如下代码
<resources>
<bool name="small_screen">false</bool>
</resources>
对于大屏幕而言,ActionBar就置为了显示状态.
我不需要将 bools.xml 文件放入 values-sw400dp文件夹中, 因为操作系统会自动按相应路径搜索. 例如一个设备宽 600dp (600/160=3.75 英寸, 这就是我们通常所说的7片装) 操作系统会在values-sw600dp 和其包含的的文件夹中搜索 bools.xml 文件, 若没有找到则搜索 values-sw400dp 文件夹,在搜索 values-sw360dp 文件夹以此类推.
建议3:160dp = 1英寸。320 dp = 2英寸。dp = dip
建议4:你可以用这些目录结构技巧来应付所有资源类型,比如你的XML布局用指定的系统目录名称
来解决这个问题,如:layout-sw360dp目录可以匹配目标宽是360dp的机器。如果你也要支持横竖屏布局切换的话,可以用如下目录:
layout-sw360dp-land
layout-sw360dp-port
别急,你有一半的用户是说阿拉伯语的?那就将布局名称改为下面的样子吧:
layout-sw360dp-land
layout-sw360dp-port
layout-sw360dp-land-ar
layout-sw360dp-port-ar
前两个可以适用于所有语言,-ar代表阿拉伯语。
建议5:资源规则简介:
XXX //例子:没有添加目录名:默认-适用于Nexus One,Droid 2,S2
XXX-sw360dp // 比较大的手机 – Galaxy Nexus, S3, S4
XXX-sw600dp // 7〃 平板
XXX-sw720dp // 10” 平板
在Kindle设备有些不同,如下:
XXX-large-mdpi // kindle fire 7〃
XXX-large-hdpi // kindle fire 7〃 HD
建议6:如果你不想裁剪所有的布局文件,你可以用dimens.xml文件。你要是留心我上面的文章,你就会注意到在我的values目录里有很多dimens.xml,这样是因为我更喜欢在一个layout.xml里设置值,在每一个布局文件里我喜欢这样做:
<ImageView
android:layout_centerHorizontal="true"
android:layout_marginTop="@dimen/small_margin"
android:layout_width="@dimen/dashBoardWidth"
android:layout_height="@dimen/dashBoardHeight"
android:id="@+id/dashboard"/>
small_margin是在dimen.xml文件里定义的:
<resources>
<dimen name="small_margin">4dp</dimen>
</resources>
这个4dp变量在所有dimen文件里。我有个Excel文件,里面创建了所有不同的基于不同因素所需的尺寸定义。也许你会问:为什么不让android OS来处理所有尺寸的问题?为什么不呢,为什么不用一个values目录和一个布局目录来代替所有写死的数值呢?那当然是可以的,如果设置得当,都会得到所有的尺寸,但是对于有些元素看起来就不是那么好计算尺寸了。
建议7:让空白空间大于图像空间。让图像空间大于按钮的大小。如果将按钮,多选框,切换控件放大后是很丑陋的。一个100dip(0.63")大小的按钮是不想在平板上显示为原来两倍宽度200dip(1.25")的.原因是屏幕变大了,这不是说平板是给巨人用的。我们可以这样做,在按钮增加的空间和图片扩展的空间里添加空白。
建议8:用GraphicalLayout工具快速预览。GraphicalLayout是WYSIWG XML编辑器。我喜欢直接编写元素-而不是拖,丢弃的可见编程方式,但在添加一些元素之后,可以在GraphicalLayout的下拉选择菜单里选择不同屏幕尺寸进行测试。
这里有很多选项供你选择。
图片缩放
建议9:不要把所有的图片都缩放了。用布局文件来适应不同屏幕尺寸的方法只是成功的一半,布局里的元素(如:图片)也要能在高分辨率的屏幕下良好工作。在概念上比较简单的方式就是创建一套完整的图片目录并将它们与很多drawable目录匹配起来。
drawable-sw600dp-ldpi
drawable-sw600dp-mdpi
drawable-sw600dp-hdpi
drawable-sw600dp-xhdpi
drawable-sw600dp-xxhdpi
...其它的类似。
不要这样做:
你不要太尽信书了。
一般来说有drawble-ldpi, drawable-hdpi等目录就足够了,不需要将所有的情况都加上。
建议10:避免使用位图(jpg,png)。对于一些图标来说,用位图是个不错的选择,因为它们使用简单。但是如果可以避免使用位图,你可以节省很多空间。但用不同的方法也可以达到很好的结果。
建议11:用XML绘图。位图都可以用XML绘图来代替的。XML绘图不是万能的,但是它的方便性还是使我感到惊讶。Android开发文档中有详细的介绍,这里有个简单的例子:
这里是定义了一个圆角矩形,一个有渐变的边(深蓝)。你可以在布局文件的任何地方来引用,而且它可以适应于任何屏幕。用它可以做出理想的按钮。
建议12:用更多的XML绘图。再来介绍一个用XML绘图制作出能更加让你兴奋的例子,下面的雷达背景看起来是不是更加的复杂:
不用位图对你的UI是没有坏处的(除过图标)。
建议13:仍然用更多的XML绘图(如果必须,就用位图)。那我们怎样为天气信号构建一个超酷的图标-让灯泡动态的依据光的强度来进行自动填充,以及怎么点击指针后让其旋转呢?这里我们用位图和XML结合起来做个例子:
灯泡我们用PNG图:icon_magnitude_min(一个空的灯泡)和icon_magnitude_max(充满光的灯泡),然后我们动态的裁剪后者。为了实现这个目标我是这样做的:
在java程序中我将得到回形针的引用,然后可以用它来控制光的强度。
建议14: 为什么要用9-patch (当你可以用XML drawables的时候)? Android具有使用9-patches 来定义drawables的选择,有些教程阐述了怎样用它们来做一个按钮,这样可以在伸展的时候保持几个角不变 (并且避免了像素处理)。如果你已经知道怎样使用9-patches,可能是从web设计中学会的,那么它们或许值得一用。如果你对9-patches并不熟悉,我建议你维持原样。如果你想适应什么东西——例如拐角的圆弧或者颜色,创建9个小块要比创建位图更多被涉及,这就像回到了图像编辑器的时代。许多用9-patches获得的效果也可以通过XML获得。
建议15: 通过覆盖onDraw()创建自定义views. 有些事情XML并不十分在行,我们在OpenSignal和WeatherSignal中画过许多图像,为此有许多的库,但是我们要为自定义图像自己编写代码。这很有趣。或许你永远也不需要做这个,但为了使图像高度动态并自定义,这经常是唯一可行的办法。
建议16:在不能使用XML的地方使用SVG. 有时候复盖onDraw()并勤勤恳恳的为自定义view编写代码画出需要的线条与弧线是过于技术化了。毕竟有一种矢量图像语言,它称作…Scalable Vector Graphics(可扩展矢量图形)。它也是史上最酷的Android应用之一—Androidify的动力来源。事实上他们创建这个库就是为了那款应用,他们将它发布在这里:SVG for Android 。这也就是我们在OpenSignal中画仪表盘所用到的。
建议17: 对SVG文件GZip压缩. 将它们变得更小它们就会处理的更快。
建议18: SVG库并不是支持一切. 在一些特定的alpha通道中似乎不能正常工作,你甚至不得不在代码中将它们剔除。
达到在android所有版本里表示展现一致的目标
建议19:在一些android系统里(如TouchWhizz/HTC Sense/MotoBlur等等),默认的buttons和其他UI组件会跟原生系统里的看起来差别很大。我希望这不是真的,但事实却是如此。
建议20:自定义你的UI组件。为了确定你的app在所有的设备里看起来是一致的,你将需要自定义所有的东西。这其实没有你想象中那么难,只要你做到了,你将能更加好地把握到你的app的展示外观。
建议21:Selectors是创建buttons的利器。我们在上面提到了如何在XML里定义button的背景,但是你将如何创建一个当按下去会改变的button呢?很简单:像下面那样在xml文件里定义背景。该xml文件将接收到button当前状态并且在外观上做出相应的改变。
建议22:在Honeycomb之前的版本里时不存在ActionBar跟很多 animation 样式的,所以可以使用ActionBarSherlock 跟NineOldAndroids来代替。Jake Wharton写的Android开源 组件都是往下兼容的精心杰作。更为惊喜的是,ABS 拥有强大的功能用来定义ActionBar。
把速度作为目标
建议23:在运行慢的手机上测试。你将在运行慢的手机上发现很多问题,同时它让你抓狂,没人会喜欢运行慢的程序。
建议24:尽量减少XML布局层次。更多的层次意味着系统将为解析你的代码付出更多的工作,这将会让图像渲染的更慢。
建议25:用Android Lint。在工程目录上右键选择Eclipse>Android Tools>Run Lint。它将会得到程序的一些信息,并能提高程序的运行速度,或者它能让你得代码更加清爽。
建议26:Android Lint可以得到错误信息。它可以给你的代码提供很详细的信息,并在你出错之前就可以给做出提示。
建议27:用<merge>可以帮助你减少视图层次结构。这是一种简单的方式来去除多余的层次。好的文章都对此有所解释,而且在 Android Developer中它也显得与众不同。
建议28:用HierarchyViewer可以直观的看到你布局的层次。这个智能的工具可以显示布局中有多少层次,而且可以提示出那些可以让程序变慢。
建议29:如果可以尽量用RelativeLayout。AbsoluteLayout已经过期了,就不要用了。你经常会遇到在RelativeLayout和LinearLayout中做出选择的情况,那就直接用RelativeLayouot吧,因为它可以让你减少视图层次。比如,你想实现一个如下视图:
盒子 A 在屏幕左半边 |盒子 B在屏幕右半边
你首先会想到这么做:
<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
>
<TextView
android:text=”Box A takes up left half of the screen”
android:layout_width=”0dip”
android:layout_height=”wrap_content”
android:layout_weight=”1″
/>
<TextView
android:text=”Box B takes up left half of the screen”
android:layout_width=”0dip”
android:layout_height=”wrap_content”
android:layout_weight=”1″
/>
</LinearLayout>
That works just fine, but you could also use:
<RelativeLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
>
<TextView
android:text=”Box A takes up left half of the screen”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_toLeftOf=”@+id/mmy_center”
/>
<View
android:id=”@+id/mmy_center”
android:layout_width=”0dip”
android:layout_height=”0dip”
android:layout_gravity=”center”
/>
<TextView
android:text=”Box B takes up left half of the screen”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_toRightOf=”@+id/mmy_center”
/>
</RelativeLayout>
第二个表单比第一个难看的多,事实上是相当的糟糕:我们已经介绍过一个完整的新元素了。但是假如我们要给每个盒子里加入一个图片,一般的我们将这样做:
盒子 A 在屏幕左半边 图片|盒子 B在屏幕右半边 图片
用第一中方法,你得创建一个有两个层次的LinearLayout,如果用第二种方法,你可以直接在同一个RelativeLayout中加入图片,比如要指定第一个图片必须在“mmy_center”的左边,而且一个TextView A必须也在其左侧。那么你就得用7个元素3个视图层次了(LinearLayout 方式),而(RelativeLayout方式)只用6个元素2个层次,这样所有的工作添加完成。
建议30:用一些扩展工具如DDMS。这可以帮助你发现一些不必要的网络调用、查看电池使用量、垃圾回收信息,状态变化(例子:当回调onStop和onDestroy时)等。LittleEye是我目前比较喜欢的工具。
建议31:用AsyncTasks。Anroid工程团队受够了人们经常在UI线程里面实现网络调用(译注:耗时操作,容易阻塞UI刷新),所以他们实现了一些可产生编译级错误信息的API。但是仍然在很多app中的一些工作会拖垮UI线程,我们要考虑到UI布局要快以及提高UI的响应性。
目标机器空间小
建议32:一些Aandroid设备有100mb空间大小的限制。现在情况已有变化了,但是仍然有很多用户还会担心5Mb大小的app会浪费空间。如果你可以选择将app装入SD卡的话,这就不是问题了,但如果你的app需要在onBoot里启动的话你就不能装入SD卡了(例子:如一些窗体小部件).甚至对于一些新的设备,如果能很快的下载一个小的APK的话,用户还是很高兴的。
建议33:用XML资源(我发誓上次我已经提醒过了),这将比PNG资源节省很多空间,当你仅仅需要一个可以满足很多屏幕大小的配置时,一个XML文件会比能实现同样功能的PNG省空间。
建议34:如果要用PNG,最好优化一下(用PNGCrush或ImageOptim)
目标bugs
建议35:在Android开发者控制台里检查所有被自动检测出来的bugs.
建议36: ProGuard现在是默认启动着的. Proguard太好用了 (提高你app的速度和降低文件大小),但这也让StackTraces 非常难以处理。你将需要重新追踪你的StackTraces,因此你将需要继续保留在每次构建中创建的Proguard的映射文件。我把它们都放到以代码版本号命名的文件夹里。
建议37: 为了显示StackTraces里的行数,你需要修改ProGuard的配置。确认你的proguard.cfg拥有下面这句话:
-keepattributes SourceFile,LineNumberTable
建议38:使用staged rollouts。测试5%的基础用户,并且观察bug报告。
建议39:使用真实设备测试平台。Device Anywhere and Perfecto Mobile提供了虚拟测试平台,在那里,你可以使用真正的移动设备。我发现他们有一些笨拙,加入连续不断地进行测试的话,会导致有一些糟糕的情况。如果你在联合办公的环境里工作,或者有一些Android开发的好友,那么去启动一个“设备池”吧。
建议40: 多写代码少写博客。其实不是的, 分享就是关爱, 我只是想不出第40条写什么是了。
3. SVG图片自适应Android webview大小
WebSettings ws = tv.getSettings();
//html的图片就会以单列显示就不会变形占了别的位置
ws.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
//让缩放显示的最小值为起始
webView.setInitialScale(5);
// 设置支持缩放
webSettings.setSupportZoom(true);
// 设置缩放工具的显示
webSettings.setBuiltInZoomControls(true);
4. Android 制作逐渐显示动画(描边动画、矢量动画VectorDrawble)
Android 系统从5.0开始支持矢量图,可以通过 Android Studio自带的 Vector Assert 工具将SVG、PSD 转成VectorDrawble。
转化好的VectorDrawblew看起来好像挺复杂,是不是完全看不懂。没关系,只要转化的图形没有问题,你不用关心其内部数据。
我们直接进入矢量动画部分。
矢量动画的实现通过在xml定义<animated-vector>标签(其对应的Java对象是AnimatedVectorDrawable)实现,如下所示:
可以看到<animated-vector>标签是主要元素是target,它其实就起到一个桥梁作用,将动画和VectorDraw中的图形联系起来。
比如target1,它将属性动画splash_animator_draw和vectorDrawble对象中name等于line1的对象联系起来,即:动画将生效在line1对象上。
之前展示了由svg图片通过Android Studio Vector Assert工具转换过来的VectorDrawble,里面的实际上svg画图语法,<path>标签里的pathData包含了画图的路径(坐标)和语法
在实际使用过程中有几率遇到这样两个问题(笔者都遇到过):
其实以上两个问题都要求你掌握进阶知识,svg画图语法。
官方svg语法解析: https://www.w3.org/TR/SVG/paths.html
不喜欢看英文,去这篇博客: http://www.jianshu.com/p/a3cb1e23c2c4
对于Android程序员,Lottie的动画使用很简单,步骤如下:
1.接入Lottie
从动画实现上来说,Lottie动画应该是最简单的方法了。
Lottie的优点很明显:
Lottie的缺点:
好了,如果觉得本文对你有帮助,请关注、留言、点赞我,谢谢!
5. android图片系列 (2) - 静态 SVG 图片
SVG 图片是一种可支持任意缩放的图片格式,使用 xml 定义,使用 canvas 中 path 路径来完成绘制,和我们传统使用的 BitMap位图有很大的区别。
SVG 在前端早就普及了,在android 中是 google 是在5.0之后开始支穗埋持的,14年出来之后兼容是个大问题,随着2016.2 V7包 23.2.0版本的发布才算是有个相对完善的兼容使用方案。
SVG 的概念我就不写了,拿来主义啦,原文: Android Vector曲折的兼容之路
不瞎逼逼,我们先来看一看 android 中的 SVG 矢量图是个什么东东
看到没有,这就是一个 SVG 矢量图片,就是一个 xml 文件,右边是预览,先说下,这东西的好处:缩放不失真,体积小。这一个 SVG 图片只有970个字节...强大吧,比 png 格式的图片强的没边了吧,png 我们还得适配,做多套,然后一个一个改名字复制到工程里,有了 SVG 妈妈再也不担心我们写作业啦...
这里需要解释下这里的几个标签:
这里有一分详细的属性说明:
好了下面开始介绍 SVG 啦
首先,需要讲解两个概念——SVG和Vector。
SVG,即Scalable Vector Graphics 矢量图,这种图像格式在前端中已经使用的非常广泛了
Vector,在Android中指的是Vector Drawable,也就是Android中的矢量图
因此,可以说Vector就是Android中的SVG实现猜颤蚂,因为Android中的Vector并不是支持全部的SVG语法,也没有必要,因为完整的SVG语法是非常复杂的,但已经支持的SVG语法已经够用了,特别是Path语法,几乎是Android中Vector的标配
Android以一种简化的方式对SVG进行了兼容,这种方式就是通过使用它的Path标签,通过Path标签,几洞消乎可以实现SVG中的其它所有标签,虽然可能会复杂一点,但这些东西都是可以通过工具来完成的,所以,不用担心写起来会很复杂。
Path指令解析如下所示:
支持的指令:
M = moveto(M X,Y) :将画笔移动到指定的坐标位置
L = lineto(L X,Y) :画直线到指定的坐标位置
H = horizontal lineto(H X):画水平线到指定的X坐标位置
V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
Z = closepath():关闭路径
坐标轴为以(0,0)为中心,X轴水平向右,Y轴水平向下
所有指令大小写均可。大写绝对定位,参照全局坐标系;小写相对定位,参照父容器坐标系
指令和数据间的空格可以省略
同一指令出现多次可以只用一个
注意,’M’处理时,只是移动了画笔, 没有画任何东西。 它也可以在后面给出上同时绘制不连续线。
关于这些语法,开发者需要的并不是全部精通,而是能够看懂即可,其它的都可以交给工具来实现。
这里有一篇 Android vector标签 PathData 画图超详解 详细描述了 SVG 中 path 的绘制
好了概念性的东西说完了,我们来看看
SVG 的使用分2种,一种是静态 SVG 矢量图,就是本文的主角,本章节主要谈论的东西,另一种是 SVG 矢量动画,是SVG 的高级应用,是给静态 SVG 加上objectAnimator 动画,应用的很广泛,是实现 android icon 动态交互的核心做法。
上面的SVG 图大家都看到了,我们就是写一个 xml 的文件,里面承载的标签都是描述如何绘制我们想要的图案的,画布大小,颜色,路径等,然后交给系统去绘制。
现在让我们来看看 SVG 在 andorid 中如何应用,如何兼容5.0以下版本。
SVG 虽然早早就在前端使用了,但是 android 上开始支持 SVG 的使用还是从5.0开始的,在5.0以上系统的使用很简单,和之前一样使用 PNG 图片一样
首先 android 中的 SVG 图片的承载方式是一个 xml 文件,所以UI 给我们的 SVG 图片是不能直接使用的,这里 google 给我们提供加载方式
Android studio 在 2.3.3 的版本中可以直接使用 svg,新建一个 SVGDemo项目,新建 Vector Asset 文件:app-> main -> New -> Vector Asset 如图所示:
我们选择 Local File 就是选择本地svg文件进行导入,对文件命名后点击 Next ->Finish 在 drawable目录 下就添加了一个.xml的文件
好了这样一个 svg 图片我们算是加入到我们的工程里里了,可以直接使用了。当然在此之前我们把 SVG 图片放在那个 drawable 文件夹呢。对于这个问题就要说一下了:
有一点需要解释一下,svg 矢量图文件我们放在drawable 根目录即可。android 系统不会根据你把 svg 矢量图存放在不同的 drawable 文件夹,对图片进行分辨率上的缩放,因此我们不用像使用 PNG 图片时准备多套图片了。我们导入 SVG 图片默认存放的地址就是 drawable根目录,所以我们就放这里就好了,当然也可以自己写SVG 图片,都是 xml 的,自己写完 path 路径后都是可以查看预览的,一般也不会自己写,都是UI 的活。
这样就 ok啦,5.0以上的系统SVG你就像一般 png 图片一样使用就好啦,你可以试一下。
SVG 在 4.x 版本上的兼容根据 SVG 使用范围的变化,配置也是逐步增加的
这时 imageview 就不行了,我们需要使用 AppCompatActivity 或是 AppCompatImageView,这时我们需要导入 V7 包
gradle 需要如下配置:
系统会在 4.x 版本时对 SVG 自动生成相应的 drawable 图,此时 SVG 是没有无限拉伸特性的,gradle 的配置目的是去这个
举个例子:
资源设置不能用 src 了,必须使用 srcCompat ,这时我们能看到图而不是去 SVG 的特性了
这时上面的设置就不够了,我们在 view 所在的 activity 或是全局添加下面的设置
然后这还不够,我们必须给 SVG 图片添加一个容器,比如 selector,这样我们才能正常使用,比如给 textview 设置图片,自定义属性设置图片
这个 vc_halfstart_24dp 就是 SVG 图片
这个我们必须要添加官方的 vectorDrawable 支持库了,最低支持到 23.2.0
这样基本就没啥问题了
SVG 配合自定义 view 的话,就得我们读取 SVG 然后转换成 path 路径来画了,SVG 实质上也是 xml 文件,所以解析 xml 文件的思路也使用,当然还有其他一些 SVG 转 path 的思路
SVG前戏—让你的View多姿多彩 一文中提供了一些思路,大家不妨去看看