Android中Drawable的使用

作者: 番茄tomato | 来源:发表于2020-07-09 18:13 被阅读0次

今天来看看这个Drawable的使用
主要参考官方文档：https://developer.android.com/guide/topics/resources/drawable-resource

Drawable是图形的一般概念，是指可在屏幕上绘制的图形，以及可使用 getDrawable(int) 等 API 检索，或应用到拥有 android:drawable 和 android:icon 等属性的其他 XML 资源的图形。可绘制对象包含以下多种类型
（可以跳过这个部分直接第一条分割线以下开始）：

Bitmap File （本文已讲解）

位图图形文件（.png、.jpg 或 .gif）。来源于BitmapDrawable。

Nine-Patch File (不常用)

具有可伸缩区域的 PNG 文件，支持根据内容调整图像大小 (.9.png)。来源于NinePatchDrawable。

Layer List （本文已讲解）

管理其他可绘制对象阵列的可绘制对象。这些可绘制对象按阵列顺序绘制，因此索引最大的元素绘制于顶部。来源于LayerDrawable。

State List (本文已讲解)

此 XML 文件用于为不同状态引用不同位图图形（例如，按下按钮时使用不同图像）。来源于StateListDrawable。

Level List （本文已讲解）

此 XML 文件用于定义管理大量备选可绘制对象的可绘制对象，每个可绘制对象都配有最大备选数量。来源于LevelListDrawable。

Transition Drawable

此 XML 文件用于定义可在两种可绘制对象资源之间交错淡出的可绘制对象。来源于TransitionDrawable。

Inset Drawable

此 XML 文件用于定义以指定距离插入其他可绘制对象的可绘制对象。当视图需要小于视图实际边界的背景可绘制对象时，此类可绘制对象非常有用。

Clip Drawable

此 XML 文件用于定义对其他可绘制对象进行裁剪（根据其当前级别值）的可绘制对象。来源于ClipDrawable。

Scale Drawable

此 XML 文件用于定义更改其他可绘制对象大小（根据其当前级别值）的可绘制对象。来源于ScaleDrawable

Shape Drawable (本文已讲解)

此 XML 文件用于定义几何形状（包括颜色和渐变）。来源于` GradientDrawable。

接下来我把经常会使用的到的一些drawable的一些用法总结在下边：

一. Shape Drawable

1.1 首先从一个例子开始

假如我们开发中需需要做一个圆角的，背景渐变的按钮就像这样：(有没有大海的感觉？)

image.png

应该怎么做？
你会自然而然的想到使用ShapeDrawable
步骤如下，在drawable文件夹右键--->New--->Drawable Resource File

image.png
然后在my_shape_1中输入如下内容：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp" />
    <gradient
        android:startColor="#b0e0e6"
        android:centerColor="#66cdaa"
        android:endColor="#d2b48c"
        />
</shape>

最后在设置button的background就好了
android:background="@drawable/my_shap_1"
在这个例子中我们使用到了Shape Drawable
在shape标签中设置android:shape="rectangle" 表明形状为正方形
然后再corners标签中设置四个圆角为10dp
最后再gradient标签中设置了开始，中间，结束三个颜色完成渐变
这样就完成了

1.2 Shape Drawable介绍和语法

用于在 XML 文件中定义的通用形状。

文件位置：
res/drawable/filename.xml
文件名用作资源 ID。

语法如下(直接在官方文档上的图)

shape用法

1.3 常用标签和属性讲解

1.3.1 <shape>

根元素（必备）
shape中常用属性只有一条：
android:shape：用于设置形状
可以设置四个有效值：android:shape=["rectangle" | "oval" | "line" | "ring"]
分别对应矩形，椭圆（长宽相等时为圆形），线，环
其中rectangle和oval最常用。

1.3.2 <corners>

用于设置矩形圆角，仅当形状为矩形时适用。
常用属性：
android:radius：设置所有四个圆角的半径（单位dp）
当然在截图中可以看到还有四条属性
可以分别单独设置四个圆角半径，会覆盖android:radius

1.3.3 <solid>

用于填充形状的纯色
只有一条常用属性：
android:color:确定填充颜色

1.3.4 <gradient>

指定形状的渐变颜色。
常用属性：
android:startColor:起始颜色
android:centerColor：中间颜色
android:endColor：结束颜色
android:angle：颜色渐变的角度方向 0 为从左到右，90 为从上到上。必须是 45 的倍数。默认值为 0。

以下属性自己在Android studio中试一下，很简单，但不好描述：
android:centerX 渐变中心的相对 X 轴位置 (0 ~ 1.0)。
android:centerY 渐变中心的相对 Y 轴位置 (0 ~ 1.0)。

android:type
要应用的渐变图案的类型。有效值为：
"linear" 线性渐变。这是默认值。
"radial" 径向渐变。起始颜色为中心颜色。
"sweep" 流线型渐变。

android:gradientRadius
渐变的半径。仅在 android:type="radial" 时适用。

1.3.5 <stroke>

设置描边线条
常用属性：
android:width描边宽度
android:color描边颜色
android:dashWidth设置虚线每个点长度
android:dashGap设置虚线每个空白区域长度

二. State List Drawable

2.1 State List Drawable介绍和语法

State List Drawable会根据对象状态，使用多个不同的图像来表示同一个图形。例如，Button 可以是多种不同状态(按下，松开)，并且您可利用状态列表可绘制对象，为每种状态提供不同的背景图片。在每个状态变更期间，将从上到下遍历状态列表，并使用第一个与当前状态匹配的项目 —此选择并非基于“最佳匹配”，而是选择符合状态最低条件的第一个项目。

说白了就是给某个组件添加背景选择器, 比如一个按钮按下和离开状态会有不同背景表现。

文件位置：
res/drawable/filename.xml
文件名用作资源 ID。

语法如下：

State List Drawable语法

2.2 常用标签和属性介绍

2.2.1 <selector>

根元素（必备）
这个没什么好说的 android属性固定值
xmlns:android="http://schemas.android.com/apk/res/android"

2.2.2 <item>

android:drawable确定此情况时 item的绘制资源内容（shape drawable）

其他属性就是item确定此item对应的控件状态。在每个状态变更期间，将从上到下遍历状态列表，并使用第一个与当前状态匹配的item —此选择并非基于“最佳匹配”，而是选择符合状态最低条件的第一个项目。

item其余各个属性作用

需要注意的是item和状态是一对多的关系，比如item包含了“勾选”和“按下”状态，那控件处于勾选或者按下时，会显示该item。

这里总共10个状态，但不是每个控件都包含所有状态，比如Button只有按下和松开两种状态。比如输入框有获取焦点等状态，在实际使用中灵活选择使用。

当item不指定状态时，作为默认状态，通常置于list最底部。

2.3 例子（我们可以用它来做什么？）

现在按钮在这里，需要显示点击效果：

点击效果

这里就使用shpae和state相互配合来完成
第一步在刚刚的例子基础上创建my_shape_2，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp" />
    <solid android:color="#b0e0e6" />
</shape>

第二步在创建my_selector_1内容如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--按下状态-->
    <item android:drawable="@drawable/my_shape_2" android:state_pressed="true" />
    <!--默认状态-->
    <item android:drawable="@drawable/my_shape_1" />
</selector>

第二步设置button:
android:background="@drawable/my_selector_1

三. Layer List Drawable

其实学会了前边两个，后边的都非常简单也好理解了，这个layer-list可以理解为一堆item从下到上进行叠加重叠。

3.1 语法如下

image.png

3.2 常用标签和属性介绍

3.2.1 <layer-list>

根元素（必备）
这个没什么好说的 android属性固定值
xmlns:android="http://schemas.android.com/apk/res/android"

3.2.2 <item>

android:drawable调用drawable资源，确定此item绘制的内容，例如shape

android:id资源 ID。此可绘制对象的唯一资源 ID。要为此项新建资源 ID，请使用以下形式："@+id/*name*"。加号表示应创建为新 ID。您可以使用此 ID 检索和修改拥有 View.findViewById() 或 Activity.findViewById() 的可绘制对象。

image.png
这个属性非常关键，我们可以通过id指定item所绘制的资源，比如进度条有两个需要绘制的地方分别是进度条本身和背景，这个时候就可以通过background和progress来指定了

android:top
android:right
android:bottom
android:left
控制item在各个方向的偏移量体现叠加效果

当然和<selector>中的item一样，其内部也可以包含<bitmap>标签，调用mipmap资源显示图片

3.3 例子（我们可以用它来做什么？）：

3.3.1 体现层叠效果1：

image.png

3.3.2 体现层叠效果2：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/strawberry1"></item>
    <item
        android:drawable="@drawable/strawberry2"
        android:left="30dp"
        android:top="30dp">

    </item>
    <item
        android:drawable="@drawable/strawberry3"
        android:left="60dp"
        android:top="60dp">

    </item>
</layer-list>

image.png

可以看到随着位移增大，图片在慢慢变小，如果希望它大小不变，可以使用嵌套的 <bitmap> 元素为每个具有“中心”重力的项目定义可绘制对象资源。这可确保没有图像会为了适应容器的大小而缩放，因为偏移图像会造成大小调整。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap android:src="@drawable/strawberry1"  android:gravity="center"/>
    </item>
    <item
        android:left="30dp"
        android:top="30dp">
        <bitmap android:src="@drawable/strawberry2"  android:gravity="center"/>

    </item>
    <item
        android:left="60dp"
        android:top="60dp">
        <bitmap android:src="@drawable/strawberry3"  android:gravity="center"/>
    </item>
</layer-list>

image.png

3.3.3 实现阴影效果

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/my_shape_2" />
    <item
        android:bottom="5dp"
        android:drawable="@drawable/my_shape_1"
        android:right="5dp" />
</layer-list>

image.png

四. Bitmap File

这个其实在我们之前使用草莓的例子中就是使用到了，将bitmap嵌入item中,现在完整的讲解一下。

位图文件：

位图文件是 .png、.jpg 或 .gif 文件。当您将任一位图文件保存到 res/drawable/ 目录中时，Android 会为其创建 Drawable 资源。很简单，直接跳过。

XML 位图：

XML 位图是在 XML 文件中定义的资源，指向位图文件。实际上是原始位图文件的别名。XML 可以指定位图的其他属性，例如抖动和层叠。

4.1 语法：

image.png

4.2 标签和属性介绍

只有一个标签<bitmap>
xmlns:android定义 XML 命名空间，其必须是 "http://schemas.android.com/apk/res/android"。这仅当 <bitmap> 是根元素时才需要，当 <bitmap> 嵌套在 <item> 内时不需要。
android:src可绘制对象资源。必备。引用可绘制对象资源。这个资源可是图片也可以是其他任drawable，例如shape
android:antialias是否启用抗锯齿（牺牲清晰度，换来流畅度）
android:filter启用或停用位图过滤。当位图收缩或拉伸以使其外观平滑时使用过滤。
android:gravity设置位图的比重，位图会根据比重设置出现在容器不同位置
android:tileMode定义平铺模式。当平铺模式启用时，位图会重复。重力在平铺模式启用时将被忽略。
alpha透明度0~1.0

五. Level list drawable

管理大量备选可绘制对象的可绘制对象，每个可绘制对象都配有最大备选数量。若使用 setLevel() 设置可绘制对象的级别值，则会加载级别列表中 android:maxLevel 值大于或等于传递至方法的值的可绘制对象资源。

语法：

image.png

标签和属性介绍：

<level-list>
这必须是根元素。包含一个或多个 <item> 元素。
属性：
xmlns:android
字符串。必备。定义 XML 命名空间，其必须是 "http://schemas.android.com/apk/res/android"。
<item>
定义要在某特定级别使用的可绘制对象。
属性：
android:drawable
可绘制对象资源。必备。引用要插入的可绘制对象资源。
android:maxLevel
整型。此项目允许的最高级别。
android:minLevel
整型。此项目允许的最低级别。

这里有一个很好的例子：例如开灯关灯
https://blog.csdn.net/zzldm/article/details/52982105

感觉这个level-list能实现的效果，使用其他方式都能实现，这个更规范一点，项目中有一个手电筒开关的功能，改为level-list方式，并且setImageLevel这个方法，似乎可以和属性动画配合使用

一个例子：

还是用到之前的草莓，先创建level-list文件，my_level_list_1：

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:maxLevel="1"
        >
        <bitmap android:src="@drawable/strawberry1"  />
    </item>
    <item
        android:maxLevel="2"
     >
        <bitmap android:src="@drawable/strawberry2"  />
    </item>
    <item
        android:maxLevel="3"
        >
        <bitmap android:src="@drawable/strawberry3"  />
    </item>
</level-list>

然后在布局文件的ImageView中引用：

    <ImageView
        android:id="@+id/draw_image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/my_level_list_1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

最后在activity中添加一些逻辑：

    private fun initView() {
        val drawable=draw_image.drawable
        if(drawable is LevelListDrawable){
            drawable.level=1
        }
        var level=1
        draw_Btn.setOnClickListener {
            drawable.level=level
            if(level<3){
                level+=1
            }else{
                level=1
            }
        }
    }

这样每点击一下按钮我们的草莓就会变一个颜色
但其实这种效果直接使用image.setImage就可以实现了，
再思考一下，如果绘制对象不是ImageView呢，比如button呢?
是不是可以这样呢？：（扩展中的例子3）

val drawableB=draw_Btn.background
if(drawableB is LevelListDrawable){....}

那么这样是否可以扩展到所有的View呢？
答案是可以！
也就意味着我们就可以随心所欲的根据某种情况修改view的绘制表现，并且只需要很简单那的一句话：
drawable.level=n

扩展

以上就是Drwable的基本知识了，那么接下来列举一些综合性的例子，来实践一下：

例子1-圆角渐变的进度条：

效果图：

progress-1

这个圆角渐变的开始按钮我们已经讲过了，下面分析一下这个进度条，可以看到进度条由两部分组成，首先是进度条的灰色背景，然后是颜色渐变的进度
接下来简单说一下实现步骤：
首先在布局文件中加入一个progress bar：

    <ProgressBar
        android:id="@+id/draw_progress"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="300dp"
        android:layout_height="10dp"
        android:max="1000"
        android:progressDrawable="@drawable/bg_progress"
         />

style="?android:attr/progressBarStyleHorizontal":设置为横向进度条（默认为圆圈）
android:progressDrawable="@drawable/bg_progress"：设置表现样式，下面创建bg_progress.xml文件
内容如下：
bg_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 设置背景色 -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="20dp"/>
            <solid android:color="#a9a9a9"/>
        </shape>
    </item>
    <!-- 设置进度条颜色 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:angle="180"
                    android:centerColor="#66cdaa"
                    android:startColor="#b0e0e6"
                    android:endColor="#d2b48c"
                    />
                <corners android:radius="20dp"/>
            </shape>
        </clip>
    </item>
</layer-list>

这里是一个layer-list，通过item绘制了背景和进度条的表现
android:id="@android:id/background"通过id来指定了这个item所绘制的内容。
现在就好了，然后在activity中加入属性动画就能让进度条动起来了：

    private fun initView() {
        draw_Btn.setOnClickListener {
            shoWLoading(3*1000)
        }
    }

    private fun shoWLoading(duration: Long) {
        draw_progress.visibility = View.VISIBLE
       val progressAnim= ObjectAnimator.ofInt(draw_progress,"progress",0,1000)
        progressAnim.duration = duration
        //anim.interpolator = DecelerateInterpolator()//插值器
        //动画监听
        progressAnim.addListener(object : AnimatorListenerAdapter() {
            override fun onAnimationEnd(animation: Animator?) {
                super.onAnimationEnd(animation)
            }
        })
        progressAnim.start()
    }

例子2-在例子1的基础上更优化一下：

我们可以看到例子一中虽然进度条的背景是圆角了，但是进度加载过程中却是平角的：

但我们明明在例子一中通过<corners android:radius="20dp"/>设置了进度圆角，为什么没有生效呢？
其实这个是<clip>所导致的，要解决这个问题，不使用它就行了，我们换成<scale>：
新建一个bg_progress_p.xml绘制出我们想要的进图条样式

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="180"
        android:centerColor="#66cdaa"
        android:startColor="#b0e0e6"
        android:endColor="#d2b48c"
        />
    <corners android:radius="20dp"/>
</shape>

然后修改bg_progress.xml的内容如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 设置背景色（黑色） -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="20dp"/>
            <solid android:color="#a9a9a9"/>
        </shape>
    </item>
    <!-- 设置进度条颜色（白色） -->
    <item android:id="@android:id/progress">
        <scale
            android:scaleWidth="100%"
            android:drawable="@drawable/bg_progress_p"
            >
        </scale>
    </item>
</layer-list>

现在就好了：

image.png

例子3-使用level-list随心所欲地修改绘制表现

效果：

可以看到这个button随着进度条到25%，50%，75%，100%，都改变了一次颜色。
实现方式也很简单：首先在例子2的基础上创建一个<level-list> my_button_level其内容如下：

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

    <item
        android:drawable="@drawable/bg_progress_p"
        android:maxLevel="1" />
    <item
        android:drawable="@drawable/bg_progress_p_red"
        android:maxLevel="2" />
</level-list>

这里bg_progress_p,bg_progress_p_red参考之前的例子自己生成
然后在布局文件中修改button的属性如下：

    <Button
        android:id="@+id/draw_Btn"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@drawable/my_button_level"
        android:text="开始进度"
        android:textColor="#ffffff"
         />

然后就可以activity的代码了：


    var drawableB:Drawable?=null
    private fun initView() {
        //获取到 button的绘制对象drawableB
        drawableB=draw_Btn.background
        draw_Btn.setOnClickListener {
            shoWLoading(5*1000)
        }
    }
    private fun shoWLoading(duration: Long) {
       val progressAnim= ObjectAnimator.ofInt(draw_progress,"progress",0,1000)
        progressAnim.duration = duration
        //动画监听
        progressAnim.addListener(object : AnimatorListenerAdapter() {
            override fun onAnimationEnd(animation: Animator?) {
                //动画结束
                super.onAnimationEnd(animation)
                Log.d("动画值", "动画结束")
                if(drawableB?.level==1){
                    drawableB?.level=2
                }else{drawableB?.level=1}
            }
        })
        //动画值变化监听
        progressAnim.addUpdateListener(AnimatorUpdateListener { animation ->
            val value=animation.animatedValue as Int
            anim_value.text= "${value/10.0}%"//实际值按百分比显示：(value/1000)*100 %
            Log.d("动画值", value.toString())
            if(value==250||value==500||value==750){
                if(drawableB?.level==1){
                    drawableB?.level=2
                }else{drawableB?.level=1}
            }

        })
        progressAnim.start()
    }

就可以达到效果图中的效果了。
这里最关键的代码其实就是
drawableB=draw_Btn.background
drawableB?.level=n
一句话就修改了button的绘制样式，是不是很舒服。
这只是一个很简单的例子，这里的button可以是任何view，让想法起飞一下，可以用很少的代码，做出很多好看的效果

Android中Drawable的使用

Bitmap File （本文已讲解）

Nine-Patch File (不常用)

Layer List （本文已讲解）

State List (本文已讲解)

Level List （本文已讲解）

Transition Drawable

Inset Drawable

Clip Drawable

Scale Drawable

Shape Drawable (本文已讲解)

一. Shape Drawable

1.1 首先从一个例子开始

1.2 Shape Drawable介绍和语法

1.3 常用标签和属性讲解

1.3.1 <shape>

1.3.2 <corners>

1.3.3 <solid>

1.3.4 <gradient>

1.3.5 <stroke>

二. State List Drawable

2.1 State List Drawable介绍和语法

2.2 常用标签和属性介绍

2.2.1 <selector>

2.2.2 <item>

2.3 例子（我们可以用它来做什么？）

三. Layer List Drawable

3.1 语法如下

3.2 常用标签和属性介绍

3.2.1 <layer-list>

3.2.2 <item>

3.3 例子（我们可以用它来做什么？）：

3.3.1 体现层叠效果1：

3.3.2 体现层叠效果2：

3.3.3 实现阴影效果

四. Bitmap File

位图文件：

XML 位图：

4.1 语法：

4.2 标签和属性介绍

五. Level list drawable

语法：

标签和属性介绍：

一个例子：

扩展

例子1-圆角渐变的进度条：

效果图：

例子2-在例子1的基础上更优化一下：

例子3-使用level-list随心所欲地修改绘制表现

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读