前言

适配可以说是Android的老大难问题了,Android厂商众多,设备碎片化严重.大屏小屏,全面屏,异形屏数不胜数
以下是10分钟内能找到的数据统计
友盟+,全域罗盘

友盟提供的Android尺寸种类

友盟提供的分辨率数量

谷歌开发者社区的统计

这些还仅是占比较多的设备,并不全面
而且同样的屏幕尺寸也存在不同的分辨率
按照友盟的粗劣统计,就算主流10种屏幕尺寸,加上每种尺寸又有不同的宽高比和分辨率.
取10种尺寸,平局每种尺寸有2种宽高比,又有3种分辨率
那么就需要适配1023=60种
但是实际上需要适配的主流手机设备至少也要超过100种吧(单指国内范围)

适配方案

1. AutoLayout 鸿洋大神出品 已经停止维护
2. dp适配. 见过最多一套写了50多个xml配置文件的,应该算是穷举法做适配了吧,但是没法覆盖更多设备
3. 手动百分比适配. Web端常用的适配方式,适配方式复杂,需要每个控件都根据设备屏幕宽度计算控件宽度,然后按照比例计算控件高度
4. 各中大公司自己的适配框架. 认识一些外包公司的朋友,公司都有自己的框架,但是不开源而且加密,只能初步分析是用了百分比的方式适配.具体原理不明
5. 今日头条AutoSize. 也是我现在用的适配框架.

SVG

如果你已经解决了适配的问题,那么SVG仍然能带给你一些方便

什么是SVG

VG是指可伸缩矢量图形 (Scalable Vector Graphics)，它不同于传统的位图，不是通过存储图像中每一点的像素值来保存与使用图形，而是通过 XML 文件来定义一个图形，通过一些特定的语法和规则来绘制出我们所需的图像——同样是使用一张图片，SVG 的方式是事先定义好怎么去画这个图，然后等要用的时候再把它去画出来，而使用传统的位图的话就是已经有了画出来的图，然后要用的时候直接把画好的图拿出来用。

SVG和平时用的位图有什么区别

• SVG是需要显示的时候再把图形绘制出来,所以显示的时候肯定会耗费一些资源(但是位图也需要渲染,具体谁占用的资源更多,需要根据设备来看)
• 因为是用的时候实时绘制,所以SVG不适合太过复杂的图片
• SVG属于矢量图片,不怕缩放失真
• SVG使用代码绘制,体积小
  总结来看,如果是特定的icon图标或者一些不复杂的地方,使用SVG会更好

SVG怎么用

• Android对SVG的支持从Android L开始,对于大家minSDK19的开发习惯来说,还是有一些限制的,而且目前没有什么办法统一适配21以下.但是实测部分国产机型在4.4.4上可以完美运行(酷派的一台充话费送的手机).

使用Android Studio制作一个SVG图形

创建一个xml文件在drawable中

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="120dp"
    android:height="120dp"
    android:viewportWidth="120"
    android:viewportHeight="120">
    <path
        android:pathData="M40,40 L80,40 L80,80 L40,80 Z"
        android:strokeWidth="8"
        android:strokeColor="#e33e2b" />
</vector>

可以实时预览的SVG

语法

SVG使用了</vector>标签,内容的绘制使用了<path/>标签.

• </vector>中参数的意义

1. android:width="120dp" dimen类型 绘制出的图片宽度
2. android:height="120dp" dimen类型 绘制出的图片高度
3. android:viewportWidth="120" float类型 画布的宽度,这里没有具体单位,指代的意思把画布平均分成多少等分
4. android:viewportHeight="120" loat类型 画布的宽度,这里没有具体单位,指代的意思把画布平均分成多少等分
   后面2个属性比较难理解,我把他理解为平时切图中的透明片大小
   比如一张图片10001000px大小,但是除了中间一个200200px的icon,其他都是透明.
   那么icon尺寸200200就是width和height的尺寸,图片尺寸10001000就是viewportWidth和viewportHeight的尺寸.

• </path>中参数的意义

1. pathData String类型 有固定语法,可以理解为画笔
2. strokeColor color类型 画笔的颜色
3. name String类型 </path>的name,可以作为id从其他地方获取到这个path
4. strokeWidth float类型 画笔的宽度
5. fillColor color类型 如果画笔的路径是闭合的,则填充闭合图形的颜色,如果图形不是闭合的,就把起点和终点连接起来填充这个颜色

• pathData的语法
  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 curveto(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()：关闭路径
  参考文章 Android vector 标签 pathData 详解

参考坐标系

• M40,40 将画笔移动到40,40的坐标点
• L80,40 从40,40绘制到80,40(上面的横线)
• L80,80 从80,40绘制到80,80(右边的竖线)
• L40,80 从80,80绘制到40,80(下面的横线)

• Z 关闭路径 自动从40,80绘制到40,40(起点),如果写Z 效果如下图

  
  
  微信截图_20200719175653.png

新建一个SVG图片

QQ截图20200719181400.png

创建页面

这里可以生成两种方式,

• Clip Art 使用预设图案
• Local File 使用本地文件(就和上面一样我们手写自定义图案)

预设模式

这里有很多很多图案,甚至还有一些Ios的预设图标

QQ截图20200719183543.png

这样一个看似复杂的图片就搞定了

QQ截图20200719183715.png

QQ截图20200719183832.png

其实AS4.0中新创建的项目中的2个图标也都是用SVG生成的(可能是我默认minSDK是23的原因,没细究)
ic_launcher_background中写多个path标签的方式能让绘制内容更有阅读性,更易后期修改维护,但是点击标签右边是看不到对应哪一个位置的.尽量给每个path再加上注释就方便日后读写了.

对SVG的介绍就是这些了,更高级的pathData用法,自己琢磨吧