如何使RecyclerView中FloatingActionButton显示圆形图片且无额外背景？

我来帮你搞定这两个UI问题，咱们一步步来调整：

你当前遇到两个关键问题：

1. FloatingActionButton自带额外背景（来自FAB默认样式+你重复设置的背景属性）
2. 加载的图片没有被裁剪为50px圆角的圆形效果

第一步：清理FAB的冗余属性，实现无背景纯图片展示 #

先修改你的ViewHolder布局代码，把干扰背景展示的属性全部移除，让FAB完全透明，只承载图片：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/transparent">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/row_product_page_ghost_floating_action_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:scaleType="centerCrop" <!-- 让图片填满FAB区域 -->
        android:src="@drawable/user_icon" <!-- 保留默认占位图 -->
        app:backgroundTint="@android:color/transparent" <!-- 彻底透明化FAB背景 -->
        app:fabCustomSize="50dp" <!-- 固定FAB尺寸，匹配你要的50px圆角 -->
        app:fabSize="auto"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:maxImageSize="50dp" <!-- 让图片大小和FAB完全一致 -->
        app:elevation="0dp" <!-- 移除阴影，避免额外视觉干扰 -->
        app:borderWidth="0dp" /> <!-- 去掉默认边框 -->

</androidx.constraintlayout.widget.ConstraintLayout>

这里的关键调整：

• 删除了android:background、android:alpha、android:backgroundTint这些重复且干扰的属性
• 通过app:backgroundTint把FAB自带的背景设为完全透明
• 调整scaleType为centerCrop，确保图片不会出现拉伸或留白
• 移除阴影和边框，让FAB只显示图片内容

第二步：用Picasso实现图片圆形裁剪 #

因为FAB尺寸是50dp，我们需要把加载的图片裁剪为对应大小的圆形。先创建一个自定义的Picasso转换类：

class CircleTransform : Transformation {
    override fun transform(source: Bitmap): Bitmap {
        val size = min(source.width, source.height)
        // 先把图片裁剪为正方形
        val squaredBitmap = Bitmap.createBitmap(source, (source.width - size)/2, (source.height - size)/2, size, size)
        if (squaredBitmap != source) source.recycle()
        
        // 绘制圆形图片
        val bitmap = Bitmap.createBitmap(size, size, source.config)
        val canvas = Canvas(bitmap)
        val paint = Paint().apply {
            shader = BitmapShader(squaredBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
            isAntiAlias = true
        }
        val radius = size / 2f
        canvas.drawCircle(radius, radius, radius, paint)
        
        squaredBitmap.recycle()
        return bitmap
    }

    override fun key(): String = "circle"
}

然后修改onBindViewHolder代码，给Picasso添加这个圆形转换：

override fun onBindViewHolder(holder: ProductPageGhostHolder, position: Int) {
    holder.floatingGhostButton.setOnClickListener {
        listener.onClick(position)
    }
    val jid = models[position].JID
    val roster = VerteDatabaseManager.ROSTER.getRoster(jid)
    if (roster != null && roster.vcard != null) {
        Picasso.get()
            .load(roster.vcard.image)
            .transform(CircleTransform()) // 应用圆形裁剪
            .placeholder(R.drawable.user_icon) // 加载时显示占位图
            .into(holder.floatingGhostButton)
    } else {
        // 没有图片时，重置为默认占位图
        holder.floatingGhostButton.setImageResource(R.drawable.user_icon)
    }
}

这里的关键调整：

• 用CircleTransform()确保所有加载的图片都被裁剪为圆形
• 增加了无图片的分支处理，避免FAB显示空白
• 保留占位图提升加载过程的用户体验

最终效果验证 #

做完以上调整后，每个FAB应该会：

• 完全没有额外背景，只展示圆形图片
• 图片尺寸完美匹配50dp的FAB，呈现你需要的50px圆角圆形效果

内容的提问来源于stack exchange，提问作者Alon Shlider