背景
最近在优化项目中的界面显示,达到用户体验更好的效果。将一些控件的显示按照 Material Design 的设计风格来做实现。在实现的过程中,我的某个控件在引用自定义drawable的时候用到了这个LayerDrawable。
LayerDrawable 介绍
LayerDrawable 对应的XML标签是<layer-list>
,它表示一种层次化的 Drawable 集合,通过将不同的 Drawable 放置在不同的层上面从而达到一种叠加后的效果。
LayerDrawable 创建以及语法使用
下面简单的说一下创建及使用。首先在res目录下的drawable目录下面,右键 New,然后选择Drawable resource file 项,弹出的选项界面中输入 File name 和 Root element ,分别表示创建的文件名和根元素,这里的话根元素就用layer-list
。图示如下:
它的语法如下,给出我项目中用到的一个写法:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<!-- 实心 -->
<solid android:color="@android:color/black"/>
</shape>
</item>
<!--模拟背景的padding的size 6dp-->
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp"
>
<!--原来的需求区域-->
<shape>
<!-- 实心 -->
<solid android:color="@android:color/holo_red_dark"/>
<!-- 边框 -->
<stroke
android:width="2dp"
android:color="@android:color/holo_green_dark" />
<!-- 圆角 -->
<corners android:radius="2dp"/>
</shape>
</item>
</layer-list>
具体的效果显示图如下:
一个 layer-list
中可以包含多个item,每个item表示一个Drawable。Item的结构也比较简单,比较常用的属性有android:top
、android:right
、android:left
、android:bottom
,他们分别表示Drawable相对于View的上下左右的偏移量,单位为像素。
-
另外我们也可以通过
android:drawable
属性来直接引用一个已有的 Drawable 资源,也可以在 item
中自定义Drawable。默认情况下,layer-list 中所有的 Drawable 都会被缩放至 View 的大小,对于 bitmap
来说,需要使用android:gravity
属性才能控制图片的显示效果。
-
Layer-list 有层次的概念,这里我们从上面的效果图示就能看出来了,下面的 item 会覆盖上面的
item,通过合理的分层,可以实现一些特殊的叠加效果。
- 最后给一张我demo中的编辑框控件引用该drawable资源文件后的效果图示,如下:
总结
LayerDrawable的用法总体来说都是非常的简单的,上面给大家详细的介绍了基本的使用,包括从创建到语法实现。其实只要理解了LayerDrawable这个概念,知道这是做什么用的,在使用起来就会非常清晰明了。
A little bit of progress every day!Come on!