Android应用开发之PNG、IconFont、SVG图标资源优化详解

android:text="@string/icon_font_add" />

接着给该TextView指定使用IconFont的文字文件。如下：

Typeface iconfont = Typeface.createFromAsset(getAssets(), “iconfont.ttf”);

TextView textview = (TextView)findViewById(R.id.test);

textview.setTypeface(iconfont);

至此IconFont的使用就搞定了，是不是很简单而且超级赞，优劣自行脑补。

这玩意超级简单，主要脑动力在美工妹妹，和咱程序员关系不是很大，所以直接用即可，不做Demo演示了，我们项目中也用了很多这玩意。

3-2 SVG使用实例

---

说到这货，哈哈上面搞IconFont的美工妹妹一定知道，IconFont制作的来源就是SVG，只是SVG制作比IconFont容易且使用更加灵活而已。下面我们下来看一下SVG图片直接用Txt打开后的d属性，至于为啥看它，请自行脑补。PS：这货除过控件支持以外还可以直接扔给WebView去显示，因为其本质就可以说是HTML相关的东东。

SVG Path Data：

前提先说好，SVG和PathData都是可以通过美工的工具生成的，下面之所以介绍PathData只是一种简单的背景了解而已。如下是一张SVG格式的图片（再来一层像不像超人标示，哈哈）：

我们现在拿txt工具把他打开（而不是图片浏览器），如下：

<?xml version="1.0" standalone="no"?>

<svg width=“4cm” height=“4cm” viewBox=“0 0 400 400”

xmlns=“http://www.w3.org/2000/svg” version=“1.1”>

A path that draws a triangle

<rect x=“1” y=“1” width=“398” height=“398”

fill=“none” stroke=“red” stroke-width=“3” />

<path d=“M 100 100 L 300 100 L 200 300 z”

fill=“yellow” stroke=“red” stroke-width=“10” />

握草！可以很明显的看见PathData不就是SVG图片里path节点下的d属性值么？为了能够看明白上面这个d属性值和上面贴的图片关系，我们先来看几个科普。

SVG Path Data命令解释（注意：每个命令都有大小写形式，大写代表后面的参数是绝对坐标，小写表示相对坐标，每个参数之间用空格或逗号区分）：

M/m命令：moveto移动到绘制点，后面跟上坐标系点对即可。

Z/z命令：closepath一段路径等的闭合点，无参数。

L/l命令：lineto绘制一个点到另一个点的直线，多个坐标对可以绘制折线，后面跟上坐标系点对即可。

H/h命令：lineto从当前点到指定x点绘制水平直线，多个x无意义，后面跟坐标系x点即可。

V/v命令：lineto从当前点到指定x点绘制垂直直线，多个y无意义，后面跟坐标系y点即可。

C/c命令：cubic bezier三次贝塞尔曲线。

S/s命令：cubic bezier三次贝塞尔曲线。

Q/q命令：quatratic bezier二次贝塞尔曲线。

T/t命令：quatratic bezier二次贝塞尔曲线。

A/a命令：elliptical arc圆弧线。

好了，到这里你至少知道上面那个类超人图标的东东XML是啥意思了，有这些就足够了，下面我们开搞。

Android L时代的局部SVG先驱VectorDrawable和AnimatedVectorDrawable：

下面我们先来看下Android L时代Google给我们放的大招，牛逼的SVG支持，其中支持控件有VectorDrawable和AnimatedVectorDrawable，遗憾的是这两控件在support包木有，可喜的是有现成的第三方开源兼容包。VectorDrawable的父类是Drawable，Drawable的父类是Object；AnimatedVectorDrawable的父类也是Drawable；从这就能看出来Android L拓展的SVG控件实质也是一个Drawable。

VectorDrawable的创建可以通过一个<vector>节点的XML进行定义，下面我们来看看这些相关节点属性的含义：

<vector>：定义一个Vector Drawable。

android:name 定义这个VectorDrawable的名字；

android:width 定义本质的几何宽度，尺寸标准随意，一般为dp；

android:height 定义本质的几何高度，尺寸标准随意，一般为dp；

android:viewportWidth 定义viewport宽度，viewport是将path绘制在上面的一个虚拟画布；

android:viewportHeight 定义viewport高度，同上；

android:tint 定义Drawable的着色，默认没有色彩；

android:tintMode 定义着色模式，默认是src_in；

android:autoMirrored 定义图片是否需要镜像反转，当布局方向是RTL，即从右到左布局时才有用；

android:alpha 设置图片的透明度；

<group>：定义一个Path组或者子组。

android:name 定义组的名字；

android:rotation 定义组的旋转角度；

android:pivotX 定义缩放或者旋转中轴点x坐标，是虚拟画布中的坐标；

android:pivotY 同上，定义y坐标；

android:scaleX 定义缩放x维；

android:scaleY 定义缩放y维；

android:translateX 定义x缩放，是虚拟画布中的坐标；

android:translateY 定义y缩放，是虚拟画布中的坐标；

<path>：定义一个被绘制的Path。

android:name 定义path的名字；

android:pathData 定义路径采用了SVG文件里d标签中的path值，这些值绘制在虚拟画布上；

android:fillColor 定义路径填充颜色；

android:strokeColor 定义path的外轮廓颜色；

android:strokeWidth 路径的宽度；

android:strokeAlpha 一个路径的透明度；

android:fillAlpha 全路径透明度；

android:trimPathStart 开始路径的百分比，0-1；

android:trimPathEnd 结束路径的百分比，0-1；

android:trimPathOffset 转换区域0-1；

android:strokeLineCap 设置线的顶路径，圆还是方等；

android:strokeLineJoin 设置线连接处路径方式；

android:strokeMiterLimit 设置线的修饰；

<clip-path>：定义路径裁剪，只适用于当前组或者子项。

android:name 定义裁剪路径的名字；

android:pathData 定义路径采用了SVG文件里d标签中的path值；

扯了这么多，接下来我们举个例子吧，哈哈，好在强大的AS已经支持在drawable下右键新建Vector资源了，支持的还是满强大的，SVG或者MD的图片直接到我们需要的xml文件一步生成。牛叉的一逼，再也不像刚出来那会搞个SVG2XML需要第三方工具了，如下是我通过AS选择的一副图片生成的XML，如下：

生成XML如下：

<vector xmlns:android=“http://schemas.android.com/apk/res/android”

android:height=“64dp”

android:width=“64dp”

android:viewportHeight=“600”

android:viewportWidth=“600” >

<group

android:name=“rotationGroup”

android:pivotX=“300.0”

android:pivotY=“300.0”

android:rotation=“45.0” >

<path

android:name=“v”

android:fillColor="#000000"

android:pathData=“M300,70 l 0,-70 70,70 0,0 -70,70z” />

第二步，创建<animated-vector>元素的矢量资源动画，放置在res/drawable/下，这里主要就是将动画与前面的VectorDrawable进行关联。如下是一个例子：

<animated-vector xmlns:android=“http://schemas.android.com/apk/res/android”

android:drawable="@drawable/vectordrawable" >

<target

android:name=“rotationGroup”

android:animation="@anim/rotation" />

<target

android:name=“v”

android:animation="@anim/path_morph" />

第三步，创建<objectAnimator>元素的一个或多个对象动画器，放置在res/animator下，这玩意其实就是我们之前认识的真实的Android属性动画ObjectAnimator或AnimatorSet喽，没啥意思，不过还是看下它是怎么控制pathData的吧，如下：

写在最后

很多人在刚接触这个行业的时候或者是在遇到瓶颈期的时候，总会遇到一些问题，比如学了一段时间感觉没有方向感，不知道该从哪里入手去学习，对此我整理了一些资料

如果你熟练掌握以下列出的知识点，相信将会大大增加你通过前两轮技术面试的几率！这些内容都供大家参考，互相学习。

①「Android面试真题解析大全」PDF完整高清版+②「Android面试知识体系」学习思维导图压缩包，最后觉得有帮助、有需要的朋友可以点个赞

很多人在刚接触这个行业的时候或者是在遇到瓶颈期的时候，总会遇到一些问题，比如学了一段时间感觉没有方向感，不知道该从哪里入手去学习，对此我整理了一些资料

如果你熟练掌握以下列出的知识点，相信将会大大增加你通过前两轮技术面试的几率！这些内容都供大家参考，互相学习。

①「Android面试真题解析大全」PDF完整高清版+②「Android面试知识体系」学习思维导图压缩包，最后觉得有帮助、有需要的朋友可以点个赞

[外链图片转存中…(img-Uq5OsRi7-1643874223674)]

[外链图片转存中…(img-1xAm9hRF-1643874223675)]

[外链图片转存中…(img-aYFx3KrG-1643874223675)]

本文已被CODING开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》收录