矢量图 – SVG
SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。
矢量图像用点和线来描述物体,所以文件会比较小,同时也能提供高清晰的画面。而位图图像的存储单位是图像上每一点的像素值,因此一般的图像文件都很大,会占用大量的网络带宽。
除此之外,对于矢量图像,用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等,且不论缩放到多少倍,SVG图像在屏幕上总是边缘清晰,它的清晰度适合任何屏幕分辨率和打印分辨率。
Android中对于矢量图片的支持:
http://developer.android.com/intl/zh-cn/training/material/animations.html#AnimVector
矢量图绘制网站:
http://editor.method.ac/
svg转换工具(.svg转换为Android中的xml文件):
http://inloop.github.io/svg2android/
向下兼容:
https://github.com/japgolly/svg-android
Android中的矢量图xml范例:
注意:
path 使用的画布的大小需要和 vector 中的 viewportWidth、viewportHeight 属性匹配。
至于一个形状的 path 的值应该是多少,这个不需要我们关心,UI设计师设计出图的时候,会知道这些值的。
vector 标签下有android:width和android:height属性,这两个属性是必填的,定义矢量图形的绝对大小,虽然说是矢量图形随意缩放,但是不能说这里不定义宽高,直接到目标控件上定义控件的宽高,这样是不允许的,一定要设置这个绝对宽高,要不然会报错。
波纹动画
http://developer.android.com/intl/zh-cn/reference/android/graphics/drawable/RippleDrawable.html
当用户与用户界面进行交互时,Material Design中的触摸反馈在触摸点上提供了一种瞬时视觉确认。按钮的默认触摸反馈动画使用涟漪(波纹)效应在不同状态间转换。
要更改默认的触摸反馈颜色,需要自定义主题的android:colorControlHighlight属性。
在布局XML中直接使用
使用了Material Design相关主题的控件,本身在点击的时候就自带这种涟漪动画。如果希望自己来指定动画,可以通过修改控件的background属性来实现。Android 5.0提供了2种视图背景:
有界波纹 : ?android:attr/selectableItemBackground
无界波纹 : ?android:attr/selectableItemBackgroundBorderless