Android vector 圆角矩形

AwakeTiger

于 2024-08-15 04:07:10 发布

阅读量31

点赞数

文章标签： android

Android Vector 圆角矩形的实现

在 Android 开发中，使用向量图形（Vector Drawable）来创建可缩放且占用较少内存的图形资源正变得越来越流行。今天，我们将学习如何实现一个简单的圆角矩形的向量图。

实现流程

首先，让我们了解整个实现过程。以下是实现圆角矩形的步骤：

步骤	说明
1	创建 Vector Drawable 文件
2	在文件中定义圆角矩形图形
3	在布局中引用该图形
4	运行项目以查看效果

下面是该流程的可视化表示（使用 Mermaid 语法）：

步骤详细说明

1. 创建 Vector Drawable 文件

在 Android Studio 中，右键单击 res/drawable 文件夹，选择 New -> Vector Asset。创建一个新的向量图文件并命名（例如 rounded_rectangle.xml）。

<!-- res/drawable/rounded_rectangle.xml -->
<vector xmlns:android="
    android:width="200dp"
    android:height="100dp"
    android:viewportWidth="200"
    android:viewportHeight="100">

    <!-- 定义一个圆角矩形 -->
    <path
        android:fillColor="#FF6200EE"  <!-- 填充颜色 -->
        android:pathData="M 10,0 
                          L 190,0 
                          C 200,0 200,10 200,10 
                          L 200,90 
                          C 200,100 190,100 190,100 
                          L 10,100 
                          C 0,100 0,90 0,90 
                          L 0,10 
                          C 0,0 10,0 10,0 Z"/>
</vector>

android:fillColor: 设置矩形的填充颜色，这里我们使用了 #FF6200EE 作为底色。
android:pathData: 使用路径数据（Path Data）描述圆角矩形的形状。M 表示移动到点，L 表示线条，C 表示三次贝塞尔曲线。

2. 在布局中引用该图形

打开你要使用的布局文件（例如 activity_main.xml），并在你需要显示圆角矩形的地方添加以下代码：

<!-- res/layout/activity_main.xml -->
<RelativeLayout xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 引用向量图 -->
    <ImageView
        android:id="@+id/rounded_rectangle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/rounded_rectangle"  <!-- 引用刚刚创建的 Drawable -->
        android:layout_centerInParent="true"/>
</RelativeLayout>