Android | 多种方式实现图片圆角矩形和圆形效果

卖不甜枣  论坛元老 | 2025-1-20 19:31:30 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1634|帖子 1634|积分 4902

在项目开发中，为了让图片表现得更加美观，通常 UI 会设计成圆角矩形或圆形效果。本文将介绍几种常见的实现方式，并提供对应的代码示例。
方式一：ViewOutlineProvider可以设置圆角矩形、椭圆、圆形等

ViewOutlineProvider 是 Android 5.0 引入的一个类，用来定义视图的轮廓（outline）。可以通过它来实现圆角矩形、椭圆、圆形等效果。
  1. //设置成扩展方法
  2. fun View.clipToRoundView(type: Int = RoundImgView.SHAPE_ROUND_RECT) {
  3.     if (Build.VERSION.SDK_INT >= 21) {
  4.         outlineProvider = object : ViewOutlineProvider() {
  5.             override fun getOutline(view: View?, outline: Outline?) {
  6.                 if (view == null) return
  7.                 if (type == RoundImgView.SHAPE_ROUND_RECT) {
  8.                     //设置一个矩形的轮廓，并指定其圆角半径
  9.                     outline?.setRoundRect(0, 0, view.width, view.height, 15.dp2px().toFloat())
  10.                 } else {
  11.                     //设置成椭圆或者圆形
  12.                     outline?.setOval(0, 0, view.width, view.height)
  13.                 }
  14.             }
  15.         }
  16.         //视图会根据outlineProvider提供的轮廓进行裁剪。任何超出轮廓的部分都会被裁剪掉
  17.         clipToOutline = true
  18.     }
  19. }
复制代码
可以看到通过outline中的setRoundRect/setOval方法来设置圆角矩形、椭圆等形状，尚有其他API方法可以自行了解。在Activity中使用：
  1. private val mIvTarget: AppCompatImageView by id(R.id.iv_round_img)
  2. private val mIvTarget2: AppCompatImageView by id(R.id.iv_round_img2)
  3.    
  4. val bitmap = BitmapFactory.decodeResource(resources, R.drawable.icon_cat_w)
  5. mIvTarget.clipToRoundView(RoundImgView.SHAPE_ROUND_RECT)
  6. mIvTarget.setImageBitmap(bitmap)
  8. mIvTarget2.clipToRoundView(RoundImgView.SHAPE_CIRCLE)
  9. mIvTarget2.setImageBitmap(bitmap)
复制代码
效果如下：

方式二：使用 Glide 进行图片加载和圆角处置惩罚

Glide 是一个强盛的图片加载库，通过它的 RequestOptions 可以轻松实现图片的圆角处置惩罚。
  1. //1、图片设置的不是CenterCrop
  2. Glide.with(this)
  3.      .load(R.drawable.icon_cat_w)
  4.      .transform(RoundedCorners(16.dp2px()))
  5.      .into(mIvTarget)
  7. //2、如果图片设置的是CenterCrop，可能会导致圆角效果被 CenterCrop 操作覆盖，最终看不到圆角效果，需要用下面的方式处理CenterCrop与圆角矩形冲突问题
  8. val requestOptions = RequestOptions().transform(CenterCrop(), RoundedCorners(16.dp2px()))
  9. Glide.with(this)
  10.      .load(R.drawable.icon_cat_w)
  11.      .apply(requestOptions)
  12.      .into(mIvTarget)
复制代码
方式三：Canvas.clipPath()

自定义 ImageView 并重写 onDraw() 方法，通过 Canvas.clipPath() 实现图片的圆角矩形和圆形效果。
  1. /**
  2. * 通过clipPath的方式实现圆角矩形和圆形图片
  3. *
  4. * @param context
  5. * @param attrs
  6. * @param defStyleAttr
  7. */
  8. class RoundImgView @JvmOverloads constructor(
  9.     context: Context,
  10.     attrs: AttributeSet? = null,
  11.     defStyleAttr: Int = 0
  12. ) : AppCompatImageView(context, attrs, defStyleAttr) {
  14.     companion object {
  15.         const val SHAPE_ROUND_RECT = 0
  16.         const val SHAPE_CIRCLE = 1
  17.     }
  19.     private val path = Path()
  20.     private val strokePath = Path()
  21.     private var cornerRadius = 10.dp2px().toFloat()
  22.     private var mStrokeWidth = 10.dp2px().toFloat()
  23.     private var mShapeType = SHAPE_ROUND_RECT
  24.     private var isHasStroke = false //是否设置描边
  26.     // 创建一个画笔
  27.     val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
  28.         color = Color.BLUE
  29.         style = Paint.Style.STROKE
  30.         strokeWidth = mStrokeWidth
  31.     }
  33.     override fun onDraw(canvas: Canvas) {
  34.         //canvas.drawColor(Color.RED)
  35.         //设置描边
  36.         if (isHasStroke) {
  37.             processPath(strokePath) //设置path
  38.             canvas.save()
  39.             canvas.drawPath(strokePath, paint)
  40.             canvas.restore()
  41.         }
  42.         processPath(path)
  43.         canvas.clipPath(path)
  44.         super.onDraw(canvas)
  45.     }
  47.     private fun processPath(path: Path) {
  48.         if (mShapeType == SHAPE_CIRCLE) {
  49.             //圆形
  50.             val radius = (maxOf(width, height) - mStrokeWidth) / 2f
  51.             path.addCircle(width / 2f, height / 2f, radius, Path.Direction.CW)
  52.         } else {
  53.             //圆角矩形
  54.             path.addRoundRect(
  55.                 mStrokeWidth, mStrokeWidth,
  56.                 width.toFloat() - mStrokeWidth,
  57.                 height.toFloat() - mStrokeWidth,
  58.                 floatArrayOf(
  59.                     cornerRadius, cornerRadius, cornerRadius, cornerRadius,
  60.                     cornerRadius, cornerRadius, cornerRadius, cornerRadius
  61.                 ),
  62.                 Path.Direction.CW
  63.             )
  64.         }
  65.     }
  67.     /**
  68.      * 设置描边宽度
  69.      * @param width 宽度
  70.      */
  71.     fun setStrokeWidth(width: Float): RoundImgView {
  72.         this.mStrokeWidth = width
  73.         paint.strokeWidth = mStrokeWidth
  74.         isHasStroke = true
  75.         return this
  76.     }
  78.     /**
  79.      * 设置圆角半径
  80.      * @param radius 半径
  81.      */
  82.     fun setCornerRadius(radius: Float): RoundImgView {
  83.         cornerRadius = radius
  84.         return this
  85.     }
  87.     /**
  88.      * 设置图片类型
  89.      * @param type
  90.      */
  91.     fun setShapeType(type: Int): RoundImgView {
  92.         this.mShapeType = type
  93.         return this
  94.     }
  96.     override fun setImageBitmap(bm: Bitmap?) {
  97.         super.setImageBitmap(bm)
  98.     }
  99. }
复制代码
Activity中使用：
  1. private val mIvCustomImg: RoundImgView by id(R.id.iv_custom_img)
  2. private val mIvCustomImg2: RoundImgView by id(R.id.iv_custom_img2)
  4. val bitmap = BitmapFactory.decodeResource(resources, R.drawable.icon_cat_w)
  5. mIvCustomImg.setCornerRadius(15.dp2px().toFloat())
  6.             .setShapeType(RoundImgView.SHAPE_ROUND_RECT)
  7.             .setStrokeWidth(10f)
  8.             .setImageBitmap(bitmap)
  10. mIvCustomImg2.setCornerRadius(15.dp2px().toFloat())
  11.             .setShapeType(RoundImgView.SHAPE_CIRCLE)
  12.             .setStrokeWidth(10f)
  13.             .setImageBitmap(bitmap)
复制代码
效果图：

方式四：CardView

通过 CardView 的 app:cardCornerRadius 属性，可以非常方便地实现圆角效果。
  1. <androidx.cardview.widget.CardView
  2.         android:layout_width="wrap_content"
  3.         android:layout_height="wrap_content"
  4.         android:layout_marginTop="50dp"
  5.         app:cardCornerRadius="10dp">
  7.    <androidx.appcompat.widget.AppCompatImageView
  8.             android:layout_width="150dp"
  9.             android:layout_height="150dp"
  10.             android:scaleType="centerCrop"
  11.             android:src="@drawable/icon_cat_w" />
  12. </androidx.cardview.widget.CardView>
复制代码
方式五：BitmapShader

BitmapShader 是 Android 中的一种着色器，通过它可以实现自定义的圆角和圆形图片。
  1.     /**
  2.      * @param bitmap  bitmap
  3.      * @param outWidth 输出的宽
  4.      * @param outHeight 输出的高
  5.      * @param radius 半径
  6.      * @param border 描边
  7.      * @param shapeType 图形类型：圆角矩形 or 圆形
  8.      */
  9.     private fun getBitmapByShader(
  10.         bitmap: Bitmap?,
  11.         outWidth: Int,
  12.         outHeight: Int,
  13.         radius: Int,
  14.         border: Int,
  15.         shapeType: Int = RoundImgView.SHAPE_ROUND_RECT
  16.     ): Bitmap? {
  17.         if (bitmap == null || bitmap.height <= 0 || bitmap.width <= 0) {
  18.             return null
  19.         }
  20.         //缩放比例
  21.         val scale = minOf(outWidth.toFloat() / bitmap.width, outHeight.toFloat() / bitmap.height)
  22.         //创建矩阵
  23.         val matrix = Matrix().apply {
  24.             setScale(scale, scale)
  25.         }
  26.         //创建shader
  27.         val shader = BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP).apply {
  28.             setLocalMatrix(matrix)
  29.         }
  30.         //通过shader着色器来绘制图像
  31.         val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
  32.             this.shader = shader
  33.         }
  35.         return Bitmap.createBitmap(outWidth, outHeight, Bitmap.Config.ARGB_8888).also { output ->
  36.             Canvas(output).apply {
  37.                 val rect = RectF(
  38.                     border.toFloat(),
  39.                     border.toFloat(),
  40.                     (outWidth - border).toFloat(),
  41.                     (outHeight - border).toFloat()
  42.                 )
  43.                 if (shapeType == RoundImgView.SHAPE_ROUND_RECT) {
  44.                     //绘制圆角矩形
  45.                     drawRoundRect(rect, radius.toFloat(), radius.toFloat(), paint)
  46.                 } else {
  47.                     //绘制圆形
  48.                     drawCircle(outWidth / 2f, outHeight / 2f, outWidth / 2f, paint)
  49.                 }
  51.                 if (border > 0) {
  52.                     //如果有描边，绘制描边
  53.                     val strokePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
  54.                         color = Color.RED
  55.                         style = Paint.Style.STROKE
  56.                         strokeWidth = border.toFloat()
  57.                     }
  58.                     if (shapeType == RoundImgView.SHAPE_ROUND_RECT) {
  59.                         //绘制圆角矩形
  60.                         drawRoundRect(rect, radius.toFloat(), radius.toFloat(), strokePaint)
  61.                     } else {
  62.                         //绘制圆形
  63.                         drawCircle(outWidth / 2f, outHeight / 2f, (outWidth - border) / 2f, strokePaint)
  64.                     }
  65.                 }
  66.             }
  67.         }
  68.     }
复制代码
Activity中使用：
  1. val bitmap = BitmapFactory.decodeResource(resources, R.drawable.icon_cat_w)
  2. val targetBitmap = getBitmapByShader(bitmap, 200.dp2px(), 200.dp2px(), 20.dp2px(), 5.dp2px(), RoundImgView.SHAPE_ROUND_RECT)
  3. mIvTarget.setImageBitmap(targetBitmap)
复制代码
或者在自定义Drawable中使用BitmapShader：
  1.     class RoundDrawable(val bitmap: Bitmap, val targetWH: Float) : Drawable() {
  3.         private val paint = Paint().apply {
  4.             //缩放比例
  5.             val scale = minOf(targetWH / bitmap.width, targetWH / bitmap.height)
  6.             //创建矩阵
  7.             val matrix = Matrix().apply {
  8.                 setScale(scale, scale)
  9.             }
  10.             isAntiAlias = true
  11.             shader = BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP).apply {
  12.                 setLocalMatrix(matrix)
  13.             }
  14.         }
  16.         override fun draw(canvas: Canvas) {
  17.             val rectF = RectF(0f, 0f, targetWH, targetWH)
  18.             canvas.drawRoundRect(rectF, 20f, 20f, paint)
  19.         }
  21.         override fun setAlpha(alpha: Int) {
  22.             paint.alpha = alpha
  23.         }
  25.         override fun setColorFilter(colorFilter: ColorFilter?) {
  26.             paint.colorFilter = colorFilter
  27.         }
  29.         override fun getOpacity(): Int = PixelFormat.TRANSLUCENT
  30.     }
复制代码
Activity中：
  1. val roundDrawable = RoundDrawable(bitmap, 200.dp2px().toFloat())
  2. mIvTarget.setImageDrawable(roundDrawable)
复制代码
方式六：RoundedBitmapDrawable

RoundedBitmapDrawable 是 Android 提供的一个工具类，用于处置惩罚圆形或圆角矩形的图片表现。
  1. val bitmap = BitmapFactory.decodeResource(resources, R.drawable.icon_cat_w)
  2. val roundBitmapDrawable = RoundedBitmapDrawableFactory.create(resources, bitmap).apply {
  3.       paint.isAntiAlias = true
  4.       cornerRadius = 20.dp2px().toFloat()
  5. }
  6. mIvTarget.setImageDrawable(roundBitmapDrawable)
复制代码
结论

以上介绍了几种常见的在 Android 中实现图片圆角矩形和圆形效果的方法，每种方式都有其使用场景和特点。推荐优先使用系统已经实现好的，好比ViewOutlineProvider 或者 优秀的Glide 图片加载库，如果有额外样式，可以按需实现。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

卖不甜枣

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表