【Android】【Drawable总结】- Drawable家族

督促自己学习总结，特用文章的形式记录下来，共同进步
Android中用到Drawable的地方很多，Google提供了很多Drawable的子类，实现不同的效果，以前只是使用的时候再去查资料，并没有最所有Drawable做一个总结，现有时间做一个总结。了解Android的Drawable后能提高一些开发效率

先来一张Drawable的家族，可以看到有很多，本篇文章不会涉及到所有的，只涉及到一些常用，其他的读者可以自己去尝试了解或者后续有空在补充。

BitmapDrawable

BitmapDrawable是使用最多，可以直接在xml中定义，标签是<bitmap>

gravity

当图片小于容器的尺寸时，设置此选项可以对图片进行定位，这个属性的可选项比较多，相互之间可以通过“|”来组合使用

可选项	含义
top	将图片放在容器顶部,不改变图片大小
bottom	将图片放在容器低部,不改变图片大小
left	将图片放在容器左部,不改变图片大小
right	将图片放在容器右部,不改变图片大小
center_vertical	竖直居中，不改变图片大小
fill_vertical	竖直方向填充，会竖直拉伸
center_horizontal	水平居中，不改变图片大小
fill_horizontal	水平拉伸
center	居中，不改变图片大小
fill	水平和竖直方向都拉伸，会改变图片大小，默认配置

top

将图片放在容器顶部,不改变图片大小

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="top"
    android:src="@drawable/ycy">
    <!-- android:src 资源id-->
    <!-- android:antialias 是否开启图片抗锯齿功能   -->
    <!-- android:dither 是否开启抖动效果  -->
    <!-- android:filter 是否开启过滤功能   -->
    <!-- android:gravity 当图片小于容器的尺寸时，设置此选项可以对图片进行定位   -->
    <!-- android:tileMode 平铺模式-->
</bitmap>

bottom

将图片放在容器低部,不改变图片大小

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="bottom"
    android:src="@drawable/ycy">
</bitmap>

left

将图片放在容器左部,不改变图片大小

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

right

将图片放在容器右部,不改变图片大小

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="right"
    android:src="@drawable/ycy">
</bitmap>

center_vertical

竖直居中，不改变图片大小

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center_vertical"
    android:src="@drawable/ycy">
</bitmap>

fill_vertical

竖直方向填充，会竖直拉伸

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="fill_vertical"
    android:src="@drawable/ycy">
</bitmap>

center_horizontal

水平居中，不改变图片大小

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center_horizontal"
    android:src="@drawable/ycy">
</bitmap>

fill_horizontal

水平拉伸

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="fill_horizontal"
    android:src="@drawable/ycy">
</bitmap>

center

居中，不改变图片大小

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

fill

水平和竖直方向都拉伸，会改变图片大小，默认配置

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="fill"
    android:src="@drawable/ycy">
</bitmap>

top|left

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="top|left"
    android:src="@drawable/ycy">
</bitmap>

right|bottom

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="bottom|right"
    android:src="@drawable/ycy">
</bitmap>

tileMode

平铺模式

disabled

默认的，关闭平铺模式,当开启平铺模式后，gravity属性无效

clamp

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:tileMode="clamp"
    android:src="@drawable/ycy">
</bitmap>

repeat

直接平铺

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

mirror

水平和竖直方向镜面投影效果

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:tileMode="mirror"
    android:src="@drawable/ycy">
</bitmap>

NinePatchDrawable

NinePatchDrawable主要针对.9图片

<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ycy9">
</nine-patch>

图片会按照.9图片的设置进行拉伸

ShapeDrawable

shape

rectangle [矩形]

普通矩形

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorAccent" />
</shape>

corners 圆角

corners 带有圆角

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--  背景-->
    <solid android:color="@color/colorAccent" />
    <!--  圆角-->
    <corners android:radius="10dp" />
    <!--  大小-->
    <size
        android:width="100dp"
        android:height="100dp" />
</shape>

corners 带有圆角，四个圆角半径不一样

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--  背景-->
    <solid android:color="@color/colorAccent" />
    <!--  圆角-->
    <!--  radius优先级最低 会被其他四个数据覆盖  -->
    <corners
        android:bottomLeftRadius="15dp"
        android:bottomRightRadius="20dp"
        android:radius="10dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="10dp" />
    <size
        android:width="100dp"
        android:height="50dp" />
</shape>

corners 带有圆角，四个圆角半径不一样（作为button背景）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--  背景-->
    <solid android:color="@color/colorAccent" />
    <!--  圆角-->
    <!--  radius优先级最低 会被其他四个数据覆盖  -->
    <corners
        android:bottomRightRadius="30dp"
        android:topLeftRadius="30dp" />
    <size
        android:width="200dp"
        android:height="100dp" />
</shape>

gradient 渐变

普通渐变

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:endColor="@color/black"
        android:startColor="@color/white"
        android:type="linear"
        android:useLevel="false" />
</shape>

中间色渐变

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:centerColor="@color/red"
        android:endColor="@color/black"
        android:startColor="@color/white"
        android:type="linear"
        android:useLevel="false" />
</shape>

stroke 描边

属性	说明
width	描边的宽度
color	描边的颜色
dashWidth	组成虚线的线段的宽度
dashGap	组成虚线的线段之间的间隔

example 1

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorAccent" />
    <stroke
        android:width="5dp"
        android:color="@color/red"
        android:dashWidth="20dp"
        android:dashGap="10dp" />
</shape>

oval [椭圆]

1.普通椭圆

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent" />
</shape>

这是一个没有大小的椭圆，默认会覆盖所有背景

2.带大小的椭圆

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:dither="true"
    android:useLevel="false">

    <solid android:color="@color/red" />
    <stroke
        android:width="5dp"
        android:color="@color/black" />
    <size
        android:width="50dp"
        android:height="50dp" />

    <corners android:radius="25dp" />
</shape>

line [横线]

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <solid android:color="@color/colorAccent" />
    <stroke
        android:width="2dp"
        android:color="@color/colorPrimary"
        />
</shape>

ring [圆环]

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="30dp"
    android:innerRadiusRatio="9"
    android:shape="ring"
    android:thickness="10dp"
    android:thicknessRatio="9"
    android:useLevel="false">
    <solid android:color="@color/colorAccent" />

    <stroke android:width="2dp" />
</shape>

LayerDrawable

LayerDrawable对应的标签是<layer-list>
是将不同的Drawable放置在不同的层从而达到一种叠加后的效果
1.旋转

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="-10"
            android:pivotX="0"
            android:pivotY="0"
            android:toDegrees="-10">
            <bitmap android:src="@drawable/ycy" />
        </rotate>
    </item>

    <item>
        <rotate
            android:fromDegrees="15"
            android:pivotX="0"
            android:pivotY="0"
            android:toDegrees="15">
            <bitmap android:src="@drawable/ycy" />
        </rotate>
    </item>

    <item>
        <rotate
            android:fromDegrees="55"
            android:pivotX="0"
            android:pivotY="0"
            android:toDegrees="55">
            <bitmap android:src="@drawable/ycy" />
        </rotate>
    </item>
</layer-list>

2.阴影

3.输入框背景

StateListDrawable

StateListDrawable对应于<selector>标签
它表示Drawable的集合，每个Drawable都对应着View的一种状态，这样系统会根据View的状态来选择合适的Drawable
主要用来设置可点击View的背景，比如Button，俗称状态Drawable，或者说点击Drawable，在开发中很常用，显示点击效果，便于用户感知到操作

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_pressed" android:state_pressed="true" />
    <item android:drawable="@drawable/button_default" />
</selector>

代码

GitHub