Corners ImageView fit inside CardView没有像CardView那样的半径'；Android中的s角

我正在开发一个Android应用程序。在我的应用程序中，我同时使用了

cardwiew

和

ImageView

。但是我在设计

ImageView

内部

cardwiew

时遇到了一个问题。问题在于

ImageView

的角半径

我有如下适配器项的XML布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_marginTop="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    card_view:cardCornerRadius="5dp"
    android:layout_width="match_parent"
    android:id="@+id/di_card_container"
    android:layout_height="wrap_content">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/di_iv_image"
            android:scaleType="centerCrop"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <RelativeLayout
            android:padding="10dp"
            android:layout_below="@id/di_iv_image"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:id="@+id/di_name_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:textSize="15dp"
                android:textColor="@color/textColorPrimary"
                android:id="@+id/di_tv_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RelativeLayout>
    </RelativeLayout>
</android.support.v7.widget.CardView>

通常情况下，
cardwiew
的子视图的角会自动弯曲，就像其父视图的角一样，如果它适合父视图
cardwiew
。是这样吗？那么为什么我的
ImageView
不起作用呢？
所以这是棒棒糖前的常见行为。以下是修复此问题的步骤：

步骤1：将以下属性添加到cardView

card_view:cardUseCompatPadding="true"
card_view:cardPreventCornerOverlap="false"
card_view:cardCornerRadius="10dp"

步骤2：使用一个自定义的ImageView，使其顶部边框环绕：

public class RoundedTopImageView extends ImageView {
private Paint                       mPaint;
private Path                        mPath;
private Bitmap                      mBitmap;
private Matrix                      mMatrix;
private int                         mRadius = DisplayUtils.convertDpToPixel(10);
private int                         mWidth;
private int                         mHeight;
private Drawable                    mDrawable;

public RoundedTopImageView(Context context) {
    super(context);
    init();
}

public RoundedTopImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public RoundedTopImageView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    mPaint = new Paint();
    mPaint.setColor(Color.WHITE);

    mPath = new Path();
}

@Override
public void setImageDrawable(Drawable drawable) {
    mDrawable = drawable;
    if (drawable == null) {
        return;
    }
    mBitmap = drawableToBitmap(drawable);

    int bDIWidth = mBitmap.getWidth();
    int bDIHeight = mBitmap.getHeight();

    //Fit to screen.
    float scale;
    if ((mHeight / (float)bDIHeight) >= (mWidth / (float)bDIWidth)){
        scale =  mHeight / (float)bDIHeight;
    } else {
        scale = mWidth / (float)bDIWidth;
    }

    float borderLeft = (mWidth - (bDIWidth * scale)) / 2;
    float borderTop = (mHeight - (bDIHeight * scale)) / 2;

    mMatrix = getImageMatrix();
    RectF drawableRect = new RectF(0, 0, bDIWidth, bDIHeight);
    RectF viewRect = new RectF(borderLeft, borderTop, (bDIWidth * scale) + borderLeft, (bDIHeight * scale) + borderTop);
    mMatrix.setRectToRect(drawableRect, viewRect, Matrix.ScaleToFit.CENTER);
    invalidate();
}

private Bitmap drawableToBitmap(Drawable drawable) {
    Bitmap bitmap;

    if (drawable instanceof BitmapDrawable) {
        BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
        if(bitmapDrawable.getBitmap() != null) {
            return bitmapDrawable.getBitmap();
        }
    }

    if(drawable.getIntrinsicWidth() <= 0 || drawable.getIntrinsicHeight() <= 0) {
        bitmap = Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_8888); // Single color bitmap will be created of 1x1 pixel
    } else {
        bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
    }

    Canvas canvas = new Canvas(bitmap);
    drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
    drawable.draw(canvas);
    return bitmap;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    mWidth = MeasureSpec.getSize(widthMeasureSpec);
    mHeight = MeasureSpec.getSize(heightMeasureSpec);
    if ((mDrawable != null) && (mHeight > 0) && (mWidth > 0)) {
        setImageDrawable(mDrawable);
    }
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    if (mBitmap == null) {
        return;
    }

    canvas.drawColor(Color.TRANSPARENT);

    mPath.reset();
    mPath.moveTo(0, mRadius);
    mPath.lineTo(0, canvas.getHeight());
    mPath.lineTo(canvas.getWidth(), canvas.getHeight());
    mPath.lineTo(canvas.getWidth(), mRadius);
    mPath.quadTo(canvas.getWidth(), 0, canvas.getWidth() - mRadius, 0);
    mPath.lineTo(mRadius, 0);
    mPath.quadTo(0, 0, 0, mRadius);


    canvas.drawPath(mPath, mPaint);
    canvas.clipPath(mPath);
    canvas.drawBitmap(mBitmap, mMatrix, mPaint);
}

}

编辑：添加了
convertDpToPixel
功能

抱歉，我忘了添加这个，它是一个Util类的一部分，您可以在任何地方添加它（在我的例子中是
DisplayUtils
class）：

步骤1：在应用程序级别build.gradle中添加依赖项

compile 'com.makeramen:roundedimageview:2.2.1'

步骤2：在CardView xml代码中：

<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" 

android:id="@+id/di_card_container"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
app:cardCornerRadius="5dp"
app:cardElevation="4dp">



ImageView中的步骤3：

 <com.makeramen.roundedimageview.RoundedImageView
  android:id="@+id/di_iv_image"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:scaleType="centerCrop"
  android:layout_alignParentTop="true"
  app:riv_corner_radius_top_left="5dp"                                     
  app:riv_corner_radius_top_right="5dp"/>



我希望它能对像我这样偶然发现这个问题的人有所帮助。

如果您使用的是毕加索，则可以使用以下内容（在Kotlin中）（&U）：

我试着检查radius是px还是dp，但找不到任何资源。但是，从我的测试来看，应该是dp。也似乎表明它是dp，因为从dp到px没有转换

必须按顺序执行函数
fit（）
，
centerCrop（）
和
transform（）

如果您正在使用Glide，中也存在类似的解决方案。
在棒棒糖前设备上测试时是否存在此问题？是的。我正在android 4.3上测试它，无法找到DisplayUtils.convertDpToPixel（10）的DisplayUtils类。那么，我该如何获得它呢？它可以很好地去除填充空间，但顶角没有用lint错误进行圆角，而是声明
extend-AppCompatImageView
rounded-top and-bottom该依赖项只是以有线方式裁剪照片，使其看起来像垃圾
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" 

android:id="@+id/di_card_container"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
app:cardCornerRadius="5dp"
app:cardElevation="4dp">

 <com.makeramen.roundedimageview.RoundedImageView
  android:id="@+id/di_iv_image"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:scaleType="centerCrop"
  android:layout_alignParentTop="true"
  app:riv_corner_radius_top_left="5dp"                                     
  app:riv_corner_radius_top_right="5dp"/>

val radius = 5
Picasso.get()
        .load(image)
        .fit()        // to centerCrop, you have to do either resize() or fit()
        .centerCrop() // to remove any possible white areas
        .transform(RoundedCornersTransformation(radius, 0,
                RoundedCornersTransformation.CornerType.TOP))
        .into(imageView)