23-<shape> 标签的用途

<shape> 标签的用途

• 定义形状：可以创建矩形、椭圆、线条或环形。

• 设置填充颜色：可以为形状设置单一颜色的填充。

• 设置边框：可以为形状添加边框，包括边框的颜色和宽度。

• 设置圆角：特别是对于矩形，可以定义圆角半径。

• 设置渐变：可以为形状设置渐变颜色。

• 设置内外边距：可以为形状设置内边距和外边距。

<shape> 标签的常见子元素

1. <solid>：定义形状的填充颜色。

2. <stroke>：定义形状的边框，包括颜色和宽度。

3. <corners>：定义形状的圆角半径。

4. <padding>：定义形状的内边距。

5. <gradient>：定义形状的渐变填充。

6. <size>：定义形状的宽度和高度（通常用于环形）。

示例和详细解释

示例 1：定义一个矩形，带有填充颜色和圆角

xml

Copy

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

    <!-- 背景色 -->
    <solid android:color="#F9FCFF" />

    <!-- 圆角半径 -->
    <corners android:radius="16dp" />
    
    <!-- 边框 -->
    <stroke android:width="2dp" android:color="#FF0000" />

</shape>

在这个示例中：

• <solid>：设置形状的填充颜色为浅蓝色（#F9FCFF）。

• <corners>：设置形状的圆角半径为 16dp。

• <stroke>：设置形状的边框宽度为 2dp，颜色为红色（#FF0000）。

示例 2：定义一个带有渐变填充的矩形

xml

Copy

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

    <!-- 渐变填充 -->
    <gradient
        android:startColor="#FFEB3B"
        android:endColor="#FFC107"
        android:angle="45" />

    <!-- 圆角半径 -->
    <corners android:radius="16dp" />
    
    <!-- 边框 -->
    <stroke android:width="2dp" android:color="#FF9800" />

</shape>

在这个示例中：

• <gradient>：设置形状的渐变填充，从黄色（#FFEB3B）过渡到橙色（#FFC107），角度为 45 度。

• <corners>：设置形状的圆角半径为 16dp。

• <stroke>：设置形状的边框宽度为 2dp，颜色为橙色（#FF9800）。

示例 3：定义一个椭圆形

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

    <!-- 背景色 -->
    <solid android:color="#4CAF50" />

    <!-- 边框 -->
    <stroke android:width="4dp" android:color="#388E3C" />

</shape>

在这个示例中：

• android:shape="oval"：定义形状为椭圆形。
• <solid>：设置形状的填充颜色为绿色（#4CAF50）。
• <stroke>：设置形状的边框宽度为 4dp，颜色为深绿色（#388E3C）。

使用 <shape> 标签的场景

• 自定义按钮背景：可以为按钮设置自定义背景，包括圆角、边框和颜色。
• 视图背景：可以为任何视图设置背景，例如 TextView、LinearLayout 等。
• 分隔线：可以创建自定义的分隔线，设置高度、颜色和边距。
• 圆形或椭圆形图标：可以创建圆形或椭圆形的背景，用作图标的背景。

如何使用 <shape> 标签

将定义好的 shape drawable 文件放置在 res/drawable 目录中，并在布局文件中引用它。 亲测如果放到 res/drawable 目录报错的话，直接放到 res/xml 目录文件下使用正常

示例：在布局文件中引用 shape drawable

<FrameLayout
    android:layout_width="455dp"
    android:layout_height="320dp"
    android:layout_marginStart="152dp"
    android:layout_marginTop="48dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:background="@drawable/rounded_background">

    <!-- 其他子视图 -->

</FrameLayout>

在这个示例中，FrameLayout 使用了 @drawable/rounded_background 作为背景，这个背景就是我们之前定义的 shape drawable。

总结

• <shape> 标签：用于定义形状和样式，常用于创建自定义背景、边框和装饰性元素。
• 常见子元素：包括 <solid>、<stroke>、<corners>、<padding> 和 <gradient>。
• 使用场景：自定义按钮背景、视图背景、分隔线、圆形或椭圆形图标等。