前言
做了很多项目,发现每个项目里都有大量的相似图标,比如每个颜色一种、每个角度一种(左箭头、右箭头)等等,虽然这些图标很小占用不了太多资源。但是当我们需要change的时候就得一个个去替换,其实在android里有很多小技巧可以让这些资源进行复用,减少体积的同时也可以使项目结构更加清晰。
这里总结的一些比较常用的复用,包扩:自适应、变色、旋转、阴影、组合、透明度、剪裁、留白等
svg矢量图
android5.0之后android就开始支持svg矢量图了,是drawable的vector标签。
使用矢量图的好处是不用在为不同的分辨率提供不同的切图了,而且能保证显示清晰度。
在android studio中,右击drawable目录,选择new - Vector Asset,可以创建一个系统自带svg矢量图,或者通过svg、psd文件导入。
下面是一个示例额:
代码语言:javascript复制<vector android:height="24dp" android:tint="#FFFFFF"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M20.5,3l-0.16,0.03L15,5.1 9,3 3.36,4.9c-0.21,0.07 -0.36,0.25 -0.36,0.48V20.5c0,0.28 0.22,0.5 0.5,0.5l0.16,-0.03L9,18.9l6,2.1 5.64,-1.9c0.21,-0.07 0.36,-0.25 0.36,-0.48V3.5c0,-0.28 -0.22,-0.5 -0.5,-0.5zM15,19l-6,-2.11V5l6,2.11V19z"/>
</vector>
包括图片的宽高和颜色,最重要的就是path,这里面就是svg图片绘制的路径,如果懂相关语法的甚至可以自己手写一个出来。
变色
变色就是着色,在android5.0版本google出了着色器tint,可以非常方便的对图片进行着色。
(android5.0还对应的加入了取色器Palette,可以动态的在bitmap上取色并设置给其他组件,达到页面随着图片变色的效果)
比如
代码语言:javascript复制<ImageView
...
android:src="@mipmap/ic_launcher"
android:tint="#FFF" />
这样可以将图片变成白色的。
但是有时候我们需要在其他xml resource中使用,比如style中使用drawable,比如想使用一个黑色的箭头,但是我们只有白色的箭头,这时候就没有tint这个属性了,那么怎么办?
我们可以使用bitmap标签,在drawable下新建一个资源xml,如下:
代码语言:javascript复制<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/white_arrow"
android:tint="#000000">
</bitmap>
然后使用这个drawable即可,但是注意这里无法使用svg矢量图,即VectorDrawable。
旋转
比如有一个左箭头,我们还需要右箭头。
一个方法是在view中设置android:rotation属性
代码语言:javascript复制<ImageView
...
android:src="@mipmap/ic_launcher"
android:rotation="90" />
同样我们需要在其他xml resource中使用,可以使用rotate标签,在drawable下新建一个资源xml,如下:
代码语言:javascript复制<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:toDegrees="90"
android:drawable="@drawable/fit">
</rotate>
这里可以使用svg矢量图
阴影
有时候我们有一张图片,但在不同场景使用的时候可能需要阴影,也可能不需要,甚至阴影的大小可能也不一样。
在android5.0以上我们可以直接为view设置elevation即可,如:
代码语言:javascript复制<ImageView
...
android:elevation="3dp"
android:src="@drawable/fit"/>
这是google新增的层的概念,即z轴,设置elevation可以提升组件的高度,就会自动添加阴影。
组合
有时候我们有的资源是几个其他资源组合而成的,其实这时候我们没必要再重新切一个组合后的图。
使用layer-list即可,通过设置位置,并且通过上面所说的旋转等方法可以实现各种组合情况。
比如示例中:
代码语言:javascript复制<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="12dp"
android:height="12dp">
<shape android:shape="oval">
<solid android:color="#009bfa" />
</shape>
</item>
<item
android:width="6dp"
android:height="6dp"
android:gravity="center">
<shape android:shape="oval">
<solid android:color="#ffffff" />
</shape>
</item>
</layer-list>
我们通过两个shape来实现一个类似靶子的效果。
透明度
也是使用bitmap标签即可,通过android:alpha
熟悉设置透明度。
裁剪
通过drawable的clip标签即可,注意这里裁剪后还保持原图片大小,只不过裁剪后的内容占据其中一部分
留白
通过drawable的inset标签,可以对资源的各个方向添加留白,达到类似padding的效果。示例如下:
代码语言:javascript复制<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/voice_icon_32x30"
android:inset="4dp">
</inset>