角落ImgeView適合內CardView沒有半徑像CardView的角落Android

Question

我正在開發一個Android應用程序。在我的應用程序中，我一起使用CardView和ImageView。但我在CardView內設計ImageView時遇到問題。問題是角落半徑半徑爲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> 

正如你可以看到我設置的CardView到5dp拐角半徑和ImageView與適合其父CardView的寬度。問題是ImageView的頂角不像其父母CardView的彎角那樣彎曲。

這是截圖

的CardView子視圖通常情況下的角落，如果它適合於母公司CardView自動彎曲像其父角落。對？那麼爲什麼我的ImageView不工作？請問我的代碼有什麼問題？我該如何修復它？

Answer 1

所以這是棒棒糖的常見行爲。下面是解決它的步驟：

第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); 
} 

} 

步驟3：只需用RoundedTopImageView替換ImageView中的ImageView

第4步：在您的代碼中將其用作常規imageView，例如使用畢加索：

RoundedTopImageView image = (RoundedTopImageView) findViewById(R.id.di_iv_image); 
Picasso.with(context) 
        .load("Some cool Url") 
        .into(image); 

編輯：增加了convertDpToPixel功能

對不起，我忘了補充這一點，這是你可以（在DisplayUtils類在我的情況），你想要的任意位置添加一個實用程序類的一部分：

public static int convertDpToPixel(int dp) { 
    DisplayMetrics displayMetrics = Resources.getSystem().getDisplayMetrics(); 
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, displayMetrics); 
} 

Answer 2

第1步：在應用程序級別構建中添加依賴項。gradle這個

compile 'com.makeramen:roundedimageview:2.2.1' 

第二步：在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"> 

步驟3中的ImageView：

<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"/> 

我希望這將有助於