Android 动态实现圆角背景和图标换色小技巧

前言

不知道你们有没有遇到这样一种场景:

设计师:“首页这个按钮圆角度数为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的体积,又便于统一管理和替换,因此可根据实际需要可采用动态方式和静态方式相结合。(此处只是举例最简单的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~ 如有不足之处或建议还望指正,相互进步,如果觉得不错动动小手给个喜欢, 谢谢~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,351评论 0 17
  • 概述 今天我们来探究一下android的样式。其实,几乎所有的控件都可以使用 background属性去引用自定义...
    CokeNello阅读 4,806评论 1 19
  • 很早看过这篇文章,并做了笔记,后来看到群里的小伙伴有问相关Drawable的问题,就把这篇翻译过来的文章给放出来了...
    Kotyo阅读 1,415评论 0 5
  • 一、前言 在 Android 的开发过程中,Drawable 经常会被用到,一般会用 Drawable 为 Vie...
    承香墨影阅读 889评论 1 16
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62