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实现了一个带有圆角和阴影的矩形卡片，这种方法简单易用，适合快速实现卡片布局。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1268384.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复