android中常用的drawable

一 drawable描述

控件的绘制 可以在android项目的drawable目录下 配置 xml文件进行drawable定义

  以下是常用的drawable配置：

     shape 控件的圆角 背景 渐变 边框的设置 对应的类注释中存在对应标签的属性

            GradientDrawable绘制渐变

           ShapeDrawable 绘制渐变，边框 颜色，圆角等

     selector 控制不同状态下 控件的背景

          StateListDrawable 

      layerlist 图片的叠加

          LevelListDrawable

     animation-list 逐帧动画

         AnimationDrawable

      bitmap 创建可拉伸的矢量图

        BitmapDrawable

     clip 剪切图像

      ClipDrawable

二 对应drawable详解

1 shape配置 

   参考如下

2 selector配置

   android:state_pressed=["true" | "false"]  //被点击   
   android:state_focused=["true" | "false"]  //获得焦点   
   android:state_selected=["true" | "false"] //被选中   
   android:state_checkable=["true" | "false"] //可以被check时   
   android:state_checked=["true" | "false"]  //被check时，例如用于checkbox   
   android:state_enabled=["true" | "false"]  //可用时，即能接收click/touch事件   
   android:state_window_focused=["true" | "false"]  //所在的窗口获得焦点

  设置以上配置 可以当控件处于某种状态时显示某些背景 

  比如 在drawable下定义selector.xml内容如下：

   <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 触摸屏或者鼠标按下时触发  松开后 开事件消失 -->
    <item android:drawable="@drawable/button2" android:state_pressed="true"></item>
    <!-- 获取焦点的事件  一般都用于文本框 -->
    <item android:drawable="@drawable/button1" android:state_focused="true"></item>
    <item android:state_focused="true" android:drawable="@drawable/button3"></item>

    <!--这里表示默认的背景图片 一定要写在最下面 不然其他的状态都无效 -->
    <item android:drawable="@drawable/button3"></item>
</selector>

在文本框控件中：

   <EditText android:id="@+id/myText" android:layout_marginTop="10dp"  android:background="@drawable/selector" android:layout_width="100dp"
         android:layout_height="50dp"   android:layout_below="@id/btn1"/>

3 layerlist配置

   可以将两张图片叠加作为背景显示

   可以设置某些项的左右下上的距离

   <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <bitmap  android:src="@drawable/q1" android:antialias="true"/>
    </item>

   <!--第二张图片离左边的距离为100dp   bitmap默认会自动拉伸到控件的大小-->
    <item android:left="100dp">
         <bitmap  android:src="@drawable/ic_launcher" />
    </item>
</layer-list>

效果如下：

4 animation-list配置

   drawable目录下定义myaimation.xml  内容如下：

    <animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
        <item android:drawable="@drawable/q1" android:duration="150"/>
        <item android:drawable="@drawable/q2" android:duration="150"/>
        <item android:drawable="@drawable/q3" android:duration="150"/>
        <item android:drawable="@drawable/q4" android:duration="150"/>
     </animation-list>

     这里 android:oneshot="false" true表示是否只循环一次  如果为false表示 一直循环播放

定义了4个item 当调用播放时 先显示@drawable/q1图片  150ms后 执行@drawable/q2

当q4执行完后150秒 循环又开始播放q1

   布局中定义：

     <ImageView android:id="@+id/abc" android:layout_width="fill_parent" android:layout_height="90dp" 
        android:src="@drawable/myaimation"
        />
    <Button  android:id="@+id/btn"  android:layout_width="100dp" android:layout_height="50dp" android:text="播放" android:layout_below="@id/abc"/>
   ImageView 用于播放指定的animation-list  点击按钮后触发事件：

      ImageView iView=(ImageView)MainActivity.this.findViewById(R.id.abc);
     AnimationDrawable ad =(AnimationDrawable)iView.getDrawable();
     ad.start();

4 bitmap配置

   进行图片的一些简单操作 比如拉伸 滤波 去锯齿等

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ic_launcher"  --必须指定图片不能是xml文件
    android:antialias="true"  --锯齿
    android:filter="true"      --滤波
    android:gravity="right"    --右边对齐
     >

如果ImageView设置为长度100dp  bitmap本身设置的图片是50dp 那么图片会自动拉伸扩展到100dp 会出现模糊

可以使用android:gravity 表示图片不拉伸 自动填充到指定位置对齐 比如right  图片将位于控件右边 控件左边50dp就是空白

5 color配置

color标签是drawable里最简单的标签了，只有一个属性：android:color，指定颜色值。这个标签一般很少用，因为基本都可以通过其他更方便的方式定义颜色。另外，颜色值一般都在colors.xml文件中定义，其根节点为resources。看看两者的不同：


<!-- 文件：res/drawable/white.xml -->
<color xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#FFFFFF" />
<!-- 文件：res/values/colors.xml -->
<resources>
    <color name="white">#FFFFFF</color>
</resources>
引用的时候，前一种通过@drawable/white引用，后一种通过@color/white引用。

6 inset配置

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android" 
    android:visible="true"
    android:insetLeft="10dp"
    >
<shape>
    <padding android:left="50dp"/>
    <solid android:color="@android:color/holo_orange_light" />
</shape>
</inset>

inset 设置背景和控件的外边距 如果设置了 外边距就不会绘制背景图片  可以设置左右上下的距离

shape中的padding表示绘制内边距 这时内边距的部分也绘制了背景图片  这时光标就在内边距 +外边距之后

如果是 按钮 按钮的文本就鱼尾 外边距+内边距后面

图解：

文本框

按钮：

6 clip配置

使用剪切图像资源可以只显示一部分图像，这种资源经常被用在进度条的制作上。剪切图像资源是一个XML格式文件，资源只包含一个<clip>标签

举例：drawable下添加 myclip.xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"  
    android:gravity="left"   从左边开始剪切

    android:clipOrientation="horizontal"  水平剪切
    android:drawable="@drawable/button5"    被剪切的背景图
     >
</clip>

ClipDrawable类内部预设了一个最大的level值10000 表示截取该图片的全部  如果设置为0 截取该图片的宽度为0  相当于背景图没有设置 这个参数只能在代码中设置

这里在布局文件中 添加一个父容器 设置背景图  在Button上设置剪切

<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" 
        android:background="@drawable/button2" android:layout_marginTop="10dp">
    <Button  android:id="@+id/btn22"  android:layout_width="fill_parent"   android:layout_height="50dp" 
        android:layout_below="@id/myText1" android:background="@drawable/myclipe" />
    </LinearLayout>

如果 代码设置

ClipDrawable cd=(ClipDrawable)(((Button)findViewById(R.id.btn22)).getBackground());
cd.setLevel(10000);//设置为最大值1000 LinearLayout 的背景图被完全覆盖了

如果设置为 

cd.setLevel(5000);

截取 一半的图像显示 左边一半就是clip指定的图像的一半 右边显示LinearLayout一半的图像

7 scale配置

使用scale标签可以对drawable进行缩放操作，和clip一样是通过设置level来控制缩放的比例

android:drawable 指定drawable资源，如果不设置该属性，也可以定义drawable类型的子标签
android:scaleHeight 设置可缩放的最大高度，用百分比表示，格式为XX%，0%表示不做任何缩放，50%表示只能缩放一半 缩放设置的level超过了这个百分比无法缩放
android:scaleWidth 设置可缩放的最大宽度，用百分比表示，格式为XX%，0%表示不做任何缩放，50%表示只能缩放一半
android:scaleGravity 设置drawable缩放后的位置，取值和bitmap标签的一样，就不一一列举说明了，不过默认值是left
android:useIntrinsicSizeAsMinimum 设置drawable原有尺寸作为最小尺寸，设为true时，缩放基本无效，API Level最低要求为11

举例

drawable添加myscale.xml文件

<scale
    android:drawable="@drawable/button5"
    android:scaleWidth="0%"   --表示水平不能缩放 就算设置了level也无效
    android:scaleHeight="80%"  --表示高度 设置level不能缩放超过80%
    xmlns:android="http://schemas.android.com/apk/res/android">
</scale>

布局文件

<EditText android:id="@+id/myText1"android:background="@drawable/myscale" android:layout_width="fill_parent"
         android:layout_height="50dp"   android:layout_below="@id/myText"/>

在java代码中设置level  level的范围是  【0-10000】

findViewById(R.id.myText1).getBackground().setLevel(8000);

这里 水平 比例  8000/10000 缩放了80% 超过了最大 0%无法缩放 就是拉伸填充原始宽度

        高度  8000/10000 缩放了80%  等于最大值 80% 自动缩放高度到原始高度的80%

   宽度没有缩放  高度黑色的部分缩放了

7 rotate配置

使用rotate标签可以对一个drawable进行旋转操作，在shape篇讲环形时最后举了个进度条时就用到了rotate标签。另外，比如你有一张箭头向上的图片，但你还需要一个箭头向下的图片，这时就可以使用rotate将向上的箭头旋转变成一张箭头向下的drawable。
先看看rotate标签的一些属性吧：


android:drawable 指定drawable资源，如果不设置该属性，也可以定义drawable类型的子标签
android:fromDegrees 起始的角度度数
android:toDegrees 结束的角度度数，正数表示顺时针，负数表示逆时针
android:pivotX 旋转中心的X坐标，浮点数或是百分比。浮点数表示相对于drawable的左边缘距离单位为px，如5; 百分比表示相对于drawable的左边缘距离按百分比计算，如5%; 另一种百分比表示相对于父容器的左边缘，如5%p; 一般设置为50%表示在drawable中心
android:pivotY 旋转中心的Y坐标
android:visible 设置初始的可见性状态，默认为false
示例代码如下，目标是将一张箭头向上的图片转180度，转成一张箭头向下的图片：


<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_arrow"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="180" />

如果使用以上设置没有任何效果不会旋转  如果单纯只是旋转 只需要设置fromDegrees这个参数的角度 就可以旋转指定的角度

android:pivotX 表示旋转角度的x坐标  50%为控件宽度的50%

如果需要android:toDegrees  有效果 必须代码 设置level属性 [0-10000]

如果设置为 5000   旋转的长度 等于  5000/1000  *(180-0)