这些 Drawable 的小技巧,你都了解吗?
一、前言
在 Android 的开发过程中,Drawable 经常会被用到,一般会用 Drawable 为 View 设置一个显示的效果。而在 Android 下,也提供了很多 Drawable 的默认实现,它们涉及到的内容非常的多,从属性到方法,但是日常生活中,会用到的只有那么些方式。
本文就在工作中,Drawable 的常用方式,整理出一篇文章,会携带一些场景,如有缺漏的,可以在文末留言,本文采用精益编写,如有必要,会一直长期更新。
二、什么是 Drawabe
Drawable 实际上是一个抽象类,主要用于将一个可绘制的资源,按要求绘制成图形,显示在屏幕之上。
Android 为了让开发者更方便的使用 Drawable ,提供了很多 Drawable 的实现类,并提供对应的 xml 的属性配置。
例如:
同时它也可以使用代码的方式实现,它们的效果是一样的。
实际上,不管是使用 xml 资源的方式,还是直接在逻辑中硬编码的方式,它们最终显示的效果都是一样的,如下图,一个蓝色的方块:
Android 中,为我们提供了非常多默认的 Drawable,正常来说,一般是足够我们使用的,它们的关系如下图:
基本上,从 XxxDrawable 这种类名,就可以看出来它对应的 Xml 资源的命名,唯一需要注意的是
三、Drawable 的常用实现
3.1 圆角的按钮
有些 App 中,按钮的圆角,如果背景只是一个纯色或者是简单的规则渐变,是可以使用
如果想要为其增加一个圆角,可以在
实现的效果如下:
3.2 带边框的圆角按钮
想在圆角的
stroke 用于设置边框,可以指定颜色和边框的宽度。
可以看到这里指定了一个黄色的边框,效果如下图:
3.3 单边边框
在
这个时候,就可以使用
这样的一个 Drawable,如果作为背景的话,显示效果就是在白色背景下,有一条 1px 的灰线。当然其他方向可以参考这个方案,截图发现 1px 的线不太明显,这里就不放图了。
3.4 渐变的背景色
例如一些视频 App 的 UI 设计,会将视频名称直接布局在视频海报上,就可以使用线性渐变的
例如一般的视频App :
看到其实海报下面的文字,底部是有一个渐变的背景色的。
这种渐变的效果,可以使用 gradient
标签来设置。
gradient
支持的属性,基本上看名称就可以知道意思,唯一需要注意的是 android:angle
这个属性,用于设定渐变的角度,但是它不是任何值都支持的,只支持 45 的倍数。
效果如下图:
3.5 海报的默认图
通常在图片加载的过程中,会为其定义一个默认图片。一般的设计都是会将这个默认图做的非常的简洁,例如中间一个 App 主题的 Icon,然后其它地方纯色铺平。
类似下面这种效果:
这种默认的图片,当然你可以使用一张等大的图,但是这样不利于适配,不同的 UI 设计尺寸,你需要提供不同的图片。当然你也可以使用 9patch 的图片,但是你会发现有些 density 为 2.75 这种奇葩的手机下,图标会微微偏移,不在正中间。所以这里可以使用一个
所以这样的场景下,我们就需要一个纯色的背景加一张小图,即可实现默认图的效果。
下面是 xml 的实现代码:
下面是运行后的效果图:
3.6 带按下效果的按钮
对一个按钮,设计一个按下的效果。可以使用
这些不同的状态,在 xml 里,都是以 android:state_Xxx 开头来定义的,将其设置为 true 即可生效。
Android 为我们提供了非常多的状态,比较常用的有:
- state_pressed:按下的效果。
- state_checkable:是否可设置 checked 状态的效果。
- state_selected:支持 selected 并且当前处于 selected 的效果。
- state_checked:支持 checkeable 并且当前处于 checked 的效果。
接下来让我们看一个实际的按钮例子,这里只为其设置按下的效果,xml 代码如下:
实现效果如下:
3.7 一个带按下效果的圆角按钮
这个没啥好说的,结合上面的效果就可以做到。你可以选择将它们写在不同的 Drawable 中,也可以在一个 xml 文件中,使用不同 item 来完成。Item 标签是可以支持内部再嵌套一个 Drawable 的。
3.8 带按下动画
按下效果除了使用
具体细节可以看看我之前的一篇文章:《利用 StateListAnimator 为你的点击加个动画吧!》
StateListAnimtor 使用起来非常的简单:
- 在 res 中创建一个 animator 目录。
- 在其中创建一个 xml 资源文件,就是一个
- 在 xml 资源中使用
- 最终将定义好的 animtor 通过 View 的
setStateListAnimator()
方法或者android:stateListAnimator
属性,设置到 View 上。
举个例子。
首先在 /res/animtor 目录下,创建一个 btn_press_animator.xml
文件。
可以看到,和 StateListDrawable 一样,它也是通过 android:state_xxx
属性来定义不同的 Animator 的,如果存在多个 Animator ,可以使用
然后,定义一个 View,为其设置属性 android:stateListAnimator="@animator/btn_press_animator"
。
来看看运行的效果:
3.9 三角形的 Drawable
假如有类似气泡提示的效果,如下图。
这样的效果,除了使用 9patch 来实现之外,还可以拿两个 Drawable 来拼接实现,这就需要一个圆角的矩形和一个三角的 Drawable。
三角 Drawable 的实现思路很清奇,是使用一个矩形的 shape ,通过使用 rotate 实现的旋转,来达到尖角的效果。
这个例子,就是上图的实现效果,是一个黄色的倒三角。如果想要的是一个正三角,只需要改变旋转的角度就可以了。
3.10 Tint 着色的 Drawable
在 Drawable 中,如果使用的是 BitmapDrawable 或者 NinePatchDrawable(9patch) 的资源的话,可以使用 android:tint 属性为其着色。
默认情况下,待着色的图片资源,会将其所有有颜色地方,都着色成我们指定的颜色,但是会保留透明度。
效果图如下,上面是原图,下面是使用 tint 之后的效果:
前面这里给的是 tint 默认的效果,还可以通过 android:tintMode 指定成不同的着色效果,例如下面将 android:tintMode 指定成 screen 之后,效果就完全不一样了。
3.11 铺平的 Drawable
有时候,作为一些有规则的图片的背景,可以使用一张很小的图片,然后设定 android:tileMode 属性,为其设定一个平铺的效果。
tileMode 可以指定多个属性值,用于指定不同的效果,以下就是两个比较常用的,上图使用的是 repeat ,下图使用的是 mirror。
3.12 状态可控的层级 Drawable
如果想要一个 ImageView 上,根据不同的条件显示不同的 Drawable ,可以使用
今天举一个例子,给某个图标加红点的逻辑。当然我们也可以使用通过一个 FrameLayout 来实现,但是今天我们试试用
这里使用一个
最终我们可以通过 ImageView 的 setImageLevel()
方法来控制显示的内容。
四、结语
到这里基本上涵盖了 Drawable 大部分的使用场景,在实际例子中学东西是印象最深刻的。当然,Drawable 的使用不止这些,还有一些例如拿 ClipDrawable 来实现一个切割进度的效果之类的,这种还需要写逻辑代码,就不在本文的范围内了,本文主要介绍一些静态能实现的效果。
你只需要掌握最基本的规则,什么 Drawable 能实现什么效果,具体碰到实际需求的时候,再来细致的研究,基本上微调一下就可以使用。
如果你还又什么更有意思的 Drawable 使用技巧,欢迎在文末留言,我们一起讨论一下,如有需要,会持续更新。
今天在承香墨影公众号的后台,回复『成长』。我会送你一些我整理的学习资料,包含:Android反编译、算法、设计模式、虚拟机、Linux、Kotlin、Python、爬虫、Web项目源码。
推荐阅读:
- 认真聊聊阴影那些事儿
- 利用 StateListAnimator 为你的点击加个动画吧!
- 好的代码可以自己说话
- 关于如何编写 Clean Code 的 6 个简单技巧
- 手写你的第一个 Dalvik 版的 HelloWorld !
这些 Drawable 的小技巧,你都了解吗?的更多相关文章
- 30段极简Python代码:这些小技巧你都Get了么
学 Python 怎样才最快,当然是实战各种小项目,只有自己去想与写,才记得住规则.本文是 30 个极简任务,初学者可以尝试着自己实现:本文同样也是 30 段代码,Python 开发者也可以看看是不是 ...
- RS开发中的一些小技巧[不定期更新]
从9月份一直忙到了现在,项目整体的改版工作也完成了十有八九了,有些事情只有你自己真正的做了,你才能明白:哦,原来还可以这个样子,这样做真的好了很多呢,接下来我就分享一些最近遇到的RS开发的一些小技巧, ...
- Java程序员阅读源码的小技巧,原来大牛都是这样读的,赶紧看看!
今天介跟大家分享一下我平时阅读源码的几个小技巧,对于阅读java中间件如Spring.Dubbo等框架源码的同学有一定帮助. 本文基于Eclipse IDE,我们每天都使用的IDE其实提供了很多强大的 ...
- Android简易实战教程--第二十二话《自定义组合控件模拟qq登录下拉框和其中的一些”小技巧”》
转载此文章请注明出处:点击打开链接 http://blog.csdn.net/qq_32059827/article/details/52313516 首先,很荣幸此专栏能被CSDN推荐到主页.荣 ...
- Android——Android Studio的一些小技巧(转)
ndroid课程---Android Studio的一些小技巧 APK瘦身 在Android Studio中我们可以开启混淆,和自动删除没有Resources文件,来达到给APP瘦身的目的,这对于 ...
- Android小技巧
一.android:clipChildren属性 效果图 看到这个图时你可以先想想如果是你,你怎么实现这个效果.马上想到用RelativeLayout?NO,NO,NO,,, 实现代码 <?xm ...
- Android Snackbar使用方法及小技巧-design
Snackbar和Toast相似,都是为了给用户提供交互信息,Snackbar是固定在底部的,显示时从下往上滑出 要使用Snackbar,需要在项目的build.gradle中添加依赖 depende ...
- 前端网络、JavaScript优化以及开发小技巧
一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...
- Git小技巧 - 指令别名及使用Beyond Compare作为差异比较工具
前言 本文主要写给使用命令行来操作Git的用户,用于提高Git使用的效率.至于使用命令还是GUI(Tortoise Git或VS的Git插件)就不在此讨论了,大家根据自己的的喜好选择就好.我个人是比较 ...
随机推荐
- js 判断当前是什么浏览器
function getExplorer() { var explorer = window.navigator.userAgent; //ie if (explorer.indexOf(" ...
- 通过 ODBC 访问数据库获取数据集
Step1:(window 中完成): 控制面板/管理工具/ODBC 数据源/用户 Step2:(window 中完成): 添加/SQL Server Step3:(window 中完成): 自己定义 ...
- panic: interface conversion: interface {} is nil, not chan *sarama.ProducerError
使用golang kafka sarama 包时,遇到如下问题: 高并发情况下使用同步sync producer,偶尔遇到crash: panic: interface conversion: int ...
- HDU 6055 Regular polygon
Regular polygon Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)T ...
- You can Solve a Geometry Problem too(判断两线段是否相交)
You can Solve a Geometry Problem too Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/3 ...
- Eclipse 枚举类报错
当你写一个枚举类时,如果没有在枚举类的第一行写有哪些枚举值,那么就会出现编译报错:Syntax error on token "String", strictfp expected ...
- counter 计数器
包含了两个属性和一个方法: 1. counter-reset 2. counter-increment 3. counter()/counters() counter-reset(主要作用就是给计 ...
- javascript 中parseInt 的用法
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- java实现网络爬虫
import java.io.IOException; import java.util.HashSet; import java.util.Set; import java.util.r ...
- [转载] Netty教程
转载自http://blog.csdn.net/kobejayandy/article/details/11493717 先啰嗦两句,如果你还不知道Netty是做什么的能做什么.那可以先简单的搜索了解 ...