专栏首页Android机动车Android中的Vector

Android中的Vector

一、背景

随着 Android 的碎片化越来越严重,适配成为一个开发中一个痛点。如果 UI 只切一套图,但是在一些特定机型上难免会出现模糊或者变形的情况,如果切多套不同分辨率的图,虽然能解决适配问题,但是造成安装包过大的问题,很多开发者都会为这个问题感到头疼。终于,Android 的 Vector 的出现,可以解决这个问题了。

二、Vector是什么

我们在了解Vector之前,我们必须先了解SVG。

SVG 全称是 Scalable Vector Graphics(可扩展矢量图形) ,是基于 XML 的矢量图像格式,它运行的时候才会去通过一些特定的语法和规则渲染绘制出图像,目前在网页上使用非常广泛使用,它最主要优点就是不会降低图片质量的前提下,可以适应所有分辨率屏幕,文件体积更可以直接用 编写 XML 来描绘图片,使图片具有交互功能。缺点就是因为是运行时才会去绘制,所以效率没有高。

了解完SVG,再去了解Vector Drawable就更简单了,因为 Vector 就是 Android 的 SVG 实现。Vector是Android 5.0 之后才出来的,不过从 AppCompat23.2 开始,Google开始支持在5.0版本以下使用Vector。Vector Drawable 并不是支持所有 SVG 的语法,但是支持的语法已经足够使用。

三、Vector的语法

因为 Vctor 是基于XML的,所以是用代码编写的。示例如下:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="64dp"
        android:height="64dp"
        android:viewportWidth="1024.0"
        android:viewportHeight="1024.0">
    <path
        android:pathData="M842.7,259.9a159,159 0,0 0,-113.1 -46.9h-0.2a158.6,158.6 0,0 0,-112.8 46.7l-0.1,0.1 -294.5,294.5a96,96 0,0 0,68.1 163.7c24.5,0 49,-9.3 67.6,-28l294.5,-294.5a32,32 0,1 0,-45.2 -45.2l-294.5,294.5a31.9,31.9 0,0 1,-45.1 -0.2,31.6 31.6,0 0,1 -0.2,-45.1l294.5,-294.5a95,95 0,0 1,67.6 -28h0.1a95.5,95.5 0,0 1,67.9 28.2c18.1,18.1 28.1,42.2 28.1,67.8a95.1,95.1 0,0 1,-28 67.8l-79.5,79.5 -0.5,0.5 -220.4,220.5a160.3,160.3 0,0 1,-226.4 0.1A158.9,158.9 0,0 1,224 628.2c0,-42.8 16.7,-83 46.9,-113.3l300.3,-300.3a32,32 0,1 0,-45.2 -45.2l-300.3,300.3A222.8,222.8 0,0 0,160 628.2c0,59.9 23.3,116.2 65.5,158.4a223.2,223.2 0,0 0,158.3 65.4,223.7 223.7,0 0,0 158.6,-65.6l311.5,-311.4a31.7,31.7 0,0 0,7.1 -11.1c18.5,-26.6 28.6,-57.9 28.6,-91a159.1,159.1 0,0 0,-46.9 -113"
        android:fillColor="#ff9800"/>
</vector>

Vctor属性:

  • width:图形的实际宽度
  • height:图形的实际长度
  • viewportHeight:画布的长度
  • viewportWidth:画布的宽度

Vector中的path语法基本可以绘制出很多我们想要的图像,可以说path是Vector中最重要的一个,所以我们主要讲一下path指令。

path指令:

  • M = moveto(M 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():关闭路径

当然上面的指令也可以换成小写,作用一样,只是参考坐标不一样,大写表示参考绝对坐标,小写表示参考相对坐标,也就是父容器坐标。你不需要特别去学习如何通过SVG语法去编写图像,只需要能看懂就好了,毕竟,我们背后有伟大的设计师。

四、Vector的使用

1. 在Android studio上使用

打开 File->New->Vector Asset

打开之后会看到一个编辑 Vector 的界面

在这里你可以选择两种方式来生成 Vector 图像,一种Android studio自带的 Material 风格的 Iocon ,一种是使用本地的SVG。

至于本地的SVG如何来,这里有两种方法

  • 大部分设计工具都支持导出的格式为svg,切图的时候,生成SVG图像对UI设计师是很简单的事情。
  • 使用SVG的编辑器来进行SVG编写。推荐在线网站 http://editor.method.ac/ 。编辑界面如下图

完成编辑之后就会生成一个xml文件,你可以在Android studio 上进行预览跟编辑。

2.在布局文件使用

生成了 Vector 图像之后,我们就可以开始在布局文件使用了,使用方式跟普通的 drawable 一样。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.jia.dagger.MainActivity"
    tools:showIn="@layout/activity_main">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_accessory" />
</android.support.constraint.ConstraintLayout>

Vector 优势在这里就可以显示出来了,无论你 ImageView 多大 ,图片没有丝毫模糊的迹象。

五.总结

Vctor的出现对开发者来说的确是很让人兴奋的事情,它也是很有潜力去取代普通位图,毕竟这在前端已经得到很好的验证,但是目前来说,Vector 在 Android 低版本上还不能广泛使用,虽然 Google 出了兼容库,但是还是有性能问题的隐患,所以还是需要点时间去观望。

本文分享自微信公众号 - Android机动车(JsAndroidClub),作者:贾帅

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-02-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何动态更换App图标

    在Android开发中,通常会有这样的需求,逢年过节UI的小伙伴们都会做出节日或活动相关的APP图标让我们更换,可是每次更换都要发版实现。那么,如何在不发版的情...

    蜻蜓队长
  • Material Design整理(六)——SearchView及FlexboxLayout

    蜻蜓队长
  • Material Design 在 Android 中的应用

    我刚来这个公司的时候,每个周三都会有分享会,主题自定,分享对象尽量是面向大众,一开始觉得不错,但是到后面发现分享的内容不是那么有营养,而且积极性不是很高,都是当...

    蜻蜓队长
  • android 模拟器安装二三事

    今天在测试一个手机版网站时,发现“微软的wp7”跟“苹果的iOS”对于<select>..</select>元素的触摸操作不太一样,wp7是全屏切换到一个上下滚...

    菩提树下的杨过
  • toggbutton

    2013年8月14日Android记录 很多应用都会有用户设置,用户的一些偏好可以由用户来决定那是应用人性化的体现,在实际开发中很多情况都作成可配置的了,本篇博...

    xiangzhihong
  • Android Vector曲折的兼容之路

    用户1907613
  • 安卓开发小效果--走马灯

    听着music睡
  • 4.PopupWindow

    六月的雨
  • ActionBar开启Overlay Mode(覆盖模式)

    用户1737026
  • Android Listener侦听的N种写法

    Android中,View的Listener方法,在是否使用匿名类匿名对象时,有各种不同的写法。

    阳光岛主

扫码关注云+社区

领取腾讯云代金券