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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逍遥剑客的游戏开发

Introduction to RenderMonkey

28710
来自专栏流媒体人生

mpg文件切片之后,不能播放问题分析

对于大部分mpg文件切片都能正常播放,而少部分mpg切片之后只有第一个切片能播放,后续的切片视频播放均失败,只能播放视频。

982
来自专栏偏前端工程师的驿站

动手写个数字输入框1:input[type=number]的遗憾

前言  最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方。本系列打算分4篇来叙述这段可歌可泣的踩坑经历: 《动手写个数字输...

2705
来自专栏木头编程 - moTzxx

PHP 自定义图片的生成与保存实例讲解

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

2913
来自专栏Google Dart

Flutter中构建布局 顶

然后本指南回过头来解释Flutter的布局方法,并说明如何在屏幕上放置一个小部件。 在讨论如何水平和垂直放置小部件之后,会介绍一些最常见的布局小部件。

5711
来自专栏葬爱家族

Android高级动画(3)

上一篇文章我们讲了Android中的矢量动画,虽然文中展示的Demo并不多,但是相信大家还是体会到了矢量动画的强大。这里再做一个温故总结:

1641
来自专栏向治洪

Android硬件加速介绍与实现

概述 在手机客户端尤其是Android应用的开发过程中,我们经常会接触到“硬件加速”这个词。由于操作系统对底层软硬件封装非常完善,上层软件开发者往往对硬件加速的...

3358
来自专栏腾讯Bugly的专栏

Android自绘动画实现与优化实战——以Tencent OS录音机波形动画为实例

前言 我们所熟知的,Android 的图形绘制主要是基于 View 这个类实现。 每个 View 的绘制都需要经过 onMeasure、onLayout、onD...

4204
来自专栏AndroidTv

属性动画 ValueAnimator 运行原理全解析

好,废话不多说,之前我们已经分析过 View 动画 Animation 运行原理解析,那么这次就来学习下属性动画的运行原理。

4288
来自专栏美团技术团队

Android硬件加速原理与实现简介

在手机客户端尤其是Android应用的开发过程中,我们经常会接触到“硬件加速”这个词。由于操作系统对底层软硬件封装非常完善,上层软件开发者往往对硬件加速的底层原...

4455

扫码关注云+社区

领取腾讯云代金券