巧用Kotlin：自定义View图片圆角，简单上手（上）

Android

2024-01-12 10:43:08

使用 Kotlin 自定义 View 实现图片圆角

导言

在 Android 开发中，图片圆角效果是一种常见的视觉元素，用于提升用户体验和美化应用界面。本文将深入探讨如何使用 Kotlin 自定义 View 实现图片圆角，指导您轻松打造赏心悦目的应用界面。

自定义 View 入门

在 Android 中，View 是所有视觉元素的基础，负责绘制和响应用户交互。自定义 View 允许我们创建自己的 View，并根据需要对其进行定制。实现自定义 View 涉及以下步骤：

继承自 View 类。
重写 onDraw() 方法来绘制 View。
定义自定义属性，以便在 XML 布局文件中对 View 进行配置。

实现图片圆角

要为图片添加圆角，我们需要创建一个继承自 ImageView 类的自定义 View。以下是代码示例：

class RoundedImageView : ImageView {

    // 圆角半径
    private var cornerRadius: Float = 0f

    // 构造函数
    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
        initAttrs(context, attrs)
    }

    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
        initAttrs(context, attrs)
    }

    private fun initAttrs(context: Context, attrs: AttributeSet) {
        val a = context.obtainStyledAttributes(attrs, R.styleable.RoundedImageView)
        cornerRadius = a.getDimension(R.styleable.RoundedImageView_cornerRadius, 0f)
        a.recycle()
    }

    override fun onDraw(canvas: Canvas) {
        val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
        val canvas2 = Canvas(bitmap)
        super.onDraw(canvas2)
        val paint = Paint()
        paint.isAntiAlias = true
        paint.color = Color.WHITE
        val rectF = RectF(0f, 0f, width.toFloat(), height.toFloat())
        canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, paint)
        canvas.drawBitmap(bitmap, 0f, 0f, null)
        bitmap.recycle()
    }
}

代码解读：

cornerRadius 属性定义了图片圆角的半径。
重写 onDraw() 方法，负责绘制 View。在此方法中，创建一个位图，并在其上绘制原始图片。
使用 Canvas 和 Paint 对象绘制一个圆角矩形。
将位图绘制到原始 Canvas 上，实现图片圆角效果。

使用自定义 View

创建自定义 View 后，将其添加到布局文件中：

<com.example.myapplication.RoundedImageView
    android:id="@+id/roundedImageView"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:cornerRadius="10dp" />

注意： app:cornerRadius 属性用于设置自定义 View 的圆角半径。