当前位置： 首页 > article >正文

解锁Android Drawable：从基础到实战的图形绘制秘籍

article 2025/3/6 7:00:42

一、Drawable 初相识

在 Android 开发的广袤天地里，用户界面（UI）的构建无疑是核心任务之一，而 Drawable 在其中扮演着举足轻重的角色。它就像是一位神奇的画师，为 Android 应用的界面绘制出绚丽多彩的画卷，让应用变得生动且富有吸引力。

从定义上来说，Drawable 是 Android 中用于表示可绘制对象的抽象类。它可以是一张图片、一种颜色、一个形状，甚至是多个图形的组合，涵盖了我们在界面上所能看到的各种视觉元素。比如，我们常见的应用图标、按钮的背景、列表项的装饰等，很多都是通过 Drawable 来实现的。

Drawable 之所以如此重要，原因是多方面的。它极大地丰富了界面的视觉效果。通过使用不同类型的 Drawable，开发者能够轻松实现各种复杂的图形和动画效果，从简单的纯色背景到精美的矢量图标，再到炫酷的渐变和动画，为用户带来丰富的视觉体验。在一个音乐播放应用中，播放界面的唱片旋转动画可以通过 Drawable 来实现，增强了用户与应用的互动感。

其次，Drawable 提高了代码的可维护性和复用性。将界面的视觉元素抽象成 Drawable，使得开发者可以在不同的地方重复使用这些资源，而无需重复编写绘制代码。如果我们定义了一个通用的按钮背景 Drawable，那么在多个界面的按钮上都可以直接使用，一旦需要修改按钮的样式，只需要在 Drawable 资源中进行修改，所有使用该 Drawable 的按钮都会自动更新，大大提高了开发效率。

再者，Drawable 有助于优化应用的性能。对于一些简单的图形和背景，使用 Drawable 比使用自定义 View 更加高效，因为 Drawable 的绘制过程相对简单，占用的系统资源较少。在一些对性能要求较高的场景下，合理使用 Drawable 可以有效提升应用的流畅度和响应速度。

Drawable 在 Android 开发中占据着不可或缺的地位，它是构建美观、高效、易用的 Android 应用界面的重要工具。接下来，让我们深入了解 Drawable 的各种类型及其使用方法，揭开它神秘的面纱。

二、Drawable 的本质与核心概念

（一）Drawable 是什么

Drawable 是 Android 中用于表示可绘制对象的抽象类，它是所有可绘制资源的基类，为开发者提供了一种统一的方式来处理各种图形和图像资源。Drawable 的存在，使得开发者无需关心具体的绘制细节，只需通过简单的接口调用，就能在界面上呈现出丰富多样的视觉效果。

从功能上看，Drawable 就像是一个 “绘画大师”，它可以在画布（Canvas）上绘制各种图形，包括位图（Bitmap）、颜色（Color）、形状（Shape）等。在实际应用中，我们可以将 Drawable 设置为 View 的背景、前景，或者作为 ImageView 的显示内容。当我们将一个 Drawable 设置为 Button 的背景时，Drawable 就会根据 Button 的大小和形状，自动调整并绘制在 Button 的表面，为按钮赋予独特的外观。

Drawable 的绘制原理基于 Android 的图形绘制系统，它通过调用 draw (Canvas canvas) 方法，将自身的图形内容绘制到指定的 Canvas 上。在绘制过程中，Drawable 会根据自身的属性和设置，如颜色、大小、位置等，来确定绘制的具体方式和效果。一个 ShapeDrawable 可以根据设置的形状（如矩形、圆形等）和颜色，在 Canvas 上绘制出相应的图形；而 BitmapDrawable 则可以将位图图像绘制到 Canvas 上。

Drawable 的抽象性使得它具有很高的灵活性和扩展性。通过继承 Drawable 类，开发者可以创建自定义的 Drawable，实现更加个性化的绘制逻辑和效果。自定义的 Drawable 可以用于实现各种复杂的图形效果，如动画、特效等，为应用的界面增添独特的魅力。

（二）内部宽高与实际大小

在理解 Drawable 时，内部宽高与实际大小是两个容易混淆的概念，需要我们仔细区分。

Drawable 的内部宽高，指的是通过 getIntrinsicWidth () 和 getIntrinsicHeight () 方法获取到的宽高值。这个宽高值代表了 Drawable 自身的固有尺寸，它反映了 Drawable 在不考虑外部因素时的大小。对于 BitmapDrawable 来说，其内部宽高就是所包装位图的实际宽高；而对于 ShapeDrawable，如果在 XML 中通过标签设置了 width 和 height 属性，那么这两个属性值就是其内部宽高，若未设置，则默认返回 - 1，表示没有固定的内部宽高。

然而，Drawable 的内部宽高并不等同于它在界面上实际显示的大小。一般情况下，Drawable 本身并没有固定的大小概念，它的实际显示大小往往取决于其所在的 View 的大小以及相关的布局参数。当我们将一个 Drawable 设置为 View 的背景时，Drawable 会被拉伸或缩放，以适应 View 的大小。如果将一个内部宽高为 100x100 像素的 BitmapDrawable 设置为一个宽 200dp、高 150dp 的 ImageView 的背景，那么这个 BitmapDrawable 会被拉伸，以填满整个 ImageView 的区域，其实际显示大小就变成了 200dp x 150dp。

在不同的场景下，Drawable 的内部宽高和实际大小的表现也有所不同。在 ImageView 中，如果设置了 scaleType 属性，那么 Drawable 的实际显示大小和显示方式会根据 scaleType 的取值而变化。当 scaleType 为 CENTER_CROP 时，Drawable 会被缩放以填满 ImageView，同时保持其宽高比，可能会导致部分内容被裁剪；而当 scaleType 为 FIT_CENTER 时，Drawable 会在保持宽高比的前提下，缩放至合适大小，使其完全显示在 ImageView 中，可能会在 ImageView 周围留下空白区域。

在自定义 View 中，我们可以通过重写 onDraw (Canvas canvas) 方法，根据需要手动设置 Drawable 的绘制位置和大小，此时 Drawable 的实际显示大小可以由我们自己控制，不一定与 View 的大小相同。

理解 Drawable 的内部宽高与实际大小的区别，对于我们在开发中正确处理图形资源、优化界面布局和显示效果至关重要。只有掌握了这些概念，我们才能更加灵活地运用 Drawable，打造出美观、高效的 Android 应用界面。

三、Drawable 的多元分类与深度剖析

（一）BitmapDrawable

  1. 基础概念：BitmapDrawable 是 Drawable 的一个子类，它主要用于包装位图（Bitmap），并将其作为 Drawable 在 Android 界面中显示。BitmapDrawable 就像是一个 “容器”，将 Bitmap 对象封装其中，使得我们可以方便地在各种 View 中使用位图资源，如设置 ImageView 的图片、作为 View 的背景等。它在显示图片时起着关键作用，能够根据不同的需求对图片进行缩放、拉伸、平铺等操作，以适应不同的布局和显示要求。
  1. XML 属性详解：
    • src：指定要显示的位图资源，通过 @drawable / 资源名的形式引用，如android:src=“@drawable/my_image”。这个属性是 BitmapDrawable 的核心属性，用于确定要显示的具体图片。
    • antialias：布尔值，用于开启或关闭抗锯齿功能。当设置为true时，会对图片边缘进行平滑处理，使图片在缩放或拉伸时边缘更加平滑，视觉效果更好，例如android:antialias=“true”。
    • dither：布尔值，用于开启或关闭图像抖动处理。当位图的颜色深度与显示屏幕的像素配置不匹配时，开启抖动可以使图片在低色彩显示环境下仍能保持较好的视觉效果，减少颜色失真，如android:dither=“true”。
    • filter：布尔值，用于开启或关闭滤镜。当图片进行收缩或拉伸操作时，设置为true可以使用滤镜使图片看起来更加平滑，避免出现锯齿状，例如android:filter=“true”。
    • gravity：用于指定当位图大小比它所在的容器小时，位图在容器中的位置。取值有top（顶部对齐）、bottom（底部对齐）、left（左对齐）、right（右对齐）、center_vertical（垂直居中对齐）、fill_vertical（纵向缩放位图使之与容器等高）、center_horizontal（水平居中对齐）、fill_horizontal（横向缩放位图使之与容器等宽）、center（居中对齐）、fill（纵向与横向都缩放使之完全铺满容器，这也是默认值）、clip_vertical、clip_horizontal等。例如android:gravity="center"表示将位图在容器中居中显示。
    • mipMap：布尔值，用于指定是否开启 mipmap 暗示。mipmap 是一种图像金字塔技术，开启后可以在图片缩放时提高渲染性能，减少锯齿和模糊现象，如android:mipMap=“true”。
    • tileMode：定义平铺模式。当设置了该属性时，位图将会重复显示，并且gravity属性将失效。取值有disabled（默认值，不启用平铺）、clamp（复制位图边缘的颜色来填充容器剩下的空白部分）、repeat（复制整个位图来填充容器）、mirror（与repeat类似，但是是交替的镜像复制，即相邻的两张是镜像对称的）。例如android:tileMode="repeat"表示将位图重复平铺以填充容器。
  1. 代码实现示例：以下是使用 Java 代码创建和使用 BitmapDrawable，并设置相关属性的示例：
// 从资源中获取Bitmap
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.my_image);
// 创建BitmapDrawable
BitmapDrawable bitmapDrawable = new BitmapDrawable(getResources(), bitmap);
// 设置抗锯齿
bitmapDrawable.setAntiAlias(true);
// 设置图像抖动
bitmapDrawable.setDither(true);
// 设置滤镜
bitmapDrawable.setFilterBitmap(true);
// 设置平铺模式为重复
bitmapDrawable.setTileModeX(Shader.TileMode.REPEAT);
bitmapDrawable.setTileModeY(Shader.TileMode.REPEAT);
// 将BitmapDrawable设置为ImageView的背景
ImageView imageView = findViewById(R.id.image_view);
imageView.setImageDrawable(bitmapDrawable);

在 Kotlin 中，代码如下：

// 从资源中获取Bitmap
val bitmap = BitmapFactory.decodeResource(resources, R.drawable.my_image)
// 创建BitmapDrawable
val bitmapDrawable = BitmapDrawable(resources, bitmap)
// 设置抗锯齿
bitmapDrawable.isAntiAlias = true
// 设置图像抖动
bitmapDrawable.isDither = true
// 设置滤镜
bitmapDrawable.isFilterBitmap = true
// 设置平铺模式为重复
bitmapDrawable.tileModeX = Shader.TileMode.REPEAT
bitmapDrawable.tileModeY = Shader.TileMode.REPEAT
// 将BitmapDrawable设置为ImageView的背景
val imageView: ImageView = findViewById(R.id.image_view)
imageView.setImageDrawable(bitmapDrawable)

（二）ShapeDrawable

  1. 基础概念：ShapeDrawable 用于通过颜色构造图形，它可以创建出各种形状的图形，包括纯色图形和渐变图形。通过 ShapeDrawable，我们可以轻松地定义矩形、圆形、线条、环形等基本几何形状，并为其设置填充颜色、边框颜色、渐变效果等属性，从而实现丰富多样的图形效果。在 Android 开发中，ShapeDrawable 常用于创建自定义的按钮背景、进度条样式、列表项分隔线等。
  1. XML 属性与子节点解析：
    • shape：根元素的属性，用于指定图形的形状，取值有rectangle（矩形）、oval（椭圆）、line（线条）、ring（环形）。例如android:shape="rectangle"表示创建一个矩形。
    • corners：用于定义矩形的四个角的弧度，只有在android:shape="rectangle"时有效。其属性包括android:radius（设置四个角的统一弧度）、android:topLeftRadius（设置左上角的弧度）、android:topRightRadius（设置右上角的弧度）、android:bottomLeftRadius（设置左下角的弧度）、android:bottomRightRadius（设置右下角的弧度）。例如：
<corners
    android:radius="10dp"
    android:topLeftRadius="5dp"
    android:bottomRightRadius="5dp" />
  • gradient：用于定义使用渐变色填充图形。其属性包括android:angle（渐变的角度，取值为 0 - 360，0 表示从左到右，90 表示从下到上）、android:centerX（渐变中心的 X 坐标，取值为 0 - 1，0 表示最左边，1 表示最右边）、android:centerY（渐变中心的 Y 坐标，取值为 0 - 1，0 表示最上边，1 表示最下边）、android:centerColor（渐变中心的颜色）、android:endColor（渐变结束的颜色）、android:gradientRadius（渐变半径，仅在android:type="radial"时有效）、android:startColor（渐变开始的颜色）、android:type（渐变类型，取值有linear（线性渐变）、radial（径向渐变）、sweep（扫描渐变））、android:useLevel（一般设置为false）。例如：
<gradient
    android:type="linear"
    android:angle="90"
    android:startColor="#FF0000"
    android:centerColor="#00FF00"
    android:endColor="#0000FF" />
  • solid：用于定义填充的颜色，只有一个属性android:color，指定填充的颜色值。例如android:solid="#FFFFFF"表示使用白色填充图形。
  • stroke：用于绘制几何形状的边框。其属性包括android:width（边框的宽度）、android:color（边框的颜色）、android:dashWidth（虚线边框中每个线段的宽度）、android:dashGap（虚线边框中线段之间的间隔）。例如：
<stroke
    android:width="2dp"
    android:color="#FF0000"
    android:dashWidth="5dp"
    android:dashGap="3dp" />
  • padding：用于定义几何形状的内边距，其属性包括android:left（左边距）、android:top（上边距）、android:right（右边距）、android:bottom（下边距）。例如：
<padding
    android:left="10dp"
    android:top="5dp"
    android:right="10dp"
    android:bottom="5dp" />
  • size：用于定义几何形状的大小，其属性包括android:width（宽度）、android:height（高度）。例如android:size android:width=“50dp” android:height="50dp"表示设置图形的宽高为 50dp。
  1. 代码实现示例：以下是使用 Java 代码创建不同形状和效果的 ShapeDrawable 的示例：
// 创建一个矩形ShapeDrawable
ShapeDrawable rectangleDrawable = new ShapeDrawable(new RectShape());
rectangleDrawable.getPaint().setColor(Color.RED);
rectangleDrawable.setBounds(50, 50, 250, 150);
// 创建一个圆形ShapeDrawable
ShapeDrawable circleDrawable = new ShapeDrawable(new OvalShape());
circleDrawable.getPaint().setColor(Color.BLUE);
circleDrawable.setBounds(300, 50, 400, 150);
// 创建一个带有渐变的矩形ShapeDrawable
GradientDrawable gradientDrawable = new GradientDrawable(
        GradientDrawable.Orientation.TOP_BOTTOM,
        new int[]{Color.RED, Color.YELLOW, Color.GREEN});
gradientDrawable.setShape(GradientDrawable.RECTANGLE);
gradientDrawable.setBounds(50, 200, 250, 300);

在 Kotlin 中，代码如下：

// 创建一个矩形ShapeDrawable
val rectangleDrawable = ShapeDrawable(RectShape())
rectangleDrawable.paint.color = Color.RED
rectangleDrawable.setBounds(50, 50, 250, 150)
// 创建一个圆形ShapeDrawable
val circleDrawable = ShapeDrawable(OvalShape())
circleDrawable.paint.color = Color.BLUE
circleDrawable.setBounds(300, 50, 400, 150)
// 创建一个带有渐变的矩形ShapeDrawable
val gradientDrawable = GradientDrawable(
        GradientDrawable.Orientation.TOP_BOTTOM,
        intArrayOf(Color.RED, Color.YELLOW, Color.GREEN))
gradientDrawable.shape = GradientDrawable.RECTANGLE
gradientDrawable.setBounds(50, 200, 250, 300)

（三）LayerDrawable

  1. 基础概念：LayerDrawable 是一种层次化的 Drawable 集合，它允许我们将多个 Drawable 按照层次顺序叠加在一起，从而实现图片叠加效果。通过 LayerDrawable，我们可以创建出复杂的图形组合，如带有图标和文字的背景、具有多层阴影效果的按钮等。每个 Drawable 在 LayerDrawable 中都有自己的位置和大小，可以通过 XML 或代码进行精确控制。
  1. XML 结构与属性：LayerDrawable 在 XML 中使用标签定义，其内部的每个标签表示一个 Drawable。标签的属性包括：
    • top、bottom、left、right：用于指定该 Drawable 在 LayerDrawable 中的位置偏移量，单位为像素或 dp 等。例如android:top="10dp"表示该 Drawable 距离 LayerDrawable 顶部 10dp。
    • drawable：指定要显示的 Drawable 资源，通过 @drawable / 资源名的形式引用，如android:drawable=“@drawable/my_drawable”。

例如，以下是一个简单的 LayerDrawable 的 XML 示例，实现了一个图片叠加文字的效果：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap
            android:src="@drawable/background_image"
            android:gravity="fill" />
    </item>
    <item
        android:top="20dp"
        android:left="20dp">
        <bitmap
            android:src="@drawable/icon"
            android:gravity="center" />
    </item>
    <item
        android:top="50dp"
        android:left="50dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#80000000" />
            <padding
                android:left="10dp"
                android:top="5dp"
                android:right="10dp"
                android:bottom="5dp" />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item
        android:top="55dp"
        android:left="60dp">
        <bitmap
            android:src="@drawable/text_icon"
            android:gravity="center" />
    </item>
</layer-list>
  1. 代码实现示例：以下是使用 Java 代码创建包含多个 Drawable 的 LayerDrawable，并展示叠加效果的示例：
// 创建背景Drawable
Drawable backgroundDrawable = getResources().getDrawable(R.drawable.background_image);
// 创建图标Drawable
Drawable iconDrawable = getResources().getDrawable(R.drawable.icon);
// 创建遮罩Drawable
GradientDrawable maskDrawable = new GradientDrawable();
maskDrawable.setShape(GradientDrawable.RECTANGLE);
maskDrawable.setColor(Color.argb(128, 0, 0, 0));
maskDrawable.setCornerRadius(5);
maskDrawable.setPadding(10, 5, 10, 5);
// 创建文字图标Drawable
Drawable textIconDrawable = getResources().getDrawable(R.drawable.text_icon);
// 创建LayerDrawable
LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{
        backgroundDrawable,
        iconDrawable,
        maskDrawable,
        textIconDrawable
});
// 设置图标Drawable的位置
layerDrawable.setLayerInset(1, 20, 20, 0, 0);
// 设置遮罩Drawable的位置
layerDrawable.setLayerInset(2, 50, 50, 0, 0);
// 设置文字图标Drawable的位置
layerDrawable.setLayerInset(3, 60, 55, 0, 0);
// 将LayerDrawable设置为ImageView的背景
ImageView imageView = findViewById(R.id.image_view);
imageView.setImageDrawable(layerDrawable);

在 Kotlin 中，代码如下：

// 创建背景Drawable
val backgroundDrawable = resources.getDrawable(R.drawable.background_image)
// 创建图标Drawable
val iconDrawable = resources.getDrawable(R.drawable.icon)
// 创建遮罩Drawable
val maskDrawable = GradientDrawable()
maskDrawable.shape = GradientDrawable.RECTANGLE
maskDrawable.color = Color.argb(128, 0, 0, 0)
maskDrawable.cornerRadius = 5f
maskDrawable.setPadding(10, 5, 10, 5)
// 创建文字图标Drawable
val textIconDrawable = resources.getDrawable(R.drawable.text_icon)
// 创建LayerDrawable
val layerDrawable = LayerDrawable(arrayOf(
        backgroundDrawable,
        iconDrawable,
        maskDrawable,
        textIconDrawable
))
// 设置图标Drawable的位置
layerDrawable.setLayerInset(1, 20, 20, 0, 0)
// 设置遮罩Drawable的位置
layerDrawable.setLayerInset(2, 50, 50, 0, 0)
// 设置文字图标Drawable的位置
layerDrawable.setLayerInset(3, 60, 55, 0, 0)
// 将LayerDrawable设置为ImageView的背景
val imageView: ImageView = findViewById(R.id.image_view)
imageView.setImageDrawable(layerDrawable)

（四）StateListDrawable

  1. 基础概念：StateListDrawable 根据 View 的状态选择不同的 Drawable，它常用于设置可单击 View（如 Button、TextView 等）的背景，以实现不同状态下的视觉反馈。通过 StateListDrawable，我们可以定义 View 在正常状态、按下状态、选中状态、禁用状态等不同情况下所显示的 Drawable，从而增强用户与界面的交互体验。
  1. XML 属性与状态定义：StateListDrawable 在 XML 中使用标签定义，其内部的每个标签表示一种状态下的 Drawable。标签的属性包括：
    • constantSize：布尔值，用于指定 StateListDrawable 的大小是否固定。如果设置为true，则无论选择哪个子 Drawable，StateListDrawable 的大小都保持不变；如果设置为false，则 StateListDrawable 的大小会根据所选子 Drawable 的大小而变化，默认值为false。
    • dither：布尔值，用于开启或关闭图像抖动处理，与 BitmapDrawable 中的dither属性类似，当 Drawable 的颜色深度与显示屏幕的像素配置不匹配时，开启抖动可以使图片在低色彩显示环境下仍能保持较好的视觉效果，减少颜色失真，默认值为false。
    • variablePadding：布尔值，用于指定 StateListDrawable 的内边距是否可变。如果设置为true，则内边距会根据所选子 Drawable 的内边距而变化；如果设置为false，则内边距保持不变，默认值为false。

标签通过android:state_*属性来定义不同的状态，例如：

    • android:state_pressed=“true”：表示 View 被按下的状态。
    • android:state_selected=“true”：表示 View 被选中的状态。
    • android:state_enabled=“false”：表示 View 被

四、实战演练：在项目中巧妙运用 Drawable

（一）创建自定义背景

  1. 使用 ShapeDrawable 实现圆角矩形背景：在 Android 开发中，使用 ShapeDrawable 实现带有圆角和渐变效果的矩形背景是一种常见的需求。我们可以通过 XML 和代码两种方式来实现这一效果。

首先，通过 XML 实现。在 res/drawable 目录下创建一个新的 XML 文件，例如 rounded_rectangle_gradient.xml，代码如下：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 设置圆角半径 -->
    <corners android:radius="10dp" />
    <!-- 设置渐变 -->
    <gradient
        android:type="linear"
        android:angle="90"
        android:startColor="#FF0000"
        android:centerColor="#FFFF00"
        android:endColor="#00FF00" />
</shape>

在上述代码中，android:shape="rectangle"指定了形状为矩形。标签用于设置矩形的圆角半径，android:radius=“10dp"表示四个角的圆角半径均为 10dp。标签定义了渐变效果，android:type=“linear"表示线性渐变，android:angle=“90"表示渐变角度为 90 度（即从上到下渐变），android:startColor=”#FF0000"表示起始颜色为红色，android:centerColor=”#FFFF00"表示中间颜色为黄色，android:endColor=”#00FF00"表示结束颜色为绿色。

在布局文件中，我们可以将这个 ShapeDrawable 设置为某个 View 的背景，例如：

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="点击我"
    android:background="@drawable/rounded_rectangle_gradient" />

这样，按钮就会呈现出带有圆角和渐变效果的矩形背景。

接下来，通过代码实现。在 Java 代码中，我们可以这样创建并设置带有圆角和渐变效果的矩形背景：

GradientDrawable gradientDrawable = new GradientDrawable(
        GradientDrawable.Orientation.TOP_BOTTOM,
        new int[]{Color.RED, Color.YELLOW, Color.GREEN});
gradientDrawable.setShape(GradientDrawable.RECTANGLE);
gradientDrawable.setCornerRadius(10);
Button button = findViewById(R.id.button);
button.setBackground(gradientDrawable);

在 Kotlin 代码中，实现方式如下：

val gradientDrawable = GradientDrawable(
        GradientDrawable.Orientation.TOP_BOTTOM,
        intArrayOf(Color.RED, Color.YELLOW, Color.GREEN))
gradientDrawable.shape = GradientDrawable.RECTANGLE
gradientDrawable.cornerRadius = 10f
val button: Button = findViewById(R.id.button)
button.background = gradientDrawable

在上述代码中，首先创建了一个 GradientDrawable 对象，通过GradientDrawable.Orientation.TOP_BOTTOM指定渐变方向为从上到下，new int[]{Color.RED, Color.YELLOW, Color.GREEN}指定了渐变的颜色数组。然后设置形状为矩形，圆角半径为 10。最后将这个 GradientDrawable 设置为按钮的背景。

  1. 使用 LayerDrawable 实现复杂背景效果：使用 LayerDrawable 可以创建包含多个图层的背景，实现更加复杂的背景效果，比如叠加图片和形状。

在 XML 中实现时，同样在 res/drawable 目录下创建一个新的 XML 文件，例如 layered_background.xml，代码如下：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 底层图片 -->
    <item>
        <bitmap
            android:src="@drawable/background_image"
            android:gravity="fill" />
    </item>
    <!-- 上层形状 -->
    <item
        android:top="20dp"
        android:left="20dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#80000000" />
            <padding
                android:left="10dp"
                android:top="5dp"
                android:right="10dp"
                android:bottom="5dp" />
            <corners android:radius="5dp" />
        </shape>
    </item>
</layer-list>

在这个例子中，标签表示这是一个图层列表。第一个包含一个标签，指定了底层的背景图片为@drawable/background_image，并通过android:gravity="fill"使其填充整个区域。第二个包含一个标签，定义了一个矩形形状，设置了填充颜色为半透明黑色（#80000000），内边距和圆角半径，并且通过android:top="20dp"和android:left="20dp"将其偏移到距离顶部 20dp 和左边 20dp 的位置。

在布局文件中，将这个 LayerDrawable 设置为某个 View 的背景，例如：

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/layered_background" />

这样，ImageView 就会显示出带有底层图片和上层形状的复杂背景效果。

通过代码实现时，在 Java 中可以这样创建和设置包含多个图层的背景：

// 创建背景Drawable
Drawable backgroundDrawable = getResources().getDrawable(R.drawable.background_image);
// 创建遮罩Drawable
GradientDrawable maskDrawable = new GradientDrawable();
maskDrawable.setShape(GradientDrawable.RECTANGLE);
maskDrawable.setColor(Color.argb(128, 0, 0, 0));
maskDrawable.setCornerRadius(5);
maskDrawable.setPadding(10, 5, 10, 5);
// 创建LayerDrawable
LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{
        backgroundDrawable,
        maskDrawable
});
// 设置遮罩Drawable的位置
layerDrawable.setLayerInset(1, 20, 20, 0, 0);
ImageView imageView = findViewById(R.id.image_view);
imageView.setBackground(layerDrawable);

在 Kotlin 中，代码如下：

// 创建背景Drawable
val backgroundDrawable = resources.getDrawable(R.drawable.background_image)
// 创建遮罩Drawable
val maskDrawable = GradientDrawable()
maskDrawable.shape = GradientDrawable.RECTANGLE
maskDrawable.color = Color.argb(128, 0, 0, 0)
maskDrawable.cornerRadius = 5f
maskDrawable.setPadding(10, 5, 10, 5)
// 创建LayerDrawable
val layerDrawable = LayerDrawable(arrayOf(
        backgroundDrawable,
        maskDrawable
))
// 设置遮罩Drawable的位置
layerDrawable.setLayerInset(1, 20, 20, 0, 0)
val imageView: ImageView = findViewById(R.id.image_view)
imageView.background = layerDrawable

在上述代码中，首先分别创建了背景图片 Drawable 和遮罩形状 Drawable，然后将它们添加到 LayerDrawable 中，并通过setLayerInset方法设置了遮罩 Drawable 的位置偏移。最后将 LayerDrawable 设置为 ImageView 的背景，实现了复杂背景效果。

（二）制作动态效果

  1. 使用 AnimationDrawable 实现帧动画：在 Android 开发中，使用 AnimationDrawable 实现帧动画是一种简单而有效的方式，可以展示图片的连续播放效果。

通过 XML 创建帧动画时，首先在 res/drawable 目录下创建一个新的 XML 文件，例如 animation_list.xml，代码如下：

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/frame1"
        android:duration="100" />
    <item
        android:drawable="@drawable/frame2"
        android:duration="100" />
    <item
        android:drawable="@drawable/frame3"
        android:duration="100" />
</animation-list>

在这个 XML 文件中，标签表示这是一个帧动画列表。android:oneshot="false"表示动画循环播放，如果设置为true，则动画只播放一次。每个标签表示一帧，android:drawable指定了该帧显示的图片资源，android:duration指定了该帧的显示时长（单位为毫秒）。

在布局文件中，将这个帧动画设置为 ImageView 的 src 属性，例如：

<ImageView
    android:id="@+id/animated_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/animation_list" />

在 Java 代码中，启动帧动画的方式如下：

ImageView imageView = findViewById(R.id.animated_view);
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
animationDrawable.start();

在 Kotlin 代码中，实现方式为：

val imageView: ImageView = findViewById(R.id.animated_view)
val animationDrawable = imageView.drawable as AnimationDrawable
animationDrawable.start()

通过代码创建帧动画时，在 Java 中可以这样实现：

AnimationDrawable animationDrawable = new AnimationDrawable();
Drawable frame1 = getResources().getDrawable(R.drawable.frame1);
Drawable frame2 = getResources().getDrawable(R.drawable.frame2);
Drawable frame3 = getResources().getDrawable(R.drawable.frame3);
animationDrawable.addFrame(frame1, 100);
animationDrawable.addFrame(frame2, 100);
animationDrawable.addFrame(frame3, 100);
animationDrawable.setOneShot(false);
ImageView imageView = findViewById(R.id.animated_view);
imageView.setImageDrawable(animationDrawable);
animationDrawable.start();

在 Kotlin 中，代码如下：

val animationDrawable = AnimationDrawable()
val frame1 = resources.getDrawable(R.drawable.frame1)
val frame2 = resources.getDrawable(R.drawable.frame2)
val frame3 = resources.getDrawable(R.drawable.frame3)
animationDrawable.addFrame(frame1, 100)
animationDrawable.addFrame(frame2, 100)
animationDrawable.addFrame(frame3, 100)
animationDrawable.isOneShot = false
val imageView: ImageView = findViewById(R.id.animated_view)
imageView.setImageDrawable(animationDrawable)
animationDrawable.start()

在上述代码中，首先创建了一个 AnimationDrawable 对象，然后通过addFrame方法添加了三帧图片，并指定了每一帧的显示时长。通过setOneShot(false)设置动画循环播放。最后将 AnimationDrawable 设置为 ImageView 的图片，并启动动画。

  1. 使用 TransitionDrawable 实现淡入淡出效果：使用 TransitionDrawable 可以实现两个 Drawable 之间的淡入淡出过渡效果，为界面增添动态美感。

通过 XML 创建 TransitionDrawable 时，在 res/drawable 目录下创建一个新的 XML 文件，例如 transition.xml，代码如下：

<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/image1" />
    <item android:drawable="@drawable/image2" />
</transition>

在这个 XML 文件中，标签表示这是一个过渡 Drawable。每个标签分别指定了两个参与过渡的 Drawable 资源。

在布局文件中，将这个 TransitionDrawable 设置为 ImageView 的 src 属性，例如：

<ImageView
    android:id="@+id/transition_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/transition" />

在 Java 代码中，实现淡入淡出效果的方式如下：

ImageView imageView = findViewById(R.id.transition_view);
TransitionDrawable transitionDrawable = (TransitionDrawable) imageView.getDrawable();
// 开始淡入淡出过渡，持续时间为1000毫秒
transitionDrawable.startTransition(1000);

在 Kotlin 代码中，实现方式为：

val imageView: ImageView = findViewById(R.id.transition_view)
val transitionDrawable = imageView.drawable as TransitionDrawable
// 开始淡入淡出过渡，持续时间为1000毫秒
transitionDrawable.startTransition(1000)

通过代码创建 TransitionDrawable 时，在 Java 中可以这样实现：

Drawable drawable1 = getResources().getDrawable(R.drawable.image1);
Drawable drawable2 = getResources().getDrawable(R.drawable.image2);
TransitionDrawable transitionDrawable = new TransitionDrawable(new Drawable[]{drawable1, drawable2});
ImageView imageView = findViewById(R.id.transition_view);
imageView.setImageDrawable(transitionDrawable);
// 开始淡入淡出过渡，持续时间为1000毫秒
transitionDrawable.startTransition(1000);

在 Kotlin 中，代码如下：

val drawable1 = resources.getDrawable(R.drawable.image1)
val drawable2 = resources.getDrawable(R.drawable.image2)
val transitionDrawable = TransitionDrawable(arrayOf(drawable1, drawable2))
val imageView: ImageView = findViewById(R.id.transition_view)
imageView.setImageDrawable(transitionDrawable)
// 开始淡入淡出过渡，持续时间为1000毫秒
transitionDrawable.startTransition(1000)

在上述代码中，首先创建了两个 Drawable 对象，然后将它们传递给 TransitionDrawable 的构造函数创建 TransitionDrawable 对象。将 TransitionDrawable 设置为 ImageView 的图片后，通过startTransition方法开始淡入淡出过渡，并指定过渡持续时间为 1000 毫秒。

（三）优化应用性能

  1. 合理使用 Drawable 资源：在 Android 应用开发中，合理使用 Drawable 资源是优化应用性能的关键环节。不合理地使用大尺寸图片和复杂的 Drawable 会导致内存占用过高，进而影响应用的流畅性和响应速度。

大尺寸图片会占用大量的内存空间。当我们在应用中加载一张分辨率很高的图片作为 Drawable 时，如果这张图片的尺寸远远超过了实际显示的区域，就会造成内存的浪费。在一个只需要显示 100x100 像素大小图片的 ImageView 中，使用了一张 2000x2000 像素的图片，那么这张图片在内存中占用的空间会远远超过实际所需，可能会导致应用在加载大量图片时出现内存不足的情况，甚至引发应用崩溃。

复杂的 Drawable，如包含多层嵌套、复杂渐变和大量路径的 ShapeDrawable 或 LayerDrawable，在绘制时会消耗更多的 CPU 资源。因为系统在绘制这些 Drawable 时，需要进行更多的计算和处理。一个包含多层半透明图层叠加的 LayerDrawable，在绘制时需要对每个图层进行混合计算，这会增加绘制的时间和 CPU 的负载，从而导致界面卡顿。

为了避免这些问题，我们可以采取以下措施：

  • 图片压缩：在将图片资源添加到项目中之前，使用图像编辑工具对图片进行压缩，降低图片的分辨率和文件大小，同时保持图片的质量在可接受范围内。可以使用工具将图片的分辨率调整为与实际显示尺寸相匹配，避免不必要的高清图片加载。
  • 选择合适的 Drawable 类型：根据实际需求选择合适的 Drawable 类型。如果只是需要显示简单的颜色或形状，优先使用 ShapeDrawable，而不是 BitmapDrawable，因为 ShapeDrawable 的绘制过程相对简单，占用资源较少。在绘制一个纯色背景的矩形时，使用 ShapeDrawable 比使用 BitmapDrawable 更加高效。
  • 使用矢量图形：对于一些简单的图标和图形，可以使用矢量图形（如 SVG），并通过 VectorDrawable 在 Android 中显示。矢量图形不会因为缩放而失真，并且占用的内存空间较小，因为它们是基于数学公式来描述图形的，而不是像位图那样存储每个像素的信息。
  1. 缓存 Drawable 对象：缓存 Drawable 对象是提高应用性能的有效手段之一，通过软引用等方式缓存 Drawable 对象，可以减少资源的重复加载和创建，提高资源复用率。

在 Android 中，当我们频繁地获取和使用 Drawable 对象时，如果每次都重新加载和创建，会消耗大量的时间和资源。在一个列表视图中，每个列表项都需要显示一个相同的图标 Drawable，如果每次绘制列表项时都重新加载这个图标 Drawable，不仅会增加加载时间，还会占用更多的内存。

为了解决这个问题，我们可以使用软引用（SoftReference）来缓存 Drawable 对象。软引用是一种相对弱引用的方式，它允许对象在内存不足时被垃圾回收器回收，但在内存充足时可以继续使用。这样，我们就可以在需要使用 Drawable 对象时，先从缓存中查找，如果缓存中存在，则直接使用，避免了重复加载和创建。

以下是使用 Java 实现 Drawable 对象缓存的示例代码：

import java.lang.ref.SoftReference;
import java.util.HashMap;
import java.util.Map;
public class DrawableCache {
    private static DrawableCache instance;
    private Map<Integer, SoftReference<Drawable>> cache;
    private DrawableCache() {
        cache = new HashMap<>();
    }
    public static DrawableCache getInstance() {
        if (instance == null) {
            instance = new DrawableCache();
        }
        return instance;
    }
    public Drawable getDrawable(int drawableId, Resources resources) {
        SoftReference<Drawable> softReference = cache.get(drawableId);
        if (softReference!= null && softReference.get()!= null) {
            return softReference.get();
        } else {
            Drawable drawable = resources.getDrawable(drawableId);
            cache.put(drawableId, new SoftReference<>(drawable));
            return drawable;
        }
    }
}

五、Drawable 使用过程中的常见问题与解决方案

（一）资源引用错误

  1. 问题描述：在引用 Drawable 资源时出现找不到资源的错误，这是开发过程中较为常见的问题。例如，在 XML 布局文件中使用android:src="@drawable/unknown_image"引用一个名为unknown_image的 Drawable 资源，或者在 Java 或 Kotlin 代码中使用getResources().getDrawable(R.drawable.unknown_image)获取资源时，编译器提示找不到该资源，导致应用在运行时出现异常，界面无法正确显示相关内容。这种错误通常是由于资源路径错误、文件名拼写错误或者资源未正确添加到项目中引起的。
  1. 解决方案：遇到这种问题时，首先要仔细检查资源路径是否正确。确保 Drawable 资源文件位于res/drawable目录下，如果项目针对不同屏幕密度提供了多个版本的资源，还要检查是否将资源放置在了对应的drawable-hdpi、drawable-xhdpi等目录中。要确认文件名是否符合 Android 的命名规范，只能包含小写字母、数字和下划线，且不能以数字开头。如果文件名拼写错误，需要及时更正。还需要检查资源是否已正确添加到项目中。在 Android Studio 中，可以通过右键点击res目录，选择New -> Android Resource Directory，确保drawable目录存在且资源文件在其中。如果是从外部导入的资源，要确保导入过程没有出现错误。如果问题仍然存在，可以尝试清理项目并重新构建，点击菜单栏中的Build -> Clean Project，然后再点击Build -> Rebuild Project，这有时可以解决因缓存问题导致的资源找不到错误。

（二）图片显示异常

  1. 问题描述：图片显示异常也是使用 Drawable 时经常遇到的问题，表现为图片显示模糊、失真或出现拉伸问题。当将一张分辨率较低的图片设置为较大尺寸的 ImageView 的背景时，图片会被拉伸以适应 ImageView 的大小，从而导致图片模糊、失真，细节丢失，图像质量明显下降。在一些情况下，图片可能会出现不完整显示或显示比例失调的情况，影响界面的美观和用户体验。
  1. 解决方案：针对图片显示模糊、失真的问题，可以通过调整图片的属性来改善。开启抗锯齿功能，在 BitmapDrawable 的 XML 属性中设置android:antialias=“true”，或者在代码中通过bitmapDrawable.setAntiAlias(true)来实现，这样可以使图片边缘更加平滑，减少锯齿现象。开启图像抖动处理，设置android:dither=“true”（XML）或bitmapDrawable.setDither(true)（代码），当图片的颜色深度与显示屏幕的像素配置不匹配时，抖动可以使图片在低色彩显示环境下仍能保持较好的视觉效果，减少颜色失真。合理设置滤镜，设置android:filter=“true”（XML）或bitmapDrawable.setFilterBitmap(true)（代码），在图片进行收缩或拉伸操作时，滤镜可以使图片看起来更加平滑，避免出现锯齿状。对于图片拉伸问题，可以根据实际需求选择合适的图片格式和尺寸。尽量使用高分辨率的图片，以确保在放大显示时仍能保持清晰的图像质量。在加载图片时，可以根据 ImageView 的大小对图片进行适当的缩放，避免过度拉伸。使用Bitmap.createScaledBitmap方法，根据目标尺寸创建一个新的缩放后的 Bitmap，然后再将其设置为 ImageView 的显示内容。还可以通过设置 ImageView 的scaleType属性来控制图片的显示方式，如CENTER_CROP、FIT_CENTER等，以达到最佳的显示效果。

（三）内存占用过高

  1. 问题描述：大量使用 Drawable，尤其是包含大尺寸图片的 Drawable，会导致内存占用过高，进而引发性能问题。在一个图片浏览应用中，如果一次性加载大量高分辨率的图片作为 Drawable 显示在界面上，随着图片数量的增加，内存占用会不断上升，当内存占用超过系统限制时，可能会导致应用崩溃，出现OutOfMemoryError异常。内存占用过高还会使应用的响应速度变慢，界面卡顿，影响用户体验。
  1. 解决方案：为了优化 Drawable 的使用，减少内存占用，可以采取以下措施。首先，对 Drawable 资源进行缓存。使用软引用（SoftReference）或弱引用（WeakReference）来缓存 Drawable 对象，如前面提到的DrawableCache类，这样在内存不足时，缓存的 Drawable 对象可以被垃圾回收器回收，避免内存泄漏。在不再使用 Drawable 资源时，及时回收资源。在 Activity 的onDestroy方法中，将不再使用的 Drawable 对象设置为null，以便垃圾回收器能够及时回收其占用的内存。还可以使用高效的图片加载库，如 Glide、Picasso 等，这些库提供了强大的图片加载和缓存功能，能够自动根据 ImageView 的大小和设备的内存情况对图片进行优化加载，有效减少内存占用。它们还支持图片的异步加载，避免在主线程中进行耗时的图片加载操作，从而提高应用的响应速度和流畅性。

六、Drawable 的拓展应用

随着移动技术的飞速发展，Drawable 与矢量图形、动画技术等的融合呈现出愈发紧密的趋势，为 Android 应用开发带来了更多的创新和可能性。

矢量图形在 Drawable 中的应用日益广泛。传统的位图 Drawable 在缩放时容易出现失真现象，而矢量图形 Drawable，如 VectorDrawable，基于数学公式描述图形，具有无损缩放的特性，能够在不同分辨率的设备上保持清晰的显示效果。这使得应用在适配各种屏幕尺寸和密度时更加轻松，有效减少了因图片缩放导致的质量损失。在图标设计中，使用 VectorDrawable 可以创建出简洁、精致且可灵活缩放的图标，无论在高清大屏还是小尺寸屏幕上，都能呈现出完美的视觉效果。矢量图形 Drawable 还能显著减小应用的包体大小，因为它以文本形式存储图形信息，相比位图占用的存储空间更小。这对于注重应用体积和性能的开发者来说，是一个极具吸引力的优势。

动画技术与 Drawable 的结合也为应用界面增添了更多动态和交互性。AnimatedVectorDrawable 允许对矢量图形进行动画处理，通过定义图形的变化逻辑来创建精细且高效的 UI 动画。在一个天气应用中，我们可以使用 AnimatedVectorDrawable 实现天气图标的动态变化，随着天气状况的改变，太阳图标可以逐渐变得更加灿烂，云朵图标可以飘动，雨滴图标可以落下，为用户带来更加生动的视觉体验。这种动画效果不仅能增强用户与应用的互动感，还能使应用在众多同类产品中脱颖而出。

属性动画与 Drawable 的结合也为实现复杂的动画效果提供了强大的支持。通过属性动画，我们可以对 Drawable 的各种属性，如颜色、透明度、大小等进行动态变化，从而创建出更加丰富多样的动画效果。在一个音乐播放应用中，我们可以使用属性动画让播放按钮的背景颜色随着音乐节奏闪烁，或者让暂停按钮的图标在按下时逐渐变大，释放时逐渐变小，为用户带来更加直观和有趣的交互体验。

七、总结

Drawable 作为 Android 开发中构建用户界面的重要工具，涵盖了丰富的知识和多样的应用场景。它的分类广泛，包括 BitmapDrawable、ShapeDrawable、LayerDrawable、StateListDrawable 等多种类型，每种类型都有其独特的功能和用途。

BitmapDrawable 用于包装位图，通过一系列属性如src、antialias、dither、filter、gravity、mipMap、tileMode等，可以实现位图的各种显示效果，如抗锯齿、抖动处理、滤镜应用、平铺模式设置等。ShapeDrawable 则专注于通过颜色构造图形，利用shape、corners、gradient、solid、stroke、padding、size等属性和子节点，能够创建出矩形、圆形、线条、环形等各种形状，并为其添加填充颜色、边框、渐变等效果。LayerDrawable 允许将多个 Drawable 按照层次顺序叠加，通过标签的属性设置每个 Drawable 的位置和大小，从而实现复杂的图片叠加效果。StateListDrawable 根据 View 的状态选择不同的 Drawable，通过标签和标签的android:state_*属性定义 View 在不同状态下的显示效果，增强了用户与界面的交互性。

在实际应用中，我们可以使用 Drawable 创建自定义背景，如使用 ShapeDrawable 实现带有圆角和渐变效果的矩形背景，或者使用 LayerDrawable 实现包含多个图层的复杂背景效果。还可以利用 Drawable 制作动态效果，如使用 AnimationDrawable 实现帧动画，通过一系列图片的连续播放展示生动的动画效果；使用 TransitionDrawable 实现两个 Drawable 之间的淡入淡出过渡效果，为界面增添动态美感。

在使用 Drawable 的过程中，也会遇到一些常见问题，如资源引用错误，可能是由于资源路径错误、文件名拼写错误或资源未正确添加到项目中导致的，需要仔细检查资源路径、文件名和项目结构来解决；图片显示异常，表现为图片模糊、失真或拉伸问题，可以通过调整图片属性，如开启抗锯齿、抖动处理、滤镜等功能，以及选择合适的图片格式和尺寸，设置 ImageView 的scaleType属性来解决；内存占用过高，通常是由于大量使用包含大尺寸图片的 Drawable 导致的，可通过缓存 Drawable 对象、及时回收资源和使用高效的图片加载库等方法来优化。


http://www.kler.cn/a/572613.html

相关文章：

  • 基于Asp.net的高校一卡通管理系统
  • Bamos压力和温度分布测量传感器：高性能柔性材料与分层设计助力精准电池监测
  • 深入浅出：Vue项目中Element UI的完整使用指南
  • PHP：动态网站开发的强大工具
  • uniapp-x md5插件
  • HTTP请求报文和HTTP响应报文
  • 大模型——股票分析AI工具开发教程
  • 成都树莓集团：数字产业生态的构建者与引领者
  • 从0到1构建AI深度学习视频分析系统--基于YOLO 目标检测的动作序列检查系统：（1）视频信息的获取与转发
  • Free Auto Clicker - 在任意位置自动重复鼠标点击
  • 最新的PyCharm及AI助手的安装和试用
  • 基于多种优化算法改进极限学习机(ELM)的数据回归预测(多输入多输出)
  • cursor使用经验分享（java后端服务开发向）
  • docker 离线安装redis（离线）
  • 18.分布式任务调度
  • AI音乐网站：用科技的力量，唤醒你内心的音乐之魂
  • 面试题：什么是Seata?
  • linux centos8 安装redis 卸载redis
  • NotePad++快捷键
  • VS Code C++ 开发环境配置