多样化的Drawable

原来不知道Drawable有这么多东西现在才学到0.0

Drawable有很多种，他们都表示一种图像的概念，通过颜色也可以构造出各式各样的图像效果。Drawable常被用来作为Viewde的背景使用，Drawble一般通过XML来定义,当然我们也可以通过代码创建具体的Drawable对象，知识代码创建会麻烦。Drawble是一个抽象类，它是所有Drawable对象的基类，每个具体的Drawable都是是它的子类，比如ShapDrawable、BitmapDrawable等，具体的看Drawable层次请自行查看。

Drawable的内部宽/高这个参数比较重要，通过getIntrinsicWidth和getIntrinsicHeight这两个方法可以获取到他们。但不是所有的Drawable都有内部宽/高，比如一种图片所形成的Drawable，它的内部宽/高就是图片的宽高，但是一个颜色所形成的Drawable，他就没有内部的宽高的概念。另外注意的是，Drawable的内部宽高不等同于它的大小，一般来说Drawable是没有大小概念的，当作用View的背景时，Drawable会被拉伸至View的同等大小。

Drawable的种类繁多，常见的 BitmapDrawable、ShapeDrawable、LayerDrawable以及StateListDrawable等

1、BitmapDrawable

它表示一张图片，在实际开发中直接引用图片即可

通过xml设置

<bitmap
    xmlns: android = "http://schemas.android.com/apk/res/android"
    android :src= "@mipmap/ic_launcher"
    android :antialias= "true"
    android :dither= "true"
    android :gravity= "center"
    android :filter= "true"
    android :mipMap= "true"
    android :tileMode= "repeat"
    />

android :src 图片的资源ID

android :antialias图片抗锯齿功能

android :dither 抖动效果

android :filter 开启过滤效果

android :gravity  图片定位

android :mipMap 这是一种图像相关的处理技术，也叫纹理映射，比较抽象，这里也不对其深究了，默认值为false，在日常开发中此项不常用

android :tileMode 平铺模式 （4个选择：关闭平铺模式 disable   平铺模式 ： repeat 表示的是简单的水平和竖直方向上的效果，mirror表示在水平和竖直方向的镜面投影效果，repeat表示的简单的水平和竖直方向上的平铺效果）

2、ShapeDrawable

通过颜色来构造的图像 它既可以是纯色的图形，也可以是具有渐变的图形。ShapeDrawable的语法稍微复杂点

<? xml version= "1.0"  encoding= "utf-8" ?>
<shape  xmlns: android = "http://schemas.android.com/apk/res/android"
    android :shape= "rectangle" >
    <corners
        android :bottomLeftRadius= "50dp"
        android :bottomRightRadius= "50dp"
        android :radius= "30dp"
        android :topLeftRadius= "10dp"
        android :topRightRadius= "10dp"  />
    <gradient
        android :angle= "10dp"
        android :centerColor= "@color/colorAccent"
        android :centerX= "20dp"
        android :centerY= "20dp"
        android :endColor= "@color/colorAccent"
        android :gradientRadius= "50dp"
        android :startColor= "@color/colorAccent"
        android :type= "radial"
        android :useLevel= "true"  />
    <padding
        android :bottom= "10dp"
        android :left= "10dp"
        android :right= "10dp"
        android :top= "10dp"  />
    <size
        android :width= "110dp"
        android :height= "110dp"  />
    <solid  android :color= "@color/colorPrimaryDark"  />
    <stroke
        android :width= "10dp"
        android :color= "@color/colorAccent"
        android :dashGap= "10dp"
        android :dashWidth= "10dp"  />
</shape>

android:shape表示图形的形状，有四个选型：rectangle(矩形)、oval（椭圆）、line（横线）和ring（圆环）

它的默认值是矩形，另外line和ring这两个选项必须要通过<stroke>标签来指定线的宽度和颜色等消息，否则将无法达到预期的效果

针对ring这个形状，有5个特殊的属性：

android:innerRadius 圆环的内直径，和android:innerRadiusRatio同时存在，以android:innerRadius为准

android:thickness 圆的厚度，及外半径减去内半径的大小，和android:thiscknessRatio同时存在时，以android:thickness为准

android:innerRadiusRatio：内半径占整个Drawable宽度的比例，默认值为9，如果为n，那么内半径 = 宽度/n

android:thicknessRatio:厚度占整个Drawable宽度的比例，默认值为3。如果为n，那么厚度 = 宽度 / n

android:useLevel:一般都应该使用false，否则有可能无法达到预期的显示效果，除非它被当做LevelListDrawable来使用

<corners>

表示shape的四个角的角度。它只适合用于矩形shape，这里的角度是指圆角的程度 ，用px来表示，它的5个属性：

—android:radius  为4个角度同事设定相同的角度，优先级较低，会被其他四个属性覆盖

—android:topLeftRadius  设定最上角的角度

—android:topRightRadius 设定右上角的角度

—android:bottomLeftRadius  设定最下角的角度

—android:bottomRightRadius  设定右下角的角度

<gradient>

它与<solid>标签是互相排斥的，其中solid表示纯色填充，而gradiect则表示渐变效果，gradient有如下属性：

—android:angle   渐变的角度，默认为0，其值必须为45的倍数，0表示从左到右，90表示从下到上，具体的效果需要自己去调试，总之角度会影响渐变的方向

—android:centerX   渐变的中心点横坐标

—android:centerY   渐变的中心点的纵坐标

—android:startColor    渐变的起始颜色

—android:centerColor  渐变的中间颜色

—android:endColor   渐变的结束颜色

—android:gradientRadius   渐变的半径，仅当android:type: = “radial”时有效

—android:userLevel   一般为false,当Drawable作为StateListDrawable使用时为true；

—android:type   渐变的类别 有linear（线） 、 radial（径向渐变）、sweep（扫描线渐变）默认为线性渐变

<panding>

这个表示空白，但是它的表示表示shape的空白，而是包含它的View的空白，有4个属性：android：left 、android:top、android：right、android:bottom

<solid>表示纯色填充，通过android:color即可指定shape中填充的颜色

<stroke>Shape的描边

—android：width     描边的宽度，越大则shape的边缘线就会看起来越粗

—android：color      描边的颜色

—android：dashWidth     组成虚线的线段的宽度

—android：dashGap      组成虚线线段之间的间隔，间隔越大则虚线看起来空隙就越大。

<size>

shape的大小

3、LayerDrawable 

LayerDrawable对应得XML标签是<layer-list>，表示一种层次化的Drawable集合

<? xml version= "1.0"  encoding= "utf-8" ?>
<layer-list  xmlns: android = "http://schemas.android.com/apk/res/android" >
    <item
        android :drawable= "@drawable/shape_rect_stroke_drawable"
        android :bottom= "10dp"
        android :top= "10dp"
        android :right= "10dp"
        android :left= "10dp"
        android :id= "@+id/textView4"
        >
    </item>
   
    <item>
    </item>
    ........
</layer-list>

一个layer-list中可以包括多个item，每个item表示一个Drawable。我们可以通过android:drawable属性来直接引用一个已有的Drawable资源，也可以在item中自定义Drawable。layer-list中的所有的Drawable都会被缩放至View的大小，对于bitmap来说，需要使用android:gravity属性才能控制图片的显示效果。

例子：

<? xml version= "1.0"  encoding= "utf-8" ?>
<layer-list  xmlns: android = "http://schemas.android.com/apk/res/android" >
    <item>
        <shape>
            <solid  android :color= "#0ac39e"  />
        </shape>
    </item>

    <item  android :bottom= "6dp" >
        <shape>
            <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>

4、StateListDrawable （重点）

StateListDrawable对应于<selector>标签，它也是表示Drawable集合，每一个Drawable对应着View的一种状态，StateListDrawable主要用于设置可单击的View的背景，最常见的是Button。

<? xml version= "1.0"  encoding= "utf-8" ?>
<selector  xmlns: android = "http://schemas.android.com/apk/res/android"
    android :constantSize= "true"
    android :dither= "true"
    android :variablePadding= "true" >
    <item
        android :drawable= "@drawable/state_list_all_values_drawable"
        android :state_pressed= "true"
        android :state_focused= "true"
        android :state_hovered= "true"
        android :state_selected= "true"
        android :state_checked= "true"
        android :state_checkable= "true"
        android :state_enabled= "true"
        android :state_activated= "true"
        android :state_window_focused= "true"
        />
</selector>

android:constantSize    的固有大小是否不随着其状态的改变和改变的，因为状态的改变会导致StateListDrawable切换到具体的Drawable，而不同的Drawable具有不同的固有大小。True表示StateListDrawable的固有大小保持不变，这是他的固有大小是内部所有Drawable的固有大小的最大值，false则会随着状态的改变而改变。此选项默认值为false。

android:dither   是否开启抖动效果，开启此选项可以让图片在低质量的屏幕上仍然获得较好的显示效果，默认值为True

android:variablePadding    StateListDrawable的padding表示是否随着其状态的改变而改变，true表示会随着状态的改变而改变，false表示StateListDrawable的padding是内部所有Drawable的padding的最大值，此选项默认为false，并且不建议开启此选项。

<item>标签表示一个具体的Drawable

—android：state_pressed 表示按下状态，比如button被按下后仍没有松开时的状态

—android：state_focused 表示View已经获取了焦点

—android：state_selected 表示用户选择了View

—android：state_checked 表示用户选中了View，一般适用于checkBox这类在选中和非选中状态之间进行切换的View

—android：state_enabled 表示view处于可用状态

5、LevelListDrawable

LevelListDrawable对应于<level-list>标签，它同样表示一个Drawable集合，集合中的每一个Drawable都有一个等级的概念。根据不同的等级，LevelListDrawable会切换对应的Drawable

<? xml version= "1.0"  encoding= "utf-8" ?>
<level-list  xmlns: android = "http://schemas.android.com/apk/res/android" >
    <item
        android :drawable= "@drawable/focused_drawable"
        android :maxLevel= "10"
        android :minLevel= "10"
        />
</level-list>

每个Item表示一个Drawable，并且有对应的等级范围由android：minLevel和android：mxLevel来指定。

6、TransitionDrawable

TransitionDrawable对应于<transition> 标签，它用于实现两个Drawable之间的淡入浅出效果

<? xml version= "1.0"  encoding= "utf-8" ?>
<transition  xmlns: android = "http://schemas.android.com/apk/res/android" >
    <item  android :drawable= "@drawable/focused_drawable"  />
    <item  android :drawable= "@drawable/pressed_drawable"  />
</transition>

7、InsetDrawable

InsetDrawable对应于<inset>标签，它可以将其他Drawable内嵌到自己当中，并可以在四周留有一定的间距。

<? xml version= "1.0"  encoding= "utf-8" ?>
<inset  xmlns: android = "http://schemas.android.com/apk/res/android"
    android :drawable= "@drawable/focused_drawable"
    android :insetBottom= "15dp"
    android :insetLeft= "15dp"
    android :insetRight= "15dp"
    android :insetTop= "15dp" >

    <shape  android :shape= "rectangle" >
        <solid  android :color= "#ff0000"  />
    </shape>

</inset>

8、ScaleDrawable

ScaleDrawable对应于<scale>标签，它可以根据自己等级将指定Drawable缩放到一定比例

<? xml version= "1.0"  encoding= "utf-8" ?>
<scale  xmlns: android = "http://schemas.android.com/apk/res/android"
    android :drawable= "@drawable/image_one"
    android :scaleWidth= "70%"
    android :scaleHeight= "70%"
    android :scaleGravity= "center"
    />

这里记住要想ScaleDrawable可见，那么它的等级就不能为0看源码

@Override
public void  draw(Canvas canvas) {
    final Drawable d = getDrawable() ;
    if (d !=  null && d.getLevel() !=  0) {
        d.draw(canvas) ;
    }
}

那么它的等级就得设置大于0的数且小于等于10000

//scale
scaleTV = (TextView) findViewById(R.id. scale_tv) ;
ScaleDrawable scaleDrawable = (ScaleDrawable)  scaleTV.getBackground() ;
scaleDrawable.setLevel( 1) ;

scaleDrawable.setLevel( 1) ;这里一定要记住

9、ClipDrawable

ClipDrawable对应<clip>标签，它可以根据自己当前等级来裁剪另一个Drawable，裁剪方向可以通过android:clipOrientation和android:gravity这两个属性来共同控制

<? xml version= "1.0"  encoding= "utf-8" ?>
<clip  xmlns: android = "http://schemas.android.com/apk/res/android"
    android :clipOrientation= "vertical"
    android :drawable= "@drawable/image_one"
    android :gravity= "bottom" >
</clip>

代码设置

//clipe
clipeIMG = (ImageView) findViewById(R.id. clipe_img) ;
ClipDrawable clipDrawable = (ClipDrawable)  clipeIMG.getDrawable() ;
clipDrawable.setLevel( 3000) ;

这里需要主要的是ClipeDrawable也是有等级，它的范围是0~~10000 值越大裁剪区域越小  反之越大

10、自定义的Drawable

package com.example.jiangtao.aima.view ;

import android.graphics.Canvas ;
import android.graphics.ColorFilter ;
import android.graphics.Paint ;
import android.graphics.PixelFormat ;
import android.graphics.Rect ;
import android.graphics.drawable.Drawable ;

/**
 * Created by jiangtao
 * 16/5/20
 * com.example.jiangtao.aima.view
 * Aima
 */
public class MyDrawable  extends Drawable {

    private Paint  mPaint ;

    public MyDrawable( int color) {
        mPaint =  new Paint(Paint. ANTI_ALIAS_FLAG) ;
        mPaint.setColor(color) ;
    }

    @Override
    public void  draw(Canvas canvas) {
        final Rect rect = getBounds() ;
        float cx = rect.exactCenterX() ;
        float cy = rect.exactCenterY() ;

    }

    @Override
    public void  setAlpha( int alpha) {
        mPaint.setAlpha(alpha) ;
    }

    @Override
    public void  setColorFilter(ColorFilter colorFilter) {
        mPaint.setColorFilter(colorFilter) ;
        invalidateSelf() ;
    }

    @Override
    public int  getOpacity() {
        return PixelFormat. TRANSLUCENT ;
    }
}

Demo