如何在Android开发中实现圆角效果？

Android圆角效果

在Android开发中，圆角效果是一种常见且重要的UI设计元素，通过合理使用圆角效果，可以使应用程序的用户界面更加美观和友好，本文将详细介绍几种实现Android圆角效果的方法，并通过示例代码展示其具体应用。

一、使用Shape属性实现圆角效果

1. 全局圆角

在res/drawable文件夹下定义一个shape文件，如shape_round.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="20dp"/>
    <solid android:color="#ffff00"/>
</shape>

然后在布局文件中引用这个shape文件作为View的背景：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="50dp"
        android:text="Hello World"
        android:background="@drawable/shape_round"/>
</RelativeLayout>

代码实现了一个带有全局圆角的TextView。

2. 单独设置每个角的圆角

如果需要单独设置每个角的圆角，可以使用以下方法：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#ff0000"/>
    <stroke
        android:width="1dp"
        android:color="#ff0000"/>
    <corners
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp"
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"/>
</shape>

需要注意的是，如果只设置特定角的圆角半径，而其他角不设置，则所有角都会应用该半径。

二、使用ViewOutlineProvider实现圆角效果

ViewOutlineProvider是Android 5.0引入的一个类，可以用来定义视图的轮廓（outline），通过它可以实现圆角矩形、椭圆、圆形等效果。

fun View.clipToRoundView(type: Int = RoundImgView.SHAPE_ROUND_RECT) {
    if (Build.VERSION.SDK_INT >= 21) {
        outlineProvider = object : ViewOutlineProvider() {
            override fun getOutline(view: View?, outline: Outline?) {
                if (view == null) return
                if (type == RoundImgView.SHAPE_ROUND_RECT) {
                    outline?.setRoundRect(0, 0, view.width, view.height, 15.dp2px().toFloat())
                } else {
                    outline?.setOval(0, 0, view.width, view.height)
                }
            }
        }
        clipToOutline = true
    }
}

在Activity中使用：

private val mIvTarget: AppCompatImageView by id(R.id.iv_round_img)
private val mIvTarget2: AppCompatImageView by id(R.id.iv_round_img2)
val bitmap = BitmapFactory.decodeResource(resources, R.drawable.icon_cat_w)
mIvTarget.clipToRoundView(RoundImgView.SHAPE_ROUND_RECT)
mIvTarget.setImageBitmap(bitmap)
mIvTarget2.clipToRoundView(RoundImgView.SHAPE_CIRCLE)
mIvTarget2.setImageBitmap(bitmap)

这种方法不需要新建文件，直接在Java代码中配置，但不能单独设置某个角。

三、使用Glide加载图片并处理圆角效果

Glide是一个强大的图片加载库，通过它的RequestOptions可以轻松实现图片的圆角处理。

Glide.with(this)
     .load(R.drawable.icon_cat_w)
     .transform(RoundedCorners(16.dp2px()))
     .into(mIvTarget)

如果图片设置了CenterCrop，可能会导致圆角效果被CenterCrop操作覆盖，最终看不到圆角效果，可以通过以下方式处理：

val requestOptions = RequestOptions().transform(CenterCrop(), RoundedCorners(16.dp2px()))
Glide.with(this)
     .load(R.drawable.icon_cat_w)
     .apply(requestOptions)
     .into(mIvTarget)

这种方法不需要新建文件，需要在Java代码中配置，可以单独设置某个角。

四、使用Canvas.clipPath()实现圆角效果

自定义ImageView并重写onDraw()方法，通过Canvas.clipPath()实现图片的圆角矩形和圆形效果。

class RoundImgView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AppCompatImageView(context, attrs, defStyleAttr) {
    private val path = Path()
    private var cornerRadius = 10.dp2px().toFloat()
    private var mStrokeWidth = 10.dp2px().toFloat()
    private var mShapeType = SHAPE_ROUND_RECT
    private var isHasStroke = false //是否设置描边
    init {
        // 初始化代码，可以在此读取自定义属性
    }
    override fun onDraw(canvas: Canvas) {
        val rect = canvas.clipBounds
        val radius = min(rect.width(), rect.height()) / 2f
        path.addRoundRect(rect.left.toFloat(), rect.top.toFloat(), rect.right.toFloat(), rect.bottom.toFloat(), floatArrayOf(cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius), Path.Direction.CW)
        canvas.clipPath(path)
        super.onDraw(canvas)
    }
    fun setCornerRadius(radius: Float) {
        cornerRadius = radius
        invalidate()
    }
}

在布局文件中使用自定义的ImageView：

<com.example.yourpackage.RoundedImageView
    android:id="@+id/rounded_image_view"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:scaleType="centerCrop"
    android:src="@drawable/your_image"/>

在代码中动态设置圆角：

val roundedImageView = findViewById<RoundedImageView>(R.id.rounded_image_view)
roundedImageView.setCornerRadius(30f) // 设置圆角半径为30像素

这种方法可以实现一个自定义的AppCompatImageView，能够根据需要动态调整圆角半径。

五、使用CardView实现圆角效果

CardView是Android中的一个常用控件，可以轻松实现阴影和圆角效果。

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/your_image"/>
</androidx.cardview.widget.CardView>

这种方法不需要新建文件，在XML中配置，但不能单独设置某个角。

Android中有多种方式可以实现圆角效果，每种方式都有其优缺点，开发者可以根据具体需求选择合适的方法来实现所需的圆角效果。