如何在Android中创建和自定义圆角矩形？

Android圆角矩形

一、

在现代Android应用开发中，圆角矩形是一种常见的UI元素，它不仅美观，还能提升用户体验，本文将详细介绍如何在Android中实现圆角矩形，并探讨几种不同的方法。

二、使用Vector Drawable实现圆角矩形

1. 创建Vector Drawable文件

我们需要在res/drawable目录下创建一个XML文件，例如rounded_rectangle.xml，用于定义圆角矩形的向量图形。

<!-res/drawable/rounded_rectangle.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/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>

在布局文件中引用该图形

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

<!-res/layout/activity_main.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/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>

运行项目以查看效果

确保你的设备连线正常或者使用Android模拟器，点击运行按钮，查看所创建的圆角矩形效果，它将会居中显示在屏幕上。

通过以上步骤，我们成功创建了一个圆角矩形的Android Vector Drawable，并在布局文件中引用了它，向量图形不仅能提高图形的清晰度且在不同分辨率设备中表现一致，希望你在之后的开发中多加使用和实践。

三、使用Shape Drawable实现圆角矩形

1. 创建Shape Drawable文件

在res/drawable目录下创建一个shape.xml文件，用于定义圆角矩形的形状。

<!-res/drawable/shape.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FF6200EE"/>  <!-填充颜色 -->
    <corners android:radius="15dp"/>   <!-圆角半径 -->
</shape>

在布局文件中引用该形状

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

<!-res/layout/activity_main.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/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/shape"  <!-引用刚刚创建的Shapeable -->
        android:layout_centerInParent="true"/>
</RelativeLayout>

运行项目以查看效果

确保你的设备连线正常或者使用Android模拟器，点击运行按钮，查看所创建的圆角矩形效果，它将会居中显示在屏幕上。

通过以上步骤，我们成功创建了一个圆角矩形的Android Shape Drawable，并在布局文件中引用了它，这种方法简单直接，适合快速实现圆角矩形效果。

四、使用Glide库实现图片圆角处理

添加Glide依赖

在你的build.gradle文件中添加Glide依赖：

implementation 'com.github.bumptech.glide:glide:4.15.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.15.1'

加载图片并设置圆角

在你的Activity或Fragment中使用Glide加载图片，并通过RequestOptions设置圆角：

import com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.bitmap_recycle.RoundedCorners;
import com.bumptech.glide.request.RequestOptions;
import android.os.Bundle;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView imageView = findViewById(R.id.image_view);
        RequestOptions requestOptions = new RequestOptions()
                .transform(new RoundedCorners(16)); // 设置圆角半径为16dp
        Glide.with(this)
                .load(R.drawable.icon_cat_w) // 替换为你的图片资源
                .apply(requestOptions)
                .into(imageView);
    }}

运行项目以查看效果

确保你的设备连线正常或者使用Android模拟器，点击运行按钮，查看所创建的圆角矩形效果，图片将以圆角形式显示。

通过以上步骤，我们成功使用Glide库实现了图片的圆角处理，这种方法非常适合需要动态加载和显示图片的场景。

五、自定义View实现圆角矩形

创建自定义View类

创建一个继承自View的自定义类，例如RoundRectView.java：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.Nullable;
public class RoundRectView extends View {
    private float cornerRadius = 15f; // 默认圆角半径
    private Paint paint = new Paint();
    public RoundRectView(Context context) {
        super(context);
        init();
    }
    public RoundRectView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    public RoundRectView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    private void init() {
        paint.setAntiAlias(true); // 抗锯齿
        paint.setColor(getResources().getColor(android.R.color.holo_blue_light)); // 填充颜色
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        RectF rect = new RectF(getPaddingLeft(), getPaddingTop(), getWidth() getPaddingRight(), getHeight() getPaddingBottom());
        canvas.drawRoundRect(rect, cornerRadius, cornerRadius, paint); // 绘制圆角矩形
    }}

在布局文件中引用自定义View

打开你要使用的布局文件（例如activity_main.xml），并添加自定义View：

<!-res/layout/activity_main.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-引用自定义View -->
    <com.example.yourpackagename.RoundRectView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>
</RelativeLayout>

运行项目以查看效果

确保你的设备连线正常或者使用Android模拟器，点击运行按钮，查看所创建的圆角矩形效果，圆角矩形将以自定义View的形式显示。

通过以上步骤，我们成功创建了一个自定义的圆角矩形View，并在布局文件中引用了它，这种方法灵活度高，适合需要高度定制化的场景。

六、使用CardView实现圆角矩形卡片

添加CardView依赖

CardView是Android Support Library的一部分，通常已经包含在项目中，如果没有，可以在build.gradle文件中添加依赖：

implementation 'androidx.cardview:cardview:1.0.0'

在布局文件中使用CardView

打开你要使用的布局文件（例如activity_main.xml），并添加CardView：

<!-res/layout/activity_main.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-CardView -->
    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:cardCornerRadius="15dp" <!-设置圆角半径 -->
        app:cardElevation="4dp"> <!-设置阴影 -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="这是一个圆角矩形卡片"
            android:padding="16dp" />
    </androidx.cardview.widget.CardView>
</RelativeLayout>

运行项目以查看效果

确保你的设备连线正常或者使用Android模拟器，点击运行按钮，查看所创建的圆角矩形卡片效果，卡片将以圆角形式显示，并且有阴影效果。

通过以上步骤，我们成功使用CardView实现了一个带有圆角和阴影的矩形卡片，这种方法简单易用，适合快速实现卡片布局。