Android Drawable 与 LayerList综合汇总

2023-08-25 16:16:46

先看需求。要求这样的效果

Android Drawable 与 LayerList综合汇总

上代码

<?xml version="1.0" encoding="utf-8"?

>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >





   

    <item>

        <shape android:shape="oval" >

            <solid android:color="@android:color/transparent" />





            <stroke

                android:width="3dp"

                android:color="@android:color/white" />





            <size

                android:height="55dp"

                android:width="55dp" />





            <padding

                android:bottom="15dp"

                android:left="15dp"

                android:right="15dp"

                android:top="15dp" />

        </shape>

    </item>

    <item>

        

        

        <shape android:shape="oval" >

            <solid android:color="@android:color/holo_green_light" />





            <stroke

                android:width="3dp"

                android:color="@android:color/white" />





            <size

                android:height="40dp"

                android:width="40dp" />





            <padding

                android:bottom="15dp"

                android:left="15dp"

                android:right="15dp"

                android:top="15dp" />

        </shape>

    </item>

    

     <item>

         

                <scale    

                android:ble="@drawable/repair_iconaa"

                android:scaleWidth="50%"

                android:scaleHeight="50%"

/>

         

      

        

    </item>





</layer-list>

再来重头从学习drawable^_^

Android把可绘制的对象抽象为Drawable。不同的图形图像资源就代表着不同的drawable类型。

Android FrameWork提供了一些详细的Drawable实现，通常在代码中都不会直接接触Drawable的实现类。


        在实际的开发过程中，会把使用到的资源都放置在res/drawable文件夹，剩下的工作交给Android SDK 即可了，当须要使用图片资源的时候。能够使用@drawable标志在xml中引用drawable资源即可，也能够在代码中使用id引用这些drawable资源。

        在使用drawable资源的时。有一点须要注意。drawable默认是内存共享的。也就说在不同的地方使用了同一个drawable。它们都指向同样的资源，并且具有同样的状态，假设在一个地方改动了这个drawable，全部使用它的地方都会改变。

        Android内置了例如以下几种Drawable类型：ColorDrawable、GradientDrawable、BitmapDrawable、 NinePatchDrawable、InsetDrawable、ClipDrawable、ScaleDrawable、RotateDrawable、AnimationDrawable、LayerDrawable、LevelListDrawable、StateListDrawable、TransitionDrawable。

        除了这些预置的drawable实现类以外。也能够自己定义drawable的实现类型，大部分情况都不须要自己定义drawable类型。使用系统提供的这些drawable实现类型已经覆盖了非常多情况。

在实际的编程过程中也非常少会接触这些详细drawable实现类型，由于编写android应用程序使用xml能够非常easy的创建drawable，仅仅有在程序中须要改动drawable的属性时，才须要使用详细的drawable类型提供的方法来处理。以下就来逐个认识这些Drawable类型。

 Shape

简单介绍

作用：XML中定义的几何形状

位置：res/drawable/文件的名称.xml

使用的方法：

Java代码中：R.drawable.文件的名称

XML中：Android:background="@drawable/文件的名称"

属性：

<shape>  Android:shape=["rectangle" | "oval" | "line" | "ring"]

当中rectagle矩形，oval椭圆，line水平直线，ring环形

<shape>中子节点的经常使用属性：

<gradient>  渐变

Android:startColor  起始颜色

Android:endColor  结束颜色

Android:angle  渐变角度，0从上到下，90表示从左到右。数值为45的整数倍默觉得0。

Android:type  渐变的样式 liner线性渐变 radial环形渐变 sweep

<solid >  填充

Android:color  填充的颜色

<stroke > 描边

Android:width 描边的宽度

Android:color 描边的颜色

Android:dashWidth 表示'-'横线的宽度

Android:dashGap 表示'-'横线之间的距离

<corners > 圆角

Android:radius  圆角的半径 值越大角越圆

Android:topRightRadius  右上圆角半径

Android:bottomLeftRadius 右下圆角角半径

Android:topLeftRadius 左上圆角半径

Android:bottomRightRadius 左下圆角半径

<padding >填充

android:bottom="1.0dip" 底部填充

android:left="1.0dip" 左边填充

android:right="1.0dip" 右边填充

android:top="0.0dip" 上面填充

一、ColorDrawable

        ColorDrawable 是最简单的Drawable。它实际上是代表了单色可绘制区域，它包装了一种固定的颜色。当ColorDrawable被绘制到画布的时候会使用颜色填充Paint，在画布上绘制一块单色的区域。

        在xml文件里使用color作为根节点来创建ColorDrawable。它仅仅有一个android:color属性，通过它来决定ColorDrawable的颜色，Android并没有提供改动这个颜色值的Api。所以这个颜色一旦设置之后，就不能直接改动了。

        以下的xml文件定义了一个颜色为红色的ColorDrawable：

[代码]xml代码：

1 <?

xml version="1.0" encoding="utf-8"?>
2 <color xmlns:android="http://schemas.android.com/apk/res/android"
3  android:color="#FF0000" />
  
      当然也能够使用Java代码创建ColorDrawable，需要注意的是Android中使用一个int类型的数据表示颜色值，通常习惯使用十六进制格式的数据表示颜色值。一个int类型包括四个字节，分别代表颜色的4个组成部分：透明度（Alpha）、红（RED）、绿（GREEN）、蓝（BLUE）。每一个部分由一个字节（8个bit）表示，取值范围为0~255。在xml中使用颜色时能够省略透明度（Alpha）部分。如#ff0000表示红色。可是在代码中必需要明白指出透明度（Alpha）代表的数据，假设省略了就表示全然透明的颜色，比如0xFFFF0000表示红色，而0xFF0000尽管也表示红色，但它却是全然透明的。也就是说当绘制到画布上时。看不出有不论什么效果。

        使用Java代码也能够创建ColorDrawable。代码例如以下：

[代码]java代码：

1 ColorDrawable drawable = new ColorDrawable(0xffff0000);

二、GradientDrawable

        GradientDrawable 表示一个渐变区域。能够实现线性渐变、发散渐变和平铺渐变效果。在Android中能够使用GradientDrawable表示非常多复杂而又绚丽的界面效果。

        能够使用xml定义GradientDrawable。相对于ColorDrawable类型。GradientDrawable要复杂非常多。它有非常多的元素组成。在xml文件里使用shape作为根节点来创建GradientDrawable，它包括非常多属性和子节点，以下是GradientDrawable的xml文档节点结构。

[代码]xml代码：

1 <?xml version="1.0" encoding="utf-8"?

>
2 <shape xmlns:android="http://schemas.android.com/apk/res/android">
3     <size /> //定义区域的大小
4     <gradient>//设置区域背景的渐变效果
5         <solid/>//设置区域的背景颜色。假设设置了solid会覆盖gradient的效果
6         <stroke />//设置区域的边框效果
7         <padding />//设置区域的内边距
8 </shape>

        当中每一个节点都有很多属性须要设置，以达到不同的渐变效果。

        下面是几种不同渐变效果实现的xml文件代码：

[代码]xml代码：

01 <!-- 线性渐变效果的椭圆-->
02 <?

xml version="1.0" encoding="utf-8"?

>
03 <shape
04     xmlns:android="http://schemas.android.com/apk/res/android"
05 android:shape="oval">
06   
07     <gradient
08         android:startColor="#ff0000"
09         android:centerColor="#00ff00"
10         android:endColor="#0000ff"
11         android:angle="90" />
12     <stroke
13         android:width="3dip"
14         android:color="#fff"
15         android:dashWidth="4dip"
16         android:dashGap="5dip" />
17 </shape>
18   
19 <!-- 平铺渐变效果的圆环-->
20 <?

xml version="1.0" encoding="utf-8"?>
21 <shape xmlns:android="http://schemas.android.com/apk/res/android"
22     android:shape="ring" android:innerRadiusRatio="8"
23     android:thicknessRatio="3" android:useLevel="false">
24     <gradient android:type="sweep" android:useLevel="false"
25         android:startColor="#ff0000" android:endColor="#0000ff" android:centerColor="#00ff00"/>
26 </shape>
27   
28 <!-- 发散渐变效果的圆-->
29 <?

xml version="1.0" encoding="utf-8"?>
30 <shape xmlns:android="http://schemas.android.com/apk/res/android"
31     android:shape="ring" android:innerRadius="0dip"
32     android:thickness="70dip" android:useLevel="false">
33     <gradient android:type="radial" android:useLevel="false" android:gradientRadius="70"
34         android:startColor="#ff0000" android:endColor="#0000ff" android:centerColor="#00ff00"/>
35 </shape>

        下面几幅图展示了上述三个渐变效果：

Android Drawable 与 LayerList综合汇总

图6-1  线性渐变效果的椭圆

Android Drawable 与 LayerList综合汇总

图6-2  平铺渐变效果的圆环

Android Drawable 与 LayerList综合汇总

图6-3  发散渐变效果的圆

三、BitmapDrawable

        BitmapDrawable 是对bitmap的一种包装，能够设置它包装的bitmap在BitmapDrawable区域内的绘制方式，如平铺填充、拉伸填充或者保持图片原始大小。也能够在BitmapDrawable区域内部使用gravity指定的对齐方式。

        在xml文件里使用bitmap作为根节点来定义BitmapDrawable。

        以下的xml代码定义一个BitmapDrawable，同一时候设置了BitmapDrawable的tileMode 属性为mirror，通过这样设置会使用小图片在水平和竖直方向做镜面平铺效果。

[代码]xml代码：

1 <?xml version="1.0" encoding="utf-8"?

>
2 <bitmap xmlns:android="http://schemas.android.com/apk/res/android" 
3     android:src="@drawable/png_icon_416"
4     android:tileMode="mirror"
5     android:antialias="true"
6     android:dither="true"
7     >
8 </bitmap>

        也能够使用Java代码实现同样的效果，等价的Java代码例如以下：

[代码]java代码：

1 Bitmap mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.png_icon_416);
2 BitmapDrawable mBitmapDrawable = new BitmapDrawable(mBitmap);
3 mBitmapDrawable.setTileModeXY(TileMode.MIRROR, TileMode.MIRROR);
4 mBitmapDrawable.setAntiAlias(true);
5 mBitmapDrawable.setDither(true);
6 mDrawable = mBitmapDrawable;

        效果例如以下图所看到的：
 

Android Drawable 与 LayerList综合汇总

图6-4  BitmapDrawable执行效果图

四、NinePatchDrawable

        NinePatchDrawable，“点九图”是Andriod平台的一种特殊的图片格式，文件扩展名为：.9.png。支持Android平台的手机类型非常多，有多种不同的分辨率，非常多控件的切图文件在被放大拉伸后。边角会模糊失真。在android平台下使用“点九”图片处理技术，能够将图片横向和纵向同一时候进行拉伸，以实如今多分辨率下的完美显示效果。点九图片在拉伸时仍能保留图像的渐变质感和圆角的精细度。

        Android SDK工具集提供了处理点九图片的工具，能够通过draw9patch.bat执行，通过这个工具能够非常easy把普通的PNG图片处理成“点九”图片。

从它的名字也非常easy理解“点九”图的含义，事实上相当于把一张PNG图分成了9个部分(九宫格)，分别为4个角，4条边，以及一个中间区域，4个角是不做拉伸的。所以还能一直保持圆角的清晰状态，而2条水平边和2条垂直边分别仅仅做水平和垂直拉伸。所以不会出现边框被拉粗的情况，仅仅有中间用黑线指定的区域做拉伸，通过这样的处理方式图片才不会失真。如图6-5所看到的。对4条黑线分别做了凝视。左边和上边的黑线形成的矩形区域是图片的拉伸区域，下边和右边形成的矩形区域是内容所在的区域。黑线能够是连续的也能够是不连续的。只是为了达到最好的显示效果。最好使用连续的黑线。

 

Android Drawable 与 LayerList综合汇总

图6-5  点九图片示意图

        使用了*.9.png图片技术后，仅仅须要採用一套界面切图去适配不同的分辨率。并且大幅降低安装包的大小。Android FrameWork在显示点九图片时使用了高效的优化算法。所看到的应用程序不须要专门做处理就能够实现图片拉伸自适应，降低了代码量和实际开发的工作量。 

        在xml文件里使用使用nine-patch作为根节点创建NinePatchDrawable。同一时候，也能够使用bitmap包装点九图片，android FrameWork会依据android:src属性设置的图片类型来生成相应的drawable。

代码例如以下：


[代码]xml代码：

1 <?

xml version="1.0" encoding="utf-8"?>
2 <nine-patch
3     xmlns:android="http://schemas.android.com/apk/res/android"
4     android:src="@drawable/droid_logo"
5     android:dither="true" />

[代码]xml代码：

1 <?

xml version="1.0" encoding="utf-8"?

>
2 <bitamp
3     xmlns:android="http://schemas.android.com/apk/res/android"
4     android:src="@drawable/droid_logo"
5     android:dither="true" />

        以下看一下原始点九图片以及拉伸之后的效果：

Android Drawable 与 LayerList综合汇总

图6-6  原始点九图片

Android Drawable 与 LayerList综合汇总

图6-7  点九图片拉伸之后的效果

        最后，须要指出的是，Android尽管能够使用Java代码创建NinePatchDrawable，可是极少情况会那么做。基本的原因是因为Android SDK会在编译project时对点九图片进行编译，形成特殊格式的图片。使用代码创建NinePatchDrawable时仅仅能针对编译过的点九图片资源，对于没有编译过的点九图片资源都当做BitmapDrawable对待。在使用点九图片时须要注意的是，点九图仅仅能适用于拉伸的情况，对于压缩的情况并不适用，假设须要适配非常多分辨率的屏幕时须要把点九图做的小一点。

五、InsetDrawable

        InsetDrawable 表示一个drawable嵌入到另外一个drawable内部。而且在内部留一些间距，这一点非常像drawable的padding属性，差别在于 padding表示drawable的内容与drawable本身的边距。insetDrawable表示两个drawable和容器之间的边距。当控件须要的背景比实际的边框小的时候比較适合使用InsetDrawable。

        在xml文件里使用inset作为跟节点定义InsetDrawable。

        以下的xml定义了一个四边边距都为20dip的InsetDrawable，代码例如以下：

[代码]xml代码：

1 <?

xml version="1.0" encoding="utf-8"?>
2 <inset xmlns:android="http://schemas.android.com/apk/res/android" 
3     android:drawable="@drawable/bitmap_bell"
4     android:insetLeft="20dp"
5     android:insetRight="20dp"
6     android:insetTop="20dp"
7     android:insetBottom="20dp"
8     >
9 </inset>

        效果例如以下图所看到的：
 

Android Drawable 与 LayerList综合汇总

图6-8  InsetDrawable执行效果图

六、ClipDrawable

        ClipDrawable 是对一个Drawable进行剪切操作，能够控制这个drawable的剪切区域，以及相相对于容器的对齐方式。android中的进度条就是使用一个ClipDrawable实现效果的，它依据level的属性值，决定剪切区域的大小。

        在xml文件里使用clip作为根节点定义ClipDrawable。

        须要注意的是ClipDrawable是依据level的大小控制图片剪切操作的。官方文档的note中提到：The drawable is clipped completely and not visible when the level is 0 and fully revealed when the level is 10,000。也就是level的大小从0到10000，level为0时全然不显示，为10000时全然显示。

是用Drawable提供的setLevel（int level）方法来设置剪切区域。


        以下为定义ClipDrawable的代码：

[代码]xml代码：

1 <?

xml version="1.0" encoding="utf-8"?>
2 <clip xmlns:android="http://schemas.android.com/apk/res/android" 
3     android:clipOrientation="horizontal"
4     android:drawable="@drawable/bitmap_android"
5     android:gravity="left"
6     >
7 </clip>

        假设没有android:drawable属性。必需要设置一个随意类型的drawable作为子节点，代码例如以下：

[代码]xml代码：

01 <?xml version="1.0" encoding="utf-8"?>
02 <clip xmlns:android="http://schemas.android.com/apk/res/android" 
03     android:clipOrientation="horizontal"
04     android:gravity="left"
05     >
06     <bitmap 
07         android:src="@drawable/android_text"
08         android:gravity="center"
09         />
10 </clip>

        效果例如以下图所看到的：
 

Android Drawable 与 LayerList综合汇总

七、ScaleDrawable

        ScaleDrawable是对一个Drawable进行缩放操作，能够依据level属性控制这个drawable的缩放比率。也能够设置它在容器中的对齐方式。

        在xml文件里使用scale作为根节点来创建RotateDrawable。

        创建ScaleDrawable的代码例如以下：

[代码]xml代码：

1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- android:scaleGravity=""能够设置缩放的对齐方式 -->
3 <scale xmlns:android="http://schemas.android.com/apk/res/android" 
4     android:drawable="@drawable/smiley_smile"
5     android:scaleWidth="100%"
6     android:scaleHeight="100%"
7     >
8       
9 </scale>

        效果例如以下图所看到的：

 Android Drawable 与 LayerList综合汇总
图6-10  ScaleDrawable执行效果图

八、RotateDrawable

        RotateDrawable 是对一个Drawable进行旋转操作。能够依据level属性控制这个drawable旋转角度，也能够设置相对于它所在容器的对齐方式。

        在xml文件里使用rotate作为根节点来定义RotateDrawable.

        创建RotateDrawable的代码例如以下：

[代码]xml代码：

1 <?xml version="1.0" encoding="utf-8"?>
2 <rotate xmlns:android="http://schemas.android.com/apk/res/android" 
3     android:drawable="@drawable/smiley_smile"
4     android:pivotX="50%"
5     android:pivotY="50%"
6     >
7       
8   
9 </rotate>

        效果例如以下图所看到的：

 Android Drawable 与 LayerList综合汇总
图6-11  RotateDrawable执行效果图

九、AnimationDrawable

        AnimationDrawable 相应于Android中的帧动画，就是把一系列的drawable依照一定的顺序，一帧一帧的播放，而且能够使用android:oneshot属性设置是否循环播放。

        在xml文件里使用animation-list作为根节点定义AnimationDrawable。使用item设置须要播放的每一帧使用的drawable资源，以及每一帧持续的时常。

        以下的代码定义了一个包括五帧的AnimationDrawable，帧间隔为300毫秒，代码例如以下：

[代码]xml代码：

01 <?xml version="1.0" encoding="utf-8"?

>
02 <animation-list xmlns:android="http://schemas.android.com/apk/res/android" 
03     android:oneshot="false">
04     <item
05         android:drawable="@drawable/level1"
06         android:duration="300"
07         />
08     <item
09         android:drawable="@drawable/level2"
10         android:duration="300"
11         />
12     <item
13         android:drawable="@drawable/level3"
14         android:duration="300"
15         />
16     <item
17         android:drawable="@drawable/level4"
18         android:duration="300"
19         />
20     <item
21         android:drawable="@drawable/level5"
22         android:duration="300"
23         />
24 </animation-list>

        定义了AnimationDrawable之后须要主动调用AnimationDrawable的start播放动画，须要注意的是。当我们在Activity的oncreate方法中调用start方法时会没有不论什么效果。那是因

        为view还没有初始化完毕，无法播放动画，所以须要使用handler来延迟播放动画，详细实现代码例如以下：

[代码]java代码：

1 mHandler.postDelayed(new Runnable() {
2       
3     @Override
4     public void run() {
5         // TODO Auto-generated method stub
6         ((AnimationDrawable)mDrawable).start();
7           
8     }
9 }, 1000);

十、LayerDrawable

        LayerDrawable 管理一组drawable，每一个drawable都处于不同的层，当它们被绘制的时候。依照顺序所有都绘制到画布上。

尽管这些drawable会有交差或者重叠的区域，可是它们是位于不同的层。彼此之间不会影响。


        在xml文件里使用layer-list作为根节点来定义LayerDrawable，通过item子节点定义每一层的drawable，layer-list没有属性节点，仅仅包括item子节点。

        以下的xml定义了一个包括三层的LayerDrawable。为了清楚的看到它们分别位于不同的层。能够给每一层都设置了一些透明度，代码例如以下:

[代码]xml代码：

1 <?xml version="1.0" encoding="utf-8"?

>
2 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
3     <item android:drawable="@drawable/layer1" />
4     <item android:drawable="@drawable/layer2" />
5     <item android:drawable="@drawable/layer3" />
6 </layer-list>

        效果例如以下图所看到的：

 Android Drawable 与 LayerList综合汇总
图6-12  LayerDrawable执行效果图

十一、LevelListDrawable

        管理一组drawable，每个drawable都相应一个level范围。当它们被绘制的时候，依据level属性值选取相应的一个drawable绘制到画布上。

        在xml文件里使用level-list作为根节点来定义LevelListDrawable，通过item子节点定义每一层的drawable，level-list没有属性节点。仅仅包括item子节点。

        创建LevelListDrawable的代码例如以下：

[代码]xml代码：

01 <?xml version="1.0" encoding="utf-8"?>
02 <level-list xmlns:android="http://schemas.android.com/apk/res/android" >
03   
04     <item
05         android:maxLevel="2000"
06         android:drawable="@drawable/level1" />   
07     <item
08         android:maxLevel="4000"
09         android:drawable="@drawable/level2" />
10     <item
11         android:maxLevel="6000"
12         android:drawable="@drawable/level3" />
13     <item
14         android:maxLevel="8000"
15         android:drawable="@drawable/level4" />
16     <item
17         android:maxLevel="10000"
18         android:drawable="@drawable/level5" />
19   
20 </level-list>

        效果例如以下图所看到的：

 Android Drawable 与 LayerList综合汇总
图6-13  LevelListDrawable执行效果图1

 Android Drawable 与 LayerList综合汇总
图6-14  LevelListDrawable执行效果图2

十二、StateListDrawable

        StateListDrawable管理一组drawable，每个drawable都相应着一组状态。状态的选择类似于java中的switch-case组合，依照顺序比較状态，当遇到匹配的状态后，就返回相应的drawable。因此须要把最精确的匹配放置在最前面，依照从精确到粗略的顺序排列。

        StateListDrawable在Android中使用的非常广泛，全部控件的背景基本上都使用了StateListDrawable。比方button就具有非常多状态。按下状态、选中状态、默认状态、禁用状态等等，像这样在不用的状态下显示效果不一样的时候。就是须要使用StateListDrawable的时候。

        在xml文件里使用selector作为根节点来定义StateListDrawable，并使用item定义不同状态下的drawable。

        创建StateListDraw的代码例如以下：

[代码]xml代码：

01 <?

xml version="1.0" encoding="utf-8"?>
02 <selector xmlns:android="http://schemas.android.com/apk/res/android" >
03     <item android:state_focused="false"
04         android:state_pressed="false"
05         android:drawable="@drawable/gradient_normal"
06         />
07       
08     <item android:state_pressed="true"
09         android:drawable="@drawable/gradient_pressed"
10         />
11       
12     <item android:state_focused="true"
13         android:drawable="@drawable/gradient_focused"
14         />
15   
16 </selector>

        效果例如以下图所看到的：

 Android Drawable 与 LayerList综合汇总
图6-15  Normal状态下StateListDrawable执行效果图

 Android Drawable 与 LayerList综合汇总
图6-16  Focused状态下StateListDrawable执行效果图

 Android Drawable 与 LayerList综合汇总
图6-17  Pressed状态下StateListDrawable执行效果图

十三、TransitionDrawable

        TransitionDrawable 是LayerDrawable的子类。只是它仅仅负责管理两层drawable，而且提供了一个透明度变化的动画，能够控制从一层drawable过度到另外一层drawable的动画效果。

        在xml文件里使用transition作为根节点来定义TransitionDrawable，通过item子节点定义两层使用的drawable。

        创建TransitionDrawable的代码例如以下：

[代码]xml代码：

1 <?

xml version="1.0" encoding="utf-8"?>
2 <transition xmlns:android="http://schemas.android.com/apk/res/android" >
3     <item android:drawable="@drawable/smiley_smile"/>
4     <item android:drawable="@drawable/smiley_smile_glasses"/>
5   
6 </transition>

        在使用AnimationDrawable的时，须要主动调用startTransition方法启动两个层之间的切换动画，也能够调用reverseTransition方法启动逆向切换动画，它们都能够接受一个毫秒数，作为动画的持续时间。代码例如以下：

[代码]java代码：

1 mHandler.postDelayed(new Runnable() {
2       
3     @Override
4     public void run() {
5         // TODO Auto-generated method stub
6         ((TransitionDrawable)mDrawable).startTransition(2000);
7     }
8 }, 1000);
上一篇：校门外的树-poj


下一篇：VBS读取txt文档数据查找Excel中单元格数据符合条件的剪切到工作表2中