Drawable-详解

2017-07-24 本文已影响24人玄策

参考资料

Drawable图像（可以在Canvas上进行绘制的抽象概念）。常见的颜色和图片都可以是一个Drawable。
Drawable使用范围单一，一个是作为ImageView中图像显示，另一个就是作为View的背景。
Drawable是抽象类，是所有Drawable的基类
getIntrinsicWidth() 和 getIntrinsicHeight()可以获得Drawable的内部宽高，但不是所有Drawable都有此属性（图片有，颜色就没有。可用来Drawable转Bitmap），且此宽高不等同于它的大小，一般Drawable没有大小概念，当用作View的背景时，Drawable会被拉伸至View的大小

2）Drawable分类

2.1）BitmapDrawable

就是一张图片，也可以通过xml的方式描述

<?xml version="1.0" encoding="utf-8"?>
<bitmap
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:src="@drawable/xxx"
  android:antialias=["true"|"false"]  //抗锯齿,应开启
  android:dither=["true"|"false"]  //是否开启抖动，可让高质量图片在低质量设备上保持较好显示效果,应开启
  android:filter=["true"|"false"]  //是否开启过滤,应开启
  android:gravity=["top"|"bottom"|"left"|"right"|"center_vertcial"|"fill_vertical"|"center_horizontal"|"fill_horizontal"|"center"|"fill"|"clip_vertical"|"clip_horizontal"]
  android:minMap=["true"|"false"]  //默认false，不常用
  android:tileMode=["disabled"|"clamp"|"repeat"|"mirror"] //disable默认，其他三种情况会忽略gravity属性。repeat重复平铺，mirror镜面投影，clamp图片四周的像素会扩展至周围区域
  />

2.2）ShapeDrawable

新建文件~res/drawable/shape_test.xml

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    //默认为rectangle矩形，oval椭圆，line横线，ring圆环
    android:shape=["rectangle"|"oval"|"line"|"ring"]>
   <corners   //当shape="rectangle"时使用
      //半径，会被后面的单个半径属性覆盖，默认为1dp
      android:radius="integer"
      android:topLeftRadius="integer"
      android:topRightRadius="integer"
      android:bottomLeftRadius="integer"
      android:bottomRightRadius="integer"/>
   <gradient  
      android:type=["linear" | "radial" | "sweep"]    //共有3中渐变类型，线性渐变（默认）/放射渐变/扫描式渐变   
      android:angle="integer"     //渐变角度，必须为45的倍数，0为从左到右，90为从上到下   
      android:centerX="float"     //渐变中心X的相当位置，范围为0～1   
      android:centerY="float"     //渐变中心Y的相当位置，范围为0～1   
      android:startColor="color"   //渐变开始点的颜色   
      android:centerColor="color"  //渐变中间点的颜色，在开始与结束点之间   
      android:endColor="color"    //渐变结束点的颜色   
      android:gradientRadius="float"  //渐变的半径，只有当渐变类型为radial时才能使用   
      android:useLevel=["true" | "false"] />  //使用LevelListDrawable时就要设置为true。设为false时才有渐变效果  
      />
  <solid    //填充颜色,与gradient互相排斥
      android:color="color"/>
  <stroke        //描边属性
      android:width="dimension"   //描边的宽度   
      android:color="color"   //描边的颜色   
      // 以下两个属性设置虚线   
      android:dashWidth="dimension"   //虚线的宽度，值为0时是实线   
      android:dashGap="dimension" />      //虚线的间隔  

//下面2个一般不怎么用，因为他们的功能控件本身也有
   <padding    
      android:left="integer"   
      android:top="integer"   
      android:right="integer"   
      android:bottom="integer" /> 
   <size   //指定大小 一般在imageview配合scaleType
      android:width="integer"   
      android:height="integer" /> 
</shape>

2.2）LayerDrawable

屏幕快照 2017-07-24 下午4.56.59.png

新建文件~res/drawable/layer_test.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#0ac39e"/>
        </shape>
    </item>
    <item android:bottom="6dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
        </shape>
    </item>
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
        </shape>
    </item>
</layer-list>

2.4）StateListDrawable

对应于<selector>标签,常用于Button

<selector
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:constantSize=["true"|"false"]
  android:dither=["true"|"false"]
  android:variablePadding=["true|"false"]>
   <item
      android:state_press=["true"|"false"]
      android:state_focused=["true"|"false"]
      android:state_hovered=["true"|"false"]
      android:state_selected=["true"|"false"]
      android:state_checkable=["true"|"false"]
      android:state_checked=["true"|"false"]
      android:state_enable=["true"|"false"]
      android:state_activated=["true"|"false"]
      android:state_window_focused=["true"|"false"]
      android:drawable="@android:color/holo_green_dark" //默认需要放最后
      />
</selector>

2.5）LevelListDrawable

为了让ImageView根据条件显示不同的图片，常常会使用if判断。但有更简单的方法: <level-list>标签。Android的手机显示剩余电量就是用这个方法来显示不同图片的。
LevelListDrawable的level区间为 0~10000

<ImageView
        android:id="@+id/level_view"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:src="@drawable/level_test"/>

ImageView level_view = (ImageView)findViewById(R.id.level_view);
level_view.getDrawable().setLevel(11);

<level-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@android:color/holo_green_dark"
        android:maxLevel="10"
        android:minLevel="0"/>
    <item
        android:drawable="@android:color/holo_red_dark"
        android:maxLevel="20"
        android:minLevel="11"/>
</level-list>

2.6）TransitionDrawable

<transition>标签，实现两个Drawable之间的淡入淡出动画效果

TransitionDrawable.gif

 <TextView
        android:id="@+id/transition_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hello"
        android:background="@drawable/transition_test"/>

TextView transition_view = (TextView) findViewById(R.id.transition_view);
TransitionDrawable drawable = (TransitionDrawable) transition_view.getBackground();
drawable.startTransition(2000);

<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/holo_green_dark"/>
    <item android:drawable="@android:color/holo_orange_dark"/>
</transition>

2.7）InsertDrawable

对应<insert>标签，可以将其他Drawable内嵌到自己中，并可以四周留出一定间距。使用LayerDrawable可以实现相同效果。

2.8）ScaleDrawable

对应<scale>标签，可以根据自己的等级（level）将指定的Drawable缩放到一定比例
ScaleDrawable的level区间为 0~10000。0是不可见的。

ScaleDrawable.png

<View
        android:id="@+id/scale_view"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:background="@drawable/scale_test"/>

View scale_view = findViewById(R.id.scale_view);
ScaleDrawable drawable2 = (ScaleDrawable) scale_view.getBackground();
drawable2.setLevel(1);

<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@android:color/holo_blue_light"
    android:scaleWidth="50%"
    android:scaleHeight="50%"
    android:scaleGravity="center">
</scale>

2.9）ClipDrawable

对应<clip>标签，可以根据level来裁剪一个Drawable。
ClipDrawable的level区间为0~10000。 0表示完全裁剪，整个Drawable不可见了。10000表示不裁剪。

ClipDrawable.png

<ImageView
        android:id="@+id/clip_view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/clip_test"/>

ImageView clip_view = (ImageView) findViewById(R.id.clip_view);
ClipDrawable drawable1 = (ClipDrawable) clip_view.getDrawable();
drawable1.setLevel(8000);

<clip
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="vertical"
    android:drawable="@android:color/holo_red_light"
    android:gravity="bottom">

上述代码设置android:gravity="bottom"表示从顶部开始裁剪。level为8000表示裁剪了2000，即在顶部裁剪了20%的区域

3）自定义Drawable

注意：自定义Drawable无法在XML中引用。