Android技能树 — Drawable小结

前言

Android技能书系列：

Android基础知识

Android技能树 — 动画小结

Android技能树 — View小结

Android技能树 — Activity小结

Android技能树 — View事件体系小结

Android技能树 — Android存储路径及IO操做小结

Android技能树 — 多进程相关小结

Android技能树 — Drawable小结

Android技能树 — Fragment整体小结

数据结构基础知识

Android技能树 — 数组,链表,散列表基础小结

Android技能树 — 树基础知识小结(一)

算法基础知识

Android技能树 — 排序算法基础小结

先上脑图：

脑图下载连接

Drawable

固有高/宽 & 大小

咱们知道日常使用最多的Drawable多是图片了，咱们知道一个图片的本来的尺寸，好比下面这个图：

大小为64X64，咱们把它赋值给一个ImageView作为背景，同时这个ImageView设置的宽高都很大：

<ImageView       
      android:layout_width="300dp"
      android:layout_height="300dp"
      android:background="@drawable/back"/>
复制代码

咱们能够看到咱们的图片实际上变的很大，因此最终的图片大小不必定是它固有宽/高。

因此对于这个图片，它的固有高/宽是它本来图片的大小，而实际上当最为咱们ImageView的背景后，被拉伸至于View同等大小了。并且对于一些咱们本身画的Drawable，不像图片那样，有本身本来的尺寸，好比咱们本身写了个一个红色的Drawable，这时候它没有固定的尺寸，因此getIntrinsicWidth/height会返回-1。

Drawable分类

单个Drawable

BitmapDrawable:

这里特别讲一下平铺模式，好比仍是上面那个箭头的图片，咱们写相应BitmapDrawable代码：

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/back"
    android:tileMode="repeat"
    >
</bitmap>
复制代码

<ImageView
        android:id="@+id/logo"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@drawable/bitmapdrawable"/>

复制代码

这里有一点要注意：记住是赋给android:background,有些人写习惯了，可能就赋给了ImageView的android:src属性， 而后就不会有效果了。

ShapeDrawable

咱们主要注意这几点：

1. 当咱们对描边进行设置虚线时候，android:dashWidth和android:dashGap只要有一个为0，虚线效果将不能生效。 好比：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle"
    >
    <stroke android:color="@color/colorBlack"
        android:width="2dp"
        android:dashGap="30dp"
        android:dashWidth="40dp"/>
    
</shape>
复制代码

咱们能够看到效果是：

可是只要一个为0，就会变成

2. 标签的设置： 定义内容离边界的距离,有些人说我设置了Padding，但是没有看出效果来，好比下面：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle"
    >
    <stroke android:color="@color/colorBlack"
        android:width="2dp"
        android:dashGap="0dp"
        android:dashWidth="40dp"/>

    <padding android:left="130dp"
        />

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

</shape>
复制代码

<ImageView
        android:id="@+id/logo"
        android:layout_width="300dp"
        android:layout_height="300dp"     
        android:background="@drawable/bg"/>
复制代码

而后咱们会发现，what啥都没变啊。其实咱们要知道是内容离边界的距离。好比咱们这里换成TextView就知道了：

<TextView
        android:id="@+id/logo"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:text="aaaaaaaaaaaaaaaaaaaa"
        android:background="@drawable/sdf"/>
复制代码

文字距离左边padding了130dp了。

3. 标签的做用： 咱们知道图片的话，有本身的固有宽/高，可是像这种ShapeBitmap，没有固有宽/高，getIntrinsicWidth/height获取到的是-1，因此咱们若是设置了标签，获取到的就是你设置的值了。

<size 
     android:width="100dp"
     android:height="100dp"/>
复制代码

InsetDrawable:

能够把其余的Drawable内嵌到本身里面，而后在能够设置四周的距离。

好比咱们有时候在状态栏处，点击返回按钮，可是美工切图的返回键有点小，直接设置进去，有时候用户按返回键会按不到，一种是把ImageView的宽高设置的大一点，另一种可使用这个InsetDrawable。

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/back"
    android:insetLeft="20dp"
    android:insetTop="20dp"
    android:insetRight="20dp"
    android:insetBottom="20dp"
    >

</inset>
复制代码

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/insetdrawable"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/back"
        />

复制代码

咱们能够查看设置了InsetDrawable和直接设置返回按钮图片的样子：

ScaleDrawable:

能够缩放的Drawable，效果以下：

具体的使用能够参考这篇文章：Android Drawable - Scale Drawable使用详解

ClipDrawable:

可裁剪的Drawable，效果以下：

具体的使用能够参考这篇文章：ClipDrawable让开发变得更简单

Drawable集合

Drawable集合的意思是这些Drawable能够放多个Drawable，好比能够放多个图片资源在里面。

LayerDrawable

它是一种层次化的Drawable集合，经过不一样的Drawable放置在不一样的层上面达到了叠加后的效果。而且下面的item覆盖上面的item。

好比这个图片上的搜索框：

咱们可使用LayerDrawable来实现，只须要把中间的放大镜和文字变成一个图片，好比

而后背景为：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    
    <corners android:radius="20dp"/>
    <solid android:color="@color/colorWhite"/>
    
</shape>
复制代码

最后使用LayerDrawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@drawable/search_bg"/>

    <item android:drawable="@drawable/search"
        android:right="60dp"
        android:left="60dp"
        android:top="10dp"
        android:bottom="10dp"
        />

</layer-list>
复制代码

效果图为：

具体能够参考如下文章：

Android Drawable - Layer Drawable使用详解

layer-list -- layer-list的基本使用介绍

StateListDrawable

这个估计是你们用的最多的，一般用在不一样的按钮上，当按下是什么背景，送开的时候是什么背景，当处于不可点击的时候是什么背景。

这个我就很少说了，能够参考这篇：Drawable子类之——StateListDrawable （选择器）

这里额外说一个注意点： 系统根据View状态从selector中按照从上到下的顺序查找选择对应item，因此默认的item放在最后一条，这样上面都不符合时候，会匹配上默认的item，由于默认的item不附带状态，能够匹配View的任何状态

LevelListDrawable

这个有点像StateListDrawable,在不一样Level下会使用不一样的图，不一样的是，它是根据每一个item设置的Level范围来肯定的。

TransitionDrawable

主要是用来实现二个Drawable之间的淡入淡出，很容易就想到了animation动画来实现，可是发现使用动画的话，可是在调用statAnimation的时候由于图片已经显示了，再播放一次动画其实会致使细微的闪烁效果。因此可使用TransitionDrawable来实现。

以下效果：

具体能够参考文章：[如何使用TransitionDrawable实现背景切换渐变效果 ](blog.csdn.net/u011043551/…)

结语

其实都是很基础的东西。可是就当本身作个总结了。

PS:这块的Drawable内容参考《Android 开发艺术探索》。