Android
ImageView

Introduction

Syntaxe

• La méthode setImageResource(int resId) définit un dessin comme contenu de cette ImageView .
• Utilisation: imageView.setImageResource(R.drawable.anyImage)

Paramètres

Définir une ressource image

<ImageView
 android:id="@+id/imgExample"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 ...
 />

définir un dessin comme contenu de ImageView utilisant l'attribut XML:

android:src="@drawable/android2"  

définir un dessinable par programme:

 ImageView imgExample = (ImageView) findViewById(R.id.imgExample);
 imgExample.setImageResource(R.drawable.android2);

Définir alpha

"alpha" est utilisé pour spécifier l'opacité d'une image.

définir alpha en utilisant l'attribut XML:

android:alpha="0.5"  

Remarque: prend la valeur flottante de 0 (transparent) à 1 (entièrement visible)

définir alpha par programmation:

imgExample.setAlpha(0.5f);

ImageView ScaleType - Centre

L'image contenue dans ImageView peut ne pas correspondre exactement à la taille donnée au conteneur. Dans ce cas, le framework vous permet de redimensionner l'image de plusieurs manières.

Centre

    <ImageView android:layout_width="20dp"
           android:layout_height="20dp"
           android:src="@mipmap/ic_launcher"
           android:id="@+id/imageView"
           android:scaleType="center"
           android:background="@android:color/holo_orange_light"/>

Cela ne redimensionnera pas l’image et la centrera dans le conteneur (Orange = conteneur)

Si l'image est plus petite que l'image, l'image ne sera pas redimensionnée et vous ne pourrez en voir qu'une partie

texte fort

ImageView ScaleType - CenterCrop

Mettez à l'échelle l'image uniformément (conservez les proportions de l'image) de sorte que les deux dimensions (largeur et hauteur) de l'image soient égales ou supérieures à la dimension correspondante de la vue (moins le remplissage).

Documents officiels

Lorsque l'image correspond aux proportions du conteneur:

Lorsque l'image est plus large que le conteneur, elle l'étend à la taille la plus grande (dans ce cas, la hauteur) et ajuste la largeur de l'image sans changer ses proportions, ce qui provoque son recadrage.

ImageView ScaleType - CenterInside

Mettez à l'échelle l'image uniformément (conservez les proportions de l'image) de sorte que les dimensions (largeur et hauteur) de l'image soient égales ou inférieures à la dimension correspondante de la vue (moins le remplissage).

Documents officiels

Il va centrer l'image et la redimensionner à la taille la plus petite, si les deux tailles de conteneur sont plus grandes, il agira comme le centre.

Mais si l'une des tailles est petite, elle conviendra à cette taille.

ImageView ScaleType - FitStart et FitEnd

Mettre à l'échelle l'image à l'aide de START.

Mettre à l'échelle l'image en utilisant END.

Documents officiels

FitStart

Cela correspondra à la plus petite taille du conteneur et l'aligner au début.

<ImageView android:layout_width="200dp"
           android:layout_height="200dp"
           android:src="@mipmap/ic_launcher"
           android:id="@+id/imageView"
           android:scaleType="fitStart"
           android:layout_gravity="center"
           android:background="@android:color/holo_orange_light"/>

FitEnd

Cela s'adaptera à la plus petite taille du conteneur et l'aligner à la fin.

<ImageView android:layout_width="200dp"
           android:layout_height="100dp"
           android:src="@mipmap/ic_launcher"
           android:id="@+id/imageView"
           android:scaleType="fitEnd"
           android:layout_gravity="center"
           android:background="@android:color/holo_orange_light"/>

ImageView ScaleType - FitCenter

Mettre à l'échelle l'image en utilisant CENTER.

Documents officiels

Cela élargit l'image pour essayer de faire correspondre le conteneur et l'aligner sur le centre, il s'adaptera à la taille plus petite.

Plus grande hauteur (ajustement à la largeur)

Même largeur et hauteur.

ImageView ScaleType - FitXy

Mettre à l'échelle l'image en utilisant FILL.

Documents officiels

<ImageView android:layout_width="100dp"
           android:layout_height="200dp"
           android:src="@mipmap/ic_launcher"
           android:id="@+id/imageView"
           android:scaleType="fitXY"
           android:layout_gravity="center"
           android:background="@android:color/holo_orange_light"/>

Définir le type d'échelle

Contrôle la façon dont l'image doit être redimensionnée ou déplacée pour correspondre à la taille de ImageView .

Attribut XML:

android:scaleType="..."

Je vais illustrer différents types d'échelles avec un ImageView carré qui a un arrière-plan noir et nous voulons afficher un dessin rectangulaire en fond blanc dans ImageView .

 <ImageView
  android:id="@+id/imgExample"
  android:layout_width="200dp"
  android:layout_height="200dp"
  android:background="#000" 
  android:src="@drawable/android2"
  android:scaleType="..."/>

scaleType doit être l'une des valeurs suivantes:

1. center : centrez l'image dans la vue, mais n'effectuez aucune mise à l'échelle.

2. centerCrop : redimensionne l'image uniformément (conserve le format de l'image) pour que les dimensions (largeur et hauteur) de l'image soient égales ou supérieures à la dimension correspondante de la vue (moins le remplissage). L'image est ensuite centrée dans la vue.

3. centerInside : redimensionne l'image uniformément (conserve le format de l'image) afin que les dimensions (largeur et hauteur) de l'image soient égales ou inférieures à la dimension correspondante de la vue (moins le remplissage). L'image est ensuite centrée dans la vue.

4. matrix : mettre à l'échelle en utilisant la matrice d'image lors du dessin.

5. fitXY : redimensionne l'image en utilisant FILL .

6. fitStart : redimensionne l'image à l'aide de START .

7. fitCenter : redimensionne l'image à l'aide de CENTER .

8. fitEnd : redimensionne l'image en utilisant END .

Mettre la teinte

Définissez une couleur de teinte pour l'image. Par défaut, la teinte se fondra en utilisant le mode SRC_ATOP .

définir la teinte en utilisant l'attribut XML:

android:tint="#009c38"

Note: Doit être une valeur de couleur, sous la forme "#rgb" , "#argb" , "#rrggbb" ou "#aarrggbb" .

définir la teinte par programmation:

imgExample.setColorFilter(Color.argb(255, 0, 156, 38));

et vous pouvez effacer ce filtre de couleur:

imgExample.clearColorFilter();

Exemple:

MLRoundedImageView.java

Copiez et collez la classe suivante dans votre package:

public class MLRoundedImageView extends ImageView {

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

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

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

    @Override
    protected void onDraw(Canvas canvas) {

        Drawable drawable = getDrawable();

        if (drawable == null) {
            return;
        }

        if (getWidth() == 0 || getHeight() == 0) {
            return;
        }
        Bitmap b = ((BitmapDrawable) drawable).getBitmap();
        Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

        int w = getWidth(), h = getHeight();

        Bitmap roundBitmap = getCroppedBitmap(bitmap, w);
        canvas.drawBitmap(roundBitmap, 0, 0, null);

    }

    public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
        Bitmap sbmp;
        
        if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
            float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
            float factor = smallest / radius;
            sbmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() / factor), (int)(bmp.getHeight() / factor), false);
        } else {
            sbmp = bmp;
        }
        
        Bitmap output = Bitmap.createBitmap(radius, radius,
                Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xffa19774;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, radius, radius);

        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(Color.parseColor("#BAB399"));
        canvas.drawCircle(radius / 2 + 0.7f,
                radius / 2 + 0.7f, radius / 2 + 0.1f, paint);
        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(sbmp, rect, rect, paint);

        return output;
    }
}

Utilisez cette classe en XML avec le nom du package au lieu de ImageView

<com.androidbuts.example.MLRoundedImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />