StateBackgroundUtil - 仅使用一张资源图片为View设置具有按下效果的背景-阿里云开发者社区

开发者社区> 玄学酱> 正文

StateBackgroundUtil - 仅使用一张资源图片为View设置具有按下效果的背景

简介:
+关注继续查看

StateBackgroundUtil - 仅使用一张资源图片为View设置具有按下效果的背景

该篇文章主要介绍,如何使用一张资源图片为 View 设置具有按下效果的 background drawable. 

缘起

前段时间在开发项目新版本的过程中,设计师出了一套项目的按下效果规范。规范大概是这样的。

对于一般的按钮,按钮按下的效果只有两种不同的实现。

1、按下后将前置背景图片变暗,具体就是在正常状态的 drawable 上面增加一层 20% 的黑色遮罩。

2、按下后降低前置背景资源透明度,具体就是在按下时改变正常状态的 drawable 透明度为原来的 70% 。

很明显,这套规范会带来以下好处。

  • 设计师在出图时只需要出一张图,然后只需要告诉开发人员对应的按下效果策略,这样可以减轻设计师的出图负担。
  • 客户端这边也是,不需要因为实现一个按下效果而导入两张资源图片,这样在减小包大小的同时也省去了客户端开发人员去写 selector 文件的麻烦。

实现方案

其实在之前的开发过程中,我也曾有过这样的思考,想怎么可以根据一张图来设置 View 的背景,并让他具有按下效果。一开始自然而然的想到了处理 View 的 touch 事件,然后在按下时动态的根据正常背景设置按下后的背景资源。

但是后来觉得还是麻烦,而且一些时候一些 View 本身就需要处理 touch 事件,会造成冲突,所以当时也就一了百了。

这次经过一些搜索,思考,最终使用 StateListDrawable 达到了了目标效果。

StateListDrawable 有一个方法 addState 用于设置不同状态下的 drawable ,包括按下、聚焦、不可用等等所有的状态。

所以结合需求,这里只需要根据正常状态下的 drawable 计算出按下状态的 drawable,然后设置给按下按下状态,就可以完美实现一套资源实现 View 的按下状态。

具体实现

方案已经说清楚了,实现其实很简单,代码如下所示。


  1. private static Drawable getBackground(@NonNull Context context, @DrawableRes int res, @StatePressedMode.Mode int mode, @FloatRange(from = 0.0f, to = 1.0f) float alpha) { 
  2.     Drawable normal = context.getResources().getDrawable(res); 
  3.     Drawable pressed = context.getResources().getDrawable(res); 
  4.     pressed.mutate();    //根据不同的按下要求设置不同的按下drawable 
  5.     setPressedStateDrawable(mode, alpha, pressed);    final StateListDrawable stateListDrawable = new StateListDrawable();    //按下状态 
  6.     stateListDrawable.addState(new int[]{android.R.attr.state_pressed}, pressed);    //正常状态 
  7.     stateListDrawable.addState(new int[]{}, normal);    return stateListDrawable; 
  8.  

根据不同按下模式,处理按下的 drawable


  1. private static void setPressedStateDrawable(@StatePressedMode.Mode int mode, @FloatRange(from = 0.0f, to = 1.0f) float alpha, @NonNull Drawable pressed) {    switch (mode) {        case StatePressedMode.ALPHA: 
  2.             pressed.setAlpha(convertAlphaToInt(alpha));            break;        case StatePressedMode.DARK: 
  3.             pressed.setColorFilter(alphaColor(Color.BLACK, convertAlphaToInt(alpha)), PorterDuff.Mode.SRC_ATOP);            break;        default
  4.             pressed.setAlpha(convertAlphaToInt(alpha)); 
  5.     } 

目前该方案的实现已经放在了 GitHub, StateBackgroundUtil ,欢迎观摩支持。

一些细节

在设置按下状态的 drawable 时,


  1. Drawable normal = context.getResources().getDrawable(res);
  2. Drawable pressed = context.getResources().getDrawable(res);  

这里的 normal 和 pressed 使用的资源 res 资源是同一个 id。但是由于 drawable 在加载过程中,同一个 res 资源只要在内存中加载过一次,这个 drawable 对应的 state 就会保持一致,所以这里要对 pressed 进行可变设置。


  1. pressed.mutate(); 

关于 mutate 方法的官方说明

This is especially useful when you need to modify properties of drawables loaded from resources. By default, all drawables instances loaded from the same resource share a common state;

注意:由于 View 的按下效果只有在设置了 clickable 为 true 时才可以看到效果,所以当你使用 StateBackgroundUtil 为 View 设置背景后却发现没有按下效果,你应该知道怎么办。

不足

  • 目前不支持不可点击状态
  • 不支持颜色背景(当然你可以通过 shape 曲线救国)

最后,如果你发现还有什么问题,欢迎在 issue 或者评论区指出,也欢迎你把更好的方案 PR 上来。





本文作者:佚名
来源:51CTO

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
2.CCGridAction(3D效果),3D反转特效,凸透镜特效,液体特效,3D翻页特效,水波纹特效,3D晃动的特效,扭曲旋转特效,波动特效,3D波动特效
 1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(ccp(winSize.width/2,winSize.height/2)); addChild(spr);   //GridAction
1372 0
js设置随机切换背景图片
var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg", "http://images.
771 0
使用阿里云容器服务 ACK 和文件存储 NAS 构建现代化企业应用
大规模构建容器化应用程序需要高可靠、弹性、共享且支持高性能数据处理的数据存储解决方案。通过迁移到公共云,企业可以获得更高的生产效率和更低的成本。阿里云文件存储可以为现代化应用提供强健的数据稳定性,可靠性,高性能和在线扩展能力。
1317 0
[Android]使用自定义JUnit Rules、annotations和Resources进行单元测试(翻译)
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5795091.html 使用自定义JUnit Rules、annotations和Resources进行单元测试 原文:http://www.thedroidsonroids.com/blog/android/unit-tests-rules-annotations-resources 简介 Unit Test并不只有断言和测试方法组成。
861 0
css 设置背景图片铺满固定不动
#page{     position: relative;     width: 100%;   height: 100%;   background-image:url(.
1089 0
+关注
玄学酱
这个时候,玄酱是不是应该说点什么...
20710
文章
438
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载