web-dev-qa-db-fra.com

Bitmap dans ImageView avec coins arrondis

J'ai un ImageView et je veux le faire avec rounded corners.

J'utilise ceci: 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle"> 
    <solid  Android:color="@null"/>    

    <stroke Android:width="1dp"
            Android:color="#ff000000"/>


    <corners Android:radius="62px"/> 
</shape>

Et définir ce code comme arrière-plan de mon imageview ..__ Cela fonctionne, mais l'image src que je mets sur la ImageView sort des frontières et ne s'adapte pas à la nouvelle forme.

Comment puis-je résoudre le problème?

androidbitmapimageviewrounded-corners
44
BoraBora

essaye celui-là : 

public class CustomImageView extends ImageView {

    public static float radius = 18.0f;  

    public CustomImageView(Context context) {
        super(context);
    }

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

    public CustomImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //float radius = 36.0f;  
        Path clipPath = new Path();
        RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
        clipPath.addRoundRect(rect, radius, radius, Path.Direction.CW);
        canvas.clipPath(clipPath);
        super.onDraw(canvas);
    }
}

et 

<your.pack.name.CustomImageView
                Android:id="@+id/selectIcon"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_centerInParent="true"
                Android:scaleType="centerCrop" />

CustomImageView  iconImage = (CustomImageView )findViewById(R.id.selectIcon);
iconImage.setImageBitmap(bitmap);

ou,

ImageView iv= new CustomImageView(this);
iv.setImageResource(R.drawable.pic);
80
Anand

Il est étrange que personne ici n’ait mentionné RoundedBitmapDrawable à partir de la bibliothèque de support Android v4. Pour moi, c’est le moyen le plus simple d’obtenir des angles arrondis sans frontière. Voici un exemple d'utilisation:

RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(), bitmap);
final float roundPx = (float) bitmap.getWidth() * 0.06f;
roundedBitmapDrawable.setCornerRadius(roundPx);
24
lobzik

Créez une fonction qui permet d’arrondir votre image bitmap à l’aide de canvas.

public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
            .getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);
    final float roundPx = pixels;

    Paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    Paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, Paint);

    Paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, Paint);

    return output;
}

pour plus d'informations:> ici

18
Ketan Ahir

La réponse acceptée utilise un écrêtage de chemin, mais elle ne prend pas en charge l'anti-aliasing. Voir les commentaires de Romain Guy sur son post. "La coupure de chemin ne prend pas en charge l'anticrénelage et vous obtenez des bords irréguliers." 

http://www.curious-creature.com/2012/12/11/11/Android-recipe-1-image-with-rounded-corners/

Il existe une bonne bibliothèque (RoundedImageView de vinc3m1) qui supporte les angles arrondis dans ImageView, mais elle ne prend en charge que les mêmes rayons dans tous les angles. J'ai donc fait en sorte que vous puissiez définir différents rayons sur chaque coin.

Il ne repose ni sur le découpage de chemin, ni sur le redessin. Il ne dessine qu'une fois avec la méthode canvas.drawPath(). Alors j'ai finalement obtenu le résultat que je voulais comme ci-dessous.

enter image description here

Voir: https://github.com/pungrue26/SelectableRoundedImageView

9
김준호

Si vous avez également besoin d'une bordure, alors: 1. Vous pouvez utiliser une image de boîte arrondie avec un corps transparent et blanc de l'extérieur. Par exemple:

Rounded box

et utilisez ceci avec l'image cible comme ci-dessous:

<FrameLayout
Android:layout_width="100px"
Android:layout_height="100px" >
<ImageView
        Android:id="@+id/targetImage"
        Android:layout_width="100px"
        Android:layout_height="100px"
        Android:src="@drawable/app_icon"
        Android:layout_gravity="center" />
<ImageView
        Android:id="@+id/boxImage"
        Android:layout_width="fill_parent"
        Android:layout_height="fill_parent"
        Android:scaleType="fitXY"
        Android:src="@drawable/box" />

  1. Ajouter CardView en tant que disposition parent de ImageView est également une bonne solution.
5
Kalu Khan Luhar

Si vous avez besoin de créer Bitmap avec des rayons de coin différents et que je vous recommande de suivre le code:

private static Bitmap createRoundedRectBitmap(@NonNull Bitmap bitmap,
                                float topLeftCorner, float topRightCorner,
                                float bottomRightCorner, float bottomLeftCorner) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), 
                                        Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = Color.WHITE;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);
    Path path = new Path();
    float[] radii = new float[]{
            topLeftCorner, bottomLeftCorner,
            topRightCorner, topRightCorner,
            bottomRightCorner, bottomRightCorner,
            bottomLeftCorner, bottomLeftCorner
    };

    Paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    Paint.setColor(color);
    path.addRoundRect(rectF, radii, Path.Direction.CW);
    canvas.drawPath(path, Paint);
    Paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, Paint);
    return output;
}
3
Sergei Vasilenko

Pour moi, la méthode ci-dessous fait la magie. :) Cette méthode accepte un objet bitmap et le renvoie avec des coins arrondis. roundPx est le nombre de pixels arrondis souhaité:

public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
    bitmap.getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);
    final float roundPx = 12;

    Paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    Paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, Paint);

    Paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, Paint);

    return output;
}

... ou vous pouvez utiliser this library à la place de ImageView sans autre codage.

2
Niamatullah Bakhshi

Cela peut être fait avec un fond attrayable, comme l'explique de nombreux posts, dont celui-ci, mais il doit également définir le découpage .

Le code:

AppCompatImageView iconView = findViewById(R.id.thumbnail);
iconView.setClipToOutline(true);

La disposition:

<Android.support.v7.widget.AppCompatImageView
    Android:id="@+id/thumbnail"
    Android:layout_width="80dp"
    Android:layout_height="80dp"
    Android:contentDescription="@string/thumbnail"
    Android:scaleType="centerInside"
    Android:background="@drawable/round_view" <!--here set the drawable as background -->
    tools:src="@mipmap/ic_user" />

Le tirable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <corners Android:radius="10dp" />
</shape>
0
ByteArtisan
public class RoundedImageView extends ImageView {

    public RoundedImageView(Context context) {
        super(context);
    }

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

    public RoundedImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        Bitmap rounder = Bitmap.createBitmap(getWidth(),getHeight(),Bitmap.Config.ARGB_8888);
        Canvas canvasRound = new Canvas(rounder);    

        Paint xferPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        xferPaint.setColor(Color.BLACK);

        final int rx = this.getWidth(); //our x radius
        final int ry = this.getHeight(); //our y radius

        canvasRound.drawRoundRect(new RectF(0,0,rx,ry), rx, ry, xferPaint);     

        xferPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

        canvas.drawBitmap(rounder, 0, 0, xferPaint);

    }

}
0
carlosgpn