前言
不知道你们有没有遇到这样一种场景:
设计师:“首页这个按钮圆角度数为5个像素”
你:“OK”,言语间你已经在drawable目录下创建了一个xml文件,定义了圆角的shape,然后给Imageview设置上:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#f1de11"/>
<corners android:radius="5px"/>
</shape>
过了5分钟……
设计师:顶部的Tab选中时的背景也给它红色圆角8像素吧
你:“可以”。反正举手之劳,再建个xml就好了”
过了一会儿ui复审…
设计师:“新消息提醒改成小圆形吧”
你内心:Orz…再这么建下去…
开个玩笑,不过确实很多时候我们的项目中会存在很多圆角背景的ui,而且一般都还每个地方的圆角度数都略有差别,这种时候是不是内心有一种特别想动态更改xml的属性的冲动(不然每个都对应一个文件到时候岂不是一堆),既然xml不可以,何不试一下代码上动态生成呢?
动态实现圆角背景
我们都知道ImageView可以设置Drawable,如果我们动态生成一个圆角的Drawable岂不美哉,恰好Android中有这么一个类GradientDrawable,它继承于Drawable,提供了各种shape标签的属性设置接口,转换成对应形态的Drawable对象。因此我们可以定义这么一个方法,只需传入圆角度数、颜色和边缘宽度,以及是否填充,即可得到一个等同于xml效果的Drawable资源对象:
public static GradientDrawable getRoundRectDrawable(int radius, int color, boolean isFill, int strokeWidth){
//左上、右上、右下、左下的圆角半径
float[] radius = {radius, radius, radius, radius, radius, radius, radius, radius};
GradientDrawable drawable = new GradientDrawable();
drawable.setCornerRadii(radius);
drawable.setColor(isFill ? color : Color.TRANSPARENT);
drawable.setStroke(isFill ? 0 : strokeWidth, color);
return drawable;
}
使用:
ImageView imageView = findViewById(R.id.image_view);
imageView.setBackground(ShapeUtils.getRoundRectDrawable(40, Color.parseColor("#5bc0de"), true, 10));
效果如图:
动态生成圆角图
就再也不用因为某个小属性的差别而新建那么多的xml文件,减少了apk的体积,但是另一方面,毕竟是动态生成的Drawable,所以性能上会略有影响,因此要根据实际需要可采用动态方式和静态方式相结合。(此处只是举例最简单的shape例子,其它属性设置可参见API或文末Github地址)
动态图标换色
另外一种场景,就是很多app都会有底部tab用于切换主功能,当前选中的那个tab的图标肯定和其他未被选中的tab的图标不一样,有些是做了一些动画效果并且对图标细节进行了一定调整,另外一些是图标无论是否被选中,都是那样的形状,只是单纯换了个颜色,这种情况我们一般会让ui再另外切一套着色了的图标,然后代码中动态切换图标,达到切换tab的效果。但这种方式同样存在一个问题,两套一摸一样的图标,只是颜色不一样,这样会不会有点占用apk体积,是否可以通过动态给Icon涂上颜色呢?
答案是可以的,同样是通过Drawable来操作,图标本身可以通过getDrawable转换为Drawable对象,然后再通过DrawCompat来进行重新着色:
/**
* 将drawable颜色着色为color
* @param drawable
* @param color
* @return 重绘后的Drawable
*/
public static Drawable drawColor(Drawable drawable, int color) {
final Drawable wrappedDrawable = DrawableCompat.wrap(drawable);
wrappedDrawable.mutate();
DrawableCompat.setTint(wrappedDrawable, color);
return wrappedDrawable;
}
首先DrawableCompat.wrap
是将drawable转换为可着色的Drawable对象,然后调用mutate
是表示只对当前这个对象进行着色,假如不调用这句,到时候一着完色,以后再getDrawable获取这个对象的时候,就都变成着色后的了(即拿不到之前原来的那个Drawable了),然后setTint
就是将我们想要重绘的颜色绘制上去了,最后将新的Drawable返回,同样设置给ImageView,就可以变成另外一个颜色的Icon了。
弄了个简单的动画,不断对icon进行染色:
final ImageView imageView = findViewById(R.id.image_view);
ValueAnimator animator = ValueAnimator.ofArgb(Color.parseColor("#3F51B5"),Color.parseColor("#FF4081"));
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int color = (int)animation.getAnimatedValue();
imageView.setBackground(ShapeUtils.drawColor(getResources().getDrawable(R.drawable.ic_android), color));
}
});
效果如图:
图标染色
总结
这两种方式有时候在特别多重复但却有略微差别的ui场景中可以派上用场,另外还可以用来统一控制某些图标的颜色或者多个圆角的控制,都是以时间换空间的方式,结合实际情况进行运用。
这里只是列举了几个shape的常用属性,它还有其他很多属性可以动态设置,把它们封装成了一个工具类,代码已传到 GitHub-ZJYWidget 。里面有很多实用的自定义View源码及demo,会长期维护,欢迎Star~ 如有不足之处或建议还望指正,相互进步,如果觉得不错动动小手给个喜欢, 谢谢~
网友评论