ImageView scaleType = "fitXY" ne fonctionne pas dans le périphérique pré-sucette à l'intérieur de Cardview | Android

Question

J'ai ImageView qui est à l'intérieur du CardView comme ci-dessous dans mon code. Mon ImageView scaleType = "fitXY" ne fonctionne pas sur pré-lollipop appareils.Mais il semble mieux sur Lollipop dispositifs. S'il vous plaît regarder les images ci-dessous. Comme nous le voyons dans l'image ci-dessus, il y a un rembourrage blanc autour de l'image que je veux enlever, je veux ressembler à l'image sur les deux dispositifs pré-lolipop et post lolipop. S'il vous plaît aidez-moi à court de problème. Merci :)

<android.support.v7.widget.CardView 
       android:layout_width="match_parent" 
       android:layout_height="160dp" 
       android:layout_marginRight="10dp" 
       android:layout_marginTop="6dp" 
       app:cardCornerRadius="10dp" 
       card_view:cardUseCompatPadding="false" 
       > 

       <ImageView 
        android:id="@+id/imgChat" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:scaleType="fitXY" 
        /> 
      </android.support.v7.widget.CardView> 

Answer 1

comme le problème ne manque pas dans pré-lollipop appareils, nous pouvons Cus tomize le ImageView en ImageView arrondi (Comme dans les dispositifs Lollipop). Nous pouvons faire la vérification du OS et personnaliser l'image en fonction.

Fondamentalement, nous pouvons utiliser le chargeur image universellethisOUimage Glide chargeurthis pour créer l'application.

image loader Universal a fourni les RoundedCorners par défaut pour créer le coin de ImageView comme celui-ci

ImageLoader imageLoader = ImageLoader.getInstance(); 
     imageLoader.init(ImageLoaderConfiguration.createDefault(MainActivity.this)); 
     DisplayImageOptions options = new DisplayImageOptions.Builder() 
       .displayer(new RoundedBitmapDisplayer(20))/// RoundedBitmapDisplayer IS THE CLASS BY WHICH , WE CAN CREATE THE ROUNDED CORNER OF THE IMAGEVIEW 
       .cacheInMemory(true) 
       .cacheOnDisk(true) 
       .build(); 
     imageLoader.displayImage("http://thedeveloperworldisyours.com/wp-content/uploads/scareface.jpeg", YOUR_IMAGEVIEW,options); 

Dans l'image Glide chargeur, nous avons besoin de créer la classe personnalisée pour créer l'arc de la Imageview, dans ce link vous trouvez la classe personnalisée arrondie pour créer l'arc arrondi autour du ImageView

Glide.with(this) 
       .load("http://thedeveloperworldisyours.com/wp-content/uploads/scareface.jpeg") 
       .bitmapTransform(new RoundedCornersTransformation(MainActivity.this,15, 2)) ///RoundedCornersTransformation IS THE CLASS, WHICH YOU NEED TO COPY INSIDE YOURS PROJECT, PLEASE FIND THIS CLASS ON ABOVE LINK AND I AM ALSO PROVIDING THE CLASS FOR IT 
       .into(YOUR_IMAGEVIEW); 

Pour créer le coin arrondi en vol plané, nous avons besoin de copier la classe ci-dessous dans notre projet, je l'ai obtenu cette classe de cette link

import android.content.Context; 
import android.graphics.Bitmap; 
import android.graphics.BitmapShader; 
import android.graphics.Canvas; 
import android.graphics.Paint; 
import android.graphics.RectF; 
import android.graphics.Shader; 

import com.bumptech.glide.Glide; 
import com.bumptech.glide.load.Transformation; 
import com.bumptech.glide.load.engine.Resource; 
import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool; 
import com.bumptech.glide.load.resource.bitmap.BitmapResource; 

/** 
* Created by javiergonzalezcabezas on 2/4/16. 
*/ 
public class RoundedCornersTransformation implements Transformation<Bitmap> { 

    public enum CornerType { 
     ALL, 
     TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT, 
     TOP, BOTTOM, LEFT, RIGHT, 
     OTHER_TOP_LEFT, OTHER_TOP_RIGHT, OTHER_BOTTOM_LEFT, OTHER_BOTTOM_RIGHT, 
     DIAGONAL_FROM_TOP_LEFT, DIAGONAL_FROM_TOP_RIGHT 
    } 

    private BitmapPool mBitmapPool; 
    private int mRadius; 
    private int mDiameter; 
    private int mMargin; 
    private CornerType mCornerType; 

    public RoundedCornersTransformation(Context context, int radius, int margin) { 
     this(context, radius, margin, CornerType.ALL); 
    } 

    public RoundedCornersTransformation(BitmapPool pool, int radius, int margin) { 
     this(pool, radius, margin, CornerType.ALL); 
    } 

    public RoundedCornersTransformation(Context context, int radius, int margin, 
             CornerType cornerType) { 
     this(Glide.get(context).getBitmapPool(), radius, margin, cornerType); 
    } 

    public RoundedCornersTransformation(BitmapPool pool, int radius, int margin, 
             CornerType cornerType) { 
     mBitmapPool = pool; 
     mRadius = radius; 
     mDiameter = mRadius * 2; 
     mMargin = margin; 
     mCornerType = cornerType; 
    } 

    @Override 
    public Resource<Bitmap> transform(Resource<Bitmap> resource, int outWidth, int outHeight) { 
     Bitmap source = resource.get(); 

     int width = source.getWidth(); 
     int height = source.getHeight(); 

     Bitmap bitmap = mBitmapPool.get(width, height, Bitmap.Config.ARGB_8888); 
     if (bitmap == null) { 
      bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); 
     } 

     Canvas canvas = new Canvas(bitmap); 
     Paint paint = new Paint(); 
     paint.setAntiAlias(true); 
     paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)); 
     drawRoundRect(canvas, paint, width, height); 
     return BitmapResource.obtain(bitmap, mBitmapPool); 
    } 

    private void drawRoundRect(Canvas canvas, Paint paint, float width, float height) { 
     float right = width - mMargin; 
     float bottom = height - mMargin; 

     switch (mCornerType) { 
      case ALL: 
       canvas.drawRoundRect(new RectF(mMargin, mMargin, right, bottom), mRadius, mRadius, paint); 
       break; 
      case TOP_LEFT: 
       drawTopLeftRoundRect(canvas, paint, right, bottom); 
       break; 
      case TOP_RIGHT: 
       drawTopRightRoundRect(canvas, paint, right, bottom); 
       break; 
      case BOTTOM_LEFT: 
       drawBottomLeftRoundRect(canvas, paint, right, bottom); 
       break; 
      case BOTTOM_RIGHT: 
       drawBottomRightRoundRect(canvas, paint, right, bottom); 
       break; 
      case TOP: 
       drawTopRoundRect(canvas, paint, right, bottom); 
       break; 
      case BOTTOM: 
       drawBottomRoundRect(canvas, paint, right, bottom); 
       break; 
      case LEFT: 
       drawLeftRoundRect(canvas, paint, right, bottom); 
       break; 
      case RIGHT: 
       drawRightRoundRect(canvas, paint, right, bottom); 
       break; 
      case OTHER_TOP_LEFT: 
       drawOtherTopLeftRoundRect(canvas, paint, right, bottom); 
       break; 
      case OTHER_TOP_RIGHT: 
       drawOtherTopRightRoundRect(canvas, paint, right, bottom); 
       break; 
      case OTHER_BOTTOM_LEFT: 
       drawOtherBottomLeftRoundRect(canvas, paint, right, bottom); 
       break; 
      case OTHER_BOTTOM_RIGHT: 
       drawOtherBottomRightRoundRect(canvas, paint, right, bottom); 
       break; 
      case DIAGONAL_FROM_TOP_LEFT: 
       drawDiagonalFromTopLeftRoundRect(canvas, paint, right, bottom); 
       break; 
      case DIAGONAL_FROM_TOP_RIGHT: 
       drawDiagonalFromTopRightRoundRect(canvas, paint, right, bottom); 
       break; 
      default: 
       canvas.drawRoundRect(new RectF(mMargin, mMargin, right, bottom), mRadius, mRadius, paint); 
       break; 
     } 
    } 

    private void drawTopLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, mMargin + mDiameter), 
       mRadius, mRadius, paint); 
     canvas.drawRect(new RectF(mMargin, mMargin + mRadius, mMargin + mRadius, bottom), paint); 
     canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), paint); 
    } 

    private void drawTopRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, mMargin + mDiameter), mRadius, 
       mRadius, paint); 
     canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint); 
     canvas.drawRect(new RectF(right - mRadius, mMargin + mRadius, right, bottom), paint); 
    } 

    private void drawBottomLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, mMargin + mDiameter, bottom), 
       mRadius, mRadius, paint); 
     canvas.drawRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom - mRadius), paint); 
     canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), paint); 
    } 

    private void drawBottomRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(right - mDiameter, bottom - mDiameter, right, bottom), mRadius, 
       mRadius, paint); 
     canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint); 
     canvas.drawRect(new RectF(right - mRadius, mMargin, right, bottom - mRadius), paint); 
    } 

    private void drawTopRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius, 
       paint); 
     canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right, bottom), paint); 
    } 

    private void drawBottomRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRect(new RectF(mMargin, mMargin, right, bottom - mRadius), paint); 
    } 

    private void drawLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom), paint); 
    } 

    private void drawRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom), paint); 
    } 

    private void drawOtherTopLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom - mRadius), paint); 
    } 

    private void drawOtherTopRightRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, right, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRect(new RectF(mMargin + mRadius, mMargin, right, bottom - mRadius), paint); 
    } 

    private void drawOtherBottomLeftRoundRect(Canvas canvas, Paint paint, float right, float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius, 
       paint); 
     canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right - mRadius, bottom), paint); 
    } 

    private void drawOtherBottomRightRoundRect(Canvas canvas, Paint paint, float right, 
               float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, right, mMargin + mDiameter), mRadius, mRadius, 
       paint); 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, bottom), mRadius, mRadius, 
       paint); 
     canvas.drawRect(new RectF(mMargin + mRadius, mMargin + mRadius, right, bottom), paint); 
    } 

    private void drawDiagonalFromTopLeftRoundRect(Canvas canvas, Paint paint, float right, 
                float bottom) { 
     canvas.drawRoundRect(new RectF(mMargin, mMargin, mMargin + mDiameter, mMargin + mDiameter), 
       mRadius, mRadius, paint); 
     canvas.drawRoundRect(new RectF(right - mDiameter, bottom - mDiameter, right, bottom), mRadius, 
       mRadius, paint); 
     canvas.drawRect(new RectF(mMargin, mMargin + mRadius, right - mDiameter, bottom), paint); 
     canvas.drawRect(new RectF(mMargin + mDiameter, mMargin, right, bottom - mRadius), paint); 
    } 

    private void drawDiagonalFromTopRightRoundRect(Canvas canvas, Paint paint, float right, 
                float bottom) { 
     canvas.drawRoundRect(new RectF(right - mDiameter, mMargin, right, mMargin + mDiameter), mRadius, 
       mRadius, paint); 
     canvas.drawRoundRect(new RectF(mMargin, bottom - mDiameter, mMargin + mDiameter, bottom), 
       mRadius, mRadius, paint); 
     canvas.drawRect(new RectF(mMargin, mMargin, right - mRadius, bottom - mRadius), paint); 
     canvas.drawRect(new RectF(mMargin + mRadius, mMargin + mRadius, right, bottom), paint); 
    } 

    @Override public String getId() { 
     return "RoundedTransformation(radius=" + mRadius + ", margin=" + mMargin + ", diameter=" 
       + mDiameter + ", cornerType=" + mCornerType.name() + ")"; 
    } 
} 

Answer 2

Cet écart est le résultat de CardView rembourrage interne en dispositif de pré-sucettes. Puisque dans Api < 21 il n'y a pas de support natif pour les ombres et l'écrêtage CardView recréer ces effets à travers des solutions de repli. Maintenant, si vous définissez un cardCornerRadius, dans les périphériques pré-sucette, le CardView appliquera un remplissage de contenu (égal à la valeur de rayon de coin) à votre contenu afin d'éviter que votre contenu ne chevauche des coins.

Pour désactiver ce comportement, vous pouvez le faire en XML:

card_view:cardPreventCornerOverlap="false" 

ou en utilisant java:

cardView.setPreventCornerOverlap(false) 

pour désactiver le rembourrage d'angle de chevauchement.

Mise à jour: Si vous voulez vraiment obtenir le même effet dans le dispositif de pré-sucettes vous pouvez essayer de couper votre image vous-même en utilisant les bibliothèques comme celui-ci:

https://github.com/vinc3m1/RoundedImageView

, Ainsi, lorsque votre contenu chevaucher CardView le chevauchement va Corners et vous obtiendrez le même aspect que les dispositifs post-sucettes ..