码迷，mamicode.com
首页 > 移动开发 > 详细

Android的各种Drawable讲解

时间：2015-02-09 15:34:16      阅读：285      评论：0      收藏：0      [点我收藏+]

标签：

       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可以很容易的创建drawable，只有在程序中需要修改drawable的属性时，才需要使用具体的drawable类型提供的方法来处理。下面就来逐个认识这些Drawable类型。
 
一、ColorDrawable
       ColorDrawable 是最简单的Drawable，它实际上是代表了单色可绘制区域，它包装了一种固定的颜色，当ColorDrawable被绘制到画布的时候会使用颜色填充Paint，在画布上绘制一块单色的区域。
       在xml文件中使用color作为根节点来创建ColorDrawable，它只有一个android:color属性，通过它来决定ColorDrawable的颜色，Android并没有提供修改这个颜色值的Api，所以这个颜色一旦设置之后，就不能直接修改了。
       下面的xml文件定义了一个颜色为红色的ColorDrawable：
<?xml version="1.0" encoding="utf-8"?>
<color xmlns:android="http://schemas.android.com/apk/res/android"
 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，代码如下：
ColorDrawable drawable = new ColorDrawable(0xffff0000);
 
二、GradientDrawable
        GradientDrawable 表示一个渐变区域，可以实现线性渐变、发散渐变和平铺渐变效果，在Android中可以使用GradientDrawable表示很多复杂而又绚丽的界面效果。
        可以使用xml定义GradientDrawable，相对于ColorDrawable类型，GradientDrawable要复杂很多，它有很多的元素组成。在xml文件中使用shape作为根节点来创建GradientDrawable，它包含很多属性和子节点，下面是GradientDrawable的xml文档节点结构。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
	<size /> //定义区域的大小
	<gradient>//设置区域背景的渐变效果
        <solid/>//设置区域的背景颜色，如果设置了solid会覆盖gradient的效果
        <stroke />//设置区域的边框效果
        <padding />//设置区域的内边距
</shape> 
       
其中每个节点都有许多属性需要设置，以达到不同的渐变效果。
以下是几种不同渐变效果实现的xml文件代码：
<!-- 线性渐变效果的椭圆-->
<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

    <gradient
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:angle="90" />
    <stroke
        android:width="3dip"
        android:color="#fff"
        android:dashWidth="4dip"
        android:dashGap="5dip" />
</shape>

<!-- 平铺渐变效果的圆环-->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="ring" android:innerRadiusRatio="8"
	android:thicknessRatio="3" android:useLevel="false">
	<gradient android:type="sweep" android:useLevel="false"
		android:startColor="#ff0000" android:endColor="#0000ff" android:centerColor="#00ff00"/>
</shape>

<!-- 发散渐变效果的圆-->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="ring" android:innerRadius="0dip"
	android:thickness="70dip" android:useLevel="false">
	<gradient android:type="radial" android:useLevel="false" android:gradientRadius="70"
		android:startColor="#ff0000" android:endColor="#0000ff" android:centerColor="#00ff00"/>
</shape>

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

技术分享

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

技术分享

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

技术分享

图1-3  发散渐变效果的圆
 
三、BitmapDrawable
       BitmapDrawable 是对bitmap的一种包装，可以设置它包装的bitmap在BitmapDrawable区域内的绘制方式，如平铺填充、拉伸填充或者保持图片原始大小，也可以在BitmapDrawable区域内部使用gravity指定的对齐方式。
       在xml文件中使用bitmap作为根节点来定义BitmapDrawable。
       下面的xml代码定义一个BitmapDrawable，同时设置了BitmapDrawable的tileMode 属性为mirror，通过这样设置会使用小图片在水平和竖直方向做镜面平铺效果。
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android" 
    android:src="@drawable/png_icon_416"
    android:tileMode="mirror"
    android:antialias="true"
    android:dither="true"
    >
</bitmap>

 

也可以使用Java代码实现相同的效果，等价的Java代码如下：

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

 

效果如下图所示：

技术分享
图3-1  BitmapDrawable运行效果图
 
四、NinePatchDrawable
       NinePatchDrawable，“点九图”是Andriod平台的一种特殊的图片格式，文件扩展名为：.9.png。支持Android平台的手机类型很多，有多种不同的分辨率，很多控件的切图文件在被放大拉伸后，边角会模糊失真。在android平台下使用“点九”图片处理技术，可以将图片横向和纵向同时进行拉伸，以实现在多分辨率下的完美显示效果。点九图片在拉伸时仍能保留图像的渐变质感和圆角的精细度。
       Android SDK工具集提供了处理点九图片的工具，可以通过draw9patch.bat运行，通过这个工具可以很容易把普通的PNG图片处理成“点九”图片。从它的名字也很容易理解“点九”图的含义，其实相当于把一张PNG图分成了9个部分(九宫格)，分别为4个角，4条边，以及一个中间区域，4个角是不做拉伸的，所以还能一直保持圆角的清晰状态，而2条水平边和2条垂直边分别只做水平和垂直拉伸，所以不会出现边框被拉粗的情况，只有中间用黑线指定的区域做拉伸，通过这种处理方式图片才不会失真。如图6-5所示，对4条黑线分别做了注释。左边和上边的黑线形成的矩形区域是图片的拉伸区域，下边和右边形成的矩形区域是内容所在的区域。黑线可以是连续的也可以是不连续的，不过为了达到最好的显示效果，最好使用连续的黑线。
 

技术分享

图4-1  点九图片示意图
 
        使用了*.9.png图片技术后，只需要采用一套界面切图去适配不同的分辨率，而且大幅减少安装包的大小。Android FrameWork在显示点九图片时使用了高效的优化算法，所示应用程序不需要专门做处理就可以实现图片拉伸自适应，减少了代码量和实际开发的工作量。 
 
        在xml文件中使用使用nine-patch作为根节点创建NinePatchDrawable。同时，也可以使用bitmap包装点九图片，android FrameWork会根据android:src属性设置的图片类型来生成对应的drawable。代码如下：
<?xml version="1.0" encoding="utf-8"?>
<nine-patch
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/droid_logo"
    android:dither="true" />

 

<?xml version="1.0" encoding="utf-8"?>
<bitamp
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/droid_logo"
    android:dither="true" />
 
下面看一下原始点九图片以及拉伸之后的效果：
 

技术分享

图4-2  原始点九图片
 

技术分享

图4-3  点九图片拉伸之后的效果
 
        最后，需要指出的是，Android虽然可以使用Java代码创建NinePatchDrawable，但是极少情况会那么做，主要的原因是由于Android SDK会在编译工程时对点九图片进行编译，形成特殊格式的图片。使用代码创建NinePatchDrawable时只能针对编译过的点九图片资源，对于没有编译过的点九图片资源都当做BitmapDrawable对待。在使用点九图片时需要注意的是，点九图只能适用于拉伸的情况，对于压缩的情况并不适用，如果需要适配很多分辨率的屏幕时需要把点九图做的小一点。
 
五、InsetDrawable
       InsetDrawable 表示一个drawable嵌入到另外一个drawable内部，并且在内部留一些间距，这一点很像drawable的padding属性，区别在于 padding表示drawable的内容与drawable本身的边距，insetDrawable表示两个drawable和容器之间的边距。当控件需要的背景比实际的边框小的时候比较适合使用InsetDrawable。
       在xml文件中使用inset作为跟节点定义InsetDrawable。
       下面的xml定义了一个四边边距都为20dip的InsetDrawable，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/bitmap_bell"
    android:insetLeft="20dp"
    android:insetRight="20dp"
    android:insetTop="20dp"
    android:insetBottom="20dp"
    >
</inset>

 

效果如下图所示：
 

技术分享

图5-1  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 version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android" 
    android:clipOrientation="horizontal"
    android:drawable="@drawable/bitmap_android"
    android:gravity="left"
    >
</clip>

 如果没有android:drawable属性，必须要设置一个任意类型的drawable作为子节点，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android" 
    android:clipOrientation="horizontal"
    android:gravity="left"
    >
    <bitmap 
        android:src="@drawable/android_text"
        android:gravity="center"
        />
</clip>

 

效果如下图所示：

技术分享

图6-1  ClipDrawable运行效果图
 
 
七、ScaleDrawable
        ScaleDrawable是对一个Drawable进行缩放操作，可以根据level属性控制这个drawable的缩放比率，也可以设置它在容器中的对齐方式。
        在xml文件中使用scale作为根节点来创建RotateDrawable。
        创建ScaleDrawable的代码如下：
<?xml version="1.0" encoding="utf-8"?>
<!-- android:scaleGravity=""可以设置缩放的对齐方式 -->
<scale xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/smiley_smile"
    android:scaleWidth="100%"
    android:scaleHeight="100%"
    >
    
</scale>
 效果如下图所示：
技术分享

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

图7-1  ScaleDrawable运行效果图

 

八、 RotateDrawable

        RotateDrawable 是对一个Drawable进行旋转操作，可以根据level属性控制这个drawable旋转角度，也可以设置相对于它所在容器的对齐方式。
        在xml文件中使用rotate作为根节点来定义RotateDrawable.
        创建RotateDrawable的代码如下：
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/smiley_smile"
    android:pivotX="50%"
    android:pivotY="50%"
    >
    
</rotate>

 

 效果如下图所示：
技术分享

 图8-1  RotateDrawable运行效果图


九、AnimationDrawable
        AnimationDrawable 对应于Android中的帧动画，就是把一系列的drawable按照一定的顺序，一帧一帧的播放，并且可以使用android:oneshot属性设置是否循环播放。
        在xml文件中使用animation-list作为根节点定义AnimationDrawable，使用item设置需要播放的每一帧使用的drawable资源，以及每一帧持续的时常。
        下面的代码定义了一个包含五帧的AnimationDrawable，帧间隔为300毫秒，代码如下：
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" 
    android:oneshot="false">
    <item
        android:drawable="@drawable/level1"
        android:duration="300"
        />
    <item
        android:drawable="@drawable/level2"
        android:duration="300"
        />
    <item
        android:drawable="@drawable/level3"
        android:duration="300"
        />
    <item
        android:drawable="@drawable/level4"
        android:duration="300"
        />
    <item
        android:drawable="@drawable/level5"
        android:duration="300"
        />
</animation-list>

 

 定义了AnimationDrawable之后需要主动调用AnimationDrawable的start播放动画，需要注意的是，当我们在Activity的oncreate方法中调用start方法时会没有任何效果，那是因为view还没有初始化完成，无法播放动画，所以需要使用handler来延迟播放动画，具体实现代码如下：
mHandler.postDelayed(new Runnable() {
        
        @Override
        public void run() {
                // TODO Auto-generated method stub
                ((AnimationDrawable)mDrawable).start();
                
        }
}, 1000);

 

十、LayerDrawable
        LayerDrawable 管理一组drawable，每个drawable都处于不同的层，当它们被绘制的时候，按照顺序全部都绘制到画布上。虽然这些drawable会有交差或者重叠的区域，但是它们是位于不同的层，彼此之间不会影响。
        在xml文件中使用layer-list作为根节点来定义LayerDrawable，通过item子节点定义每一层的drawable，layer-list没有属性节点，只包含item子节点。
        下面的xml定义了一个包含三层的LayerDrawable，为了清楚的看到它们分别位于不同的层，可以给每一层都设置了一些透明度，代码如下:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/layer1" />
    <item android:drawable="@drawable/layer2" />
    <item android:drawable="@drawable/layer3" />
</layer-list>

 效果如下图所示：

技术分享
图10-1  LayerDrawable运行效果图

十一、LevelListDrawable
        管理一组drawable，每一个drawable都对应一个level范围，当它们被绘制的时候，根据level属性值选取对应的一个drawable绘制到画布上。
        在xml文件中使用level-list作为根节点来定义LevelListDrawable，通过item子节点定义每一层的drawable，level-list没有属性节点，只包含item子节点。
        创建LevelListDrawable的代码如下：
<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:maxLevel="2000"
        android:drawable="@drawable/level1" />   
    <item
        android:maxLevel="4000"
        android:drawable="@drawable/level2" />
    <item
        android:maxLevel="6000"
        android:drawable="@drawable/level3" />
    <item
        android:maxLevel="8000"
        android:drawable="@drawable/level4" />
    <item
        android:maxLevel="10000"
        android:drawable="@drawable/level5" />

</level-list>

         效果如下图所示：

技术分享
图11-1  LevelListDrawable运行效果图
 
技术分享
图11-2  LevelListDrawable运行效果图2

十二、StateListDrawable
        StateListDrawable管理一组drawable，每一个drawable都对应着一组状态，状态的选择类似于java中的switch-case组合，按照顺序比较状态，当遇到匹配的状态后，就返回对应的drawable，因此需要把最精确的匹配放置在最前面，按照从精确到粗略的顺序排列。
        StateListDrawable在Android中使用的非常广泛，所有控件的背景基本上都使用了StateListDrawable，比如按钮就具有很多状态，按下状态、选中状态、默认状态、禁用状态等等，像这样在不用的状态下显示效果不一样的时候，就是需要使用StateListDrawable的时候。
        在xml文件中使用selector作为根节点来定义StateListDrawable，并使用item定义不同状态下的drawable。
        创建StateListDraw的代码如下：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_focused="false"
        android:state_pressed="false"
        android:drawable="@drawable/gradient_normal"
        />
    
    <item android:state_pressed="true"
        android:drawable="@drawable/gradient_pressed"
        />
    
    <item android:state_focused="true"
        android:drawable="@drawable/gradient_focused"
        />

</selector>

 

效果如下图所示：
技术分享
图12-1  Normal状态下StateListDrawable运行效果图
 
技术分享
图12-2  Focused状态下StateListDrawable运行效果图
 
技术分享图12-3  Pressed状态下StateListDrawable运行效果图

十三、TransitionDrawable
        TransitionDrawable 是LayerDrawable的子类，不过它只负责管理两层drawable，并且提供了一个透明度变化的动画，可以控制从一层drawable过度到另外一层drawable的动画效果。
        在xml文件中使用transition作为根节点来定义TransitionDrawable，通过item子节点定义两层使用的drawable。
        创建TransitionDrawable的代码如下：
 
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/smiley_smile"/>
    <item android:drawable="@drawable/smiley_smile_glasses"/>

</transition>

 

        在使用AnimationDrawable的时，需要主动调用startTransition方法启动两个层之间的切换动画，也可以调用reverseTransition方法启动逆向切换动画，它们都可以接受一个毫秒数，作为动画的持续时间。代码如下：
 
mHandler.postDelayed(new Runnable() {
        
        @Override
        public void run() {
                // TODO Auto-generated method stub
                ((TransitionDrawable)mDrawable).startTransition(2000);
        }
}, 1000);

         

效果如下图所示：
技术分享
图13-1  TransitionDrawable运行效果图1
 
技术分享
 
图13-2  TransitionDrawable运行效果图2
 
 

Android的各种Drawable讲解

标签：

原文地址：http://www.cnblogs.com/shanzei/p/4281397.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！