android shape 背景阴影

原创

mob64ca12e2442a 2023-12-07 08:02:50 ©著作权

文章标签 Android XML UI 文章分类 Android 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e2442a的原创作品，请联系作者获取转载授权，否则将追究法律责任

Android Shape 背景阴影

引言

在 Android 开发中，我们经常需要为 UI 元素添加阴影效果以提升用户体验。Android 提供了多种方式来实现这一效果，其中之一就是使用 Shape Drawable 来定义背景并添加阴影效果。本文将介绍如何使用 Shape Drawable 创建具有背景阴影的 UI 元素，并提供相关的代码示例。

Shape Drawable 概述

Shape Drawable 是 Android 中的一种可绘制对象，它允许我们定义各种形状的背景，如矩形、圆角矩形、椭圆等。通过 Shape Drawable，我们可以自定义 UI 元素的外观，包括颜色、边框、圆角等。

在 Android 中，Shape Drawable 是通过 XML 文件来定义的。我们可以在 XML 文件中设置不同的属性来创建不同的形状和样式。

Shape Drawable 创建

首先，我们需要创建一个 XML 文件来定义我们想要的形状和样式。以下是一个示例的 XML 文件：

<shape xmlns:android="
    <solid android:color="#FFFFFF"/> <!-- 设置填充颜色 -->
    <corners android:radius="8dp"/> <!-- 设置圆角半径 -->
    <stroke
        android:width="2dp"
        android:color="#000000"/> <!-- 设置边框宽度和颜色 -->
</shape>

以上 XML 文件定义了一个矩形形状，具有白色填充颜色、8dp 的圆角和黑色边框。

要将此 Shape Drawable 应用于 UI 元素的背景，我们只需将其设置为元素的背景属性即可。以下是一个示例代码片段，演示如何将 Shape Drawable 应用于一个 TextView 的背景：

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/my_shape_drawable"
    android:text="Hello, World!"/>

在上面的示例中，@drawable/my_shape_drawable 引用了我们之前创建的 Shape Drawable。

添加阴影效果

要为 Shape Drawable 添加阴影效果，我们可以使用 elevation 属性。elevation 属性是 Android 5.0（API 级别 21）引入的一个特性，用于在 UI 元素周围创建阴影效果。

以下是一个示例的 Shape Drawable XML 文件，其中添加了阴影效果：

<shape xmlns:android="
    <solid android:color="#FFFFFF"/>
    <corners android:radius="8dp"/>
    <stroke
        android:width="2dp"
        android:color="#000000"/>
    <padding
        android:top="8dp"
        android:left="8dp"
        android:right="8dp"
        android:bottom="8dp"/> <!-- 添加内边距，以便阴影可见 -->
</shape>

注意到我们添加了一个 padding 属性，以便使阴影可见。然后，我们可以在应用 Shape Drawable 的视图上设置 elevation 属性来实现阴影效果：

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/my_shape_drawable"
    android:elevation="8dp"
    android:text="Hello, World!"/>

通过设置 elevation 属性为 8dp，我们在 TextView 周围创建了一个 8dp 的阴影效果。