android xml左上右上圆角

原创

mob64ca12df277e 2024-09-19 07:56:06 ©著作权

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

实现 Android XML 左上和右上圆角的步骤

在 Android 开发中，常常需要使用圆角来提升界面的美观。今天，我们将一起学习如何在 XML 中实现左上和右上的圆角效果。下面将为你展示整个流程，代码示例以及相关的类图。

步骤概览

首先，我们需要了解实现这一目标的基本步骤，可以通过以下表格进行整理：

步骤	描述
1	创建一个 drawable 资源文件来定义圆角效果
2	在 XML 布局中引用刚刚创建的 drawable
3	自定义边框（如果需要的话）

flowchart TD
    A[创建 drawable 资源文件] --> B[在 XML 布局中引用 drawable]
    B --> C[自定义边框（可选）]

步骤详解

1. 创建 Drawable 资源文件

首先，在 res/drawable 目录下创建一个 XML 文件，命名为 rounded_corners.xml。在这个文件中，我们将定义一个形状并设置圆角。

代码示例：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="
    android:shape="rectangle">
    
    <!-- 设置填充颜色，可以根据需要自定义 -->
    <solid android:color="#FFFFFF"/> 
    
    <!-- 设置边角的圆度，分别设置左上和右上角 -->
    <corners 
        android:topLeftRadius="20dp" 
        android:topRightRadius="20dp"/>
</shape>

代码解释：

solid 标签用于填充颜色，这里我们使用白色作为示例。
corners 标签用于定义圆角，android:topLeftRadius 和 android:topRightRadius 分别为左上和右上角的圆角半径。

2. 在 XML 布局中引用 Drawable

接下来，打开你的布局 XML 文件（如 activity_main.xml），并在需要设置圆角的视图中引用你刚刚创建的 drawable 资源。

代码示例：

<LinearLayout
    xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_corners" <!-- 引用 drawable 文件 -->
        android:padding="16dp"
        android:text="Hello, World!"
        android:textColor="#000000"/>
</LinearLayout>

代码解释：

android:background="@drawable/rounded_corners" 用于设置视图的背景为我们刚刚创建的圆角 drawable。

3. 自定义边框（可选）

如果你还想为这个视图添加边框，可以修改 rounded_corners.xml 来实现。

代码示例：

<layer-list xmlns:android="

    <!-- 边框 -->
    <item>
        <shape>
            <solid android:color="#FF0000"/> <!-- 边框颜色 -->
            <corners 
                android:topLeftRadius="20dp" 
                android:topRightRadius="20dp"/>
        </shape>
    </item>

    <!-- 内容 -->
    <item android:top="4dp" android:left="4dp" android:right="4dp" android:bottom="4dp">
        <shape>
            <solid android:color="#FFFFFF"/> <!-- 内容背景颜色 -->
            <corners 
                android:topLeftRadius="20dp" 
                android:topRightRadius="20dp"/>
        </shape>
    </item>
</layer-list>

代码解释：

使用 <layer-list> 可以叠加多个图层，第一个 item 是边框，第二个 item 是内容部分。

类图

接下来，我们展示一个类图，表示各个组件的关系。

classDiagram
    class Drawable{
      +setColor()
      +setRadius()
    }
    class Shape{
      +setShape()
    }
    class LayerList{
      +addItem()
    }
    
    Drawable <|-- Shape
    Drawable <|-- LayerList