圆角图像视图带有自定义视图

Question

我目前正在尝试制作一个不使用任何库的项目。现在，我想多次使用一个圆形图像，我

<CardView>
   <ImageView/>
</CardView>

每次都不能这样做。因此，我决定为此做一个自定义课程。这是我的班级：

class RoundedImageView : AppCompatImageView {

    constructor(context: Context, attributeSet: AttributeSet) : super(context, attributeSet) {
        init(attributeSet)
    }

    constructor(context: Context) : super(context) {
        init(null);
    }

    private fun init(attributeSet: AttributeSet?) {
        if (attributeSet == null) return

        val typedArray: TypedArray =
            context.obtainStyledAttributes(attributeSet, R.styleable.RoundedImageView, 0, 0)
        try {
            val bitmapDrawable : BitmapDrawable? = drawable as? BitmapDrawable

            val cornerRadius = typedArray.getDimension(R.styleable.RoundedImageView_cornerRadius,0F)

            bitmapDrawable?.bitmap?.let { getRoundedCornerBitmap(it, cornerRadius) }
        }finally {
            typedArray.recycle()
        }
    }

    private fun getRoundedCornerBitmap(bitmap: Bitmap, pixels: Float) {
        val output = Bitmap.createBitmap(
            bitmap.width, bitmap
                .height, Bitmap.Config.ARGB_8888
        )
        val canvas = Canvas(output)
        val color = -0xbdbdbe
        val paint = Paint()
        val rect = Rect(0, 0, bitmap.width, bitmap.height)
        val rectF = RectF(rect)
        val roundPx = pixels.toFloat()
        paint.isAntiAlias = true
        canvas.drawARGB(0, 0, 0, 0)
        paint.color = color
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint)
        paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
        canvas.drawBitmap(bitmap, rect, rect, paint)
        setImageBitmap(bitmap)
    }
}

但是，这似乎不起作用。这就是我得到的：

，这是我使用的代码：

<com.sambhav2358.facebookclone.customviews.RoundedImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>

我什至不确定代码是否达到该方法

---

：不要将其标记为重复工作。即使是该方法getRoundedCornerBitmap也从答案中获取，但这行不通。

Answer 1

首先，您没有在view的画布上绘制，而是要覆盖on Draw 在view> view's上绘制任何内容帆布。而且，由于您只想从角落使图像循环，因此您不需要Porterduff。您只需从canvas夹住一个圆形的矩形，这对于您的用例就足够了。

您不必手动覆盖appCompatimageView的每个构造函数，您可以使用@jvmoverloads注释来覆盖java class的每个构造函数在kotlin中。

使用withStyLedAttributes core-ktx的扩展功能访问attributeset

init block可以在主构造。

不要在OnDraw的内部进行对象分配，请尽可能多地使用Paint> Paint>和PATH的昂贵对象。

牢记要点，您的班级

class RoundedImageView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet,
    defStyleAttr: Int = 0
) : AppCompatImageView(context, attrs, defStyleAttr) {
    val path = Path()
    var cornerRadius: Float = 0f

    init {
        context.withStyledAttributes(attrs, R.styleable.RoundedImageView) {
            cornerRadius = getDimension(R.styleable.RoundedImageView_cornerRadius, 0F)
        }
    }

    override fun onDraw(canvas: Canvas?) {
        val corners = floatArrayOf(
            cornerRadius,
            cornerRadius,
            cornerRadius,
            cornerRadius,
            cornerRadius,
            cornerRadius,
            cornerRadius,
            cornerRadius
        )

        path.addRoundRect(
            0f,
            0f,
            width.toFloat(),
            height.toFloat(),
            corners,
            Path.Direction.CW
        )

        canvas?.clipPath(path)
        super.onDraw(canvas)
    }
}

现在可以像这样更改，可以这样使用

<com.sambhav2358.facebookclone.customviews.RoundedImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:cornerRadius="70dp"
        android:src="@drawable/ic_launcher_background"
        />

Answer 2

您可以尝试以下代码并参考官方 link for更多细节。

<com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/ivNotificationIcon"
        android:layout_width="@dimen/_45sdp"
        android:layout_height="@dimen/_45sdp"
         android:backgroundTint="#EEF3F7"
        android:contentDescription="@string/image_description"
        android:scaleType="centerInside"   
 app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerSize50Percent"
        app:srcCompat="@drawable/slider" />

并在您的style.xml/theme.xml中添加此样式，

 <style name="ShapeAppearanceOverlay.App.CornerSize50Percent" parent="">
 <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
        <item name="backgroundTint">@android:color/white</item>        </style>

根据您的要求，您将在自定义样式中添加项目。

Answer 3

您可以创建一个可绘制的资源，如下所示，rounded_corners.xml：

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

然后可以使用如下：

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/rounded_corners"/>

这将创建带有圆角的任何imageView。您可以控制Rounded_corners.xml中的半径和所需的一切
我已经创建了它透明的，因此您可以将想要的任何图像放在ImageView中。