Android
Bildansicht

Einführung

Syntax

• Die Methode setImageResource(int resId) setzt als Inhalt dieser ImageView .
• Verwendung: imageView.setImageResource(R.drawable.anyImage)

Parameter

Bildressource einstellen

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

Legen Sie eine Zeichnung als Inhalt von ImageView mithilfe des XML-Attributs fest:

android:src="@drawable/android2"  

programmgesteuert einen Zeichnungssatz festlegen:

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

Alpha einstellen

"alpha" wird verwendet, um die Deckkraft für ein Bild festzulegen.

Alpha mit XML-Attribut setzen:

android:alpha="0.5"  

Hinweis: nimmt den Float-Wert von 0 (transparent) bis 1 (vollständig sichtbar).

Alpha programmgesteuert einstellen:

imgExample.setAlpha(0.5f);

ImageView ScaleType - Center

Das in der ImageView enthaltene Bild stimmt möglicherweise nicht genau mit der für den Container angegebenen Größe überein. In diesem Fall können Sie die Größe des Bildes auf verschiedene Weise ändern.

Center

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

Dadurch wird das Bild nicht verkleinert und innerhalb des Containers zentriert (Orange = container).

Falls ImageView kleiner ist als das Bild, wird die Bildgröße nicht geändert und Sie können nur einen Teil davon sehen

starker Text

ImageView ScaleType - CenterCrop

Skalieren Sie das Bild gleichmäßig (behalten Sie das Seitenverhältnis des Bildes bei), so dass beide Abmessungen (Breite und Höhe) des Bildes gleich oder größer als die entsprechende Abmessung der Ansicht sind (minus Auffüllen).

Offizielle Dokumente

Wenn das Bild den Proportionen des Containers entspricht:

Wenn das Bild breiter als der Container ist, wird es auf die größere Größe (in diesem Fall Höhe) vergrößert und die Breite des Bildes angepasst, ohne die Proportionen zu ändern, wodurch das Bild beschnitten wird.

ImageView ScaleType - CenterInside

Skalieren Sie das Bild gleichmäßig (behalten Sie das Seitenverhältnis des Bildes bei), so dass beide Abmessungen (Breite und Höhe) des Bildes gleich oder kleiner als die entsprechende Abmessung der Ansicht sind (minus Auffüllen).

Offizielle Dokumente

Das Bild wird zentriert und auf die kleinere Größe verkleinert. Wenn beide Containergrößen größer sind, wirkt es genauso wie das Zentrum.

Wenn eine der Größen jedoch klein ist, passt sie zu dieser Größe.

ImageView ScaleType - FitStart und FitEnd

Skalieren Sie das Bild mit START.

Skalieren Sie das Bild mit END.

Offizielle Dokumente

FitStart

Dies passt zur kleinsten Größe des Containers und richtet ihn an den Anfang aus.

<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

Dies passt sich an die kleinste Größe des Containers an und richtet ihn am Ende aus.

<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

Skalieren Sie das Bild mit CENTER.

Offizielle Dokumente

Dadurch wird das Bild erweitert, um zu versuchen, den Container abzugleichen. Der Container wird an der Mitte ausgerichtet und an die kleinere Größe angepasst.

Größere Höhe (an Breite anpassen)

Gleiche Breite und Höhe.

ImageView ScaleType - FitXy

Skalieren Sie das Bild mit FILL.

Offizielle Dokumente

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

Skalentyp festlegen

Steuert, wie die Größe des ImageView oder verschoben werden soll, um es der Größe von ImageView .

XML-Attribut:

android:scaleType="..."

Ich werde verschiedene ImageView mit einem quadratischen ImageView mit schwarzem Hintergrund ImageView . In ImageView möchten wir einen rechteckigen, weißen Hintergrund ImageView .

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

scaleType muss einer der folgenden Werte sein:

1. center : Zentriert das Bild in der Ansicht, führt jedoch keine Skalierung durch.

2. centerCrop : centerCrop das Bild gleichmäßig (behält das Seitenverhältnis des Bildes bei), so dass beide Abmessungen (Breite und Höhe) des Bildes gleich oder größer als die entsprechende Abmessung der Ansicht sind (minus Auffüllen). Das Bild wird dann in der Ansicht zentriert.

3. centerInside : centerInside das Bild gleichmäßig (behalten Sie das Seitenverhältnis des Bildes bei), so dass beide Abmessungen (Breite und Höhe) des Bildes gleich oder kleiner als die entsprechende Größe der Ansicht sind (minus Auffüllen). Das Bild wird dann in der Ansicht zentriert.

4. matrix : Beim Zeichnen mit der Bildmatrix skalieren.

5. fitXY : fitXY das Bild mit FILL .

6. fitStart : fitStart das Bild mit START .

7. fitCenter : fitCenter das Bild mit CENTER .

8. fitEnd : fitEnd das Bild mit END .

Farbton einstellen

Legen Sie eine Tönungsfarbe für das Bild fest. Standardmäßig wird der Farbton im SRC_ATOP Modus SRC_ATOP .

Farbton mithilfe des XML-Attributs festlegen:

android:tint="#009c38"

Hinweis: Muss ein Farbwert sein, in Form von "#rgb" , "#argb" , "#rrggbb" oder "#aarrggbb" .

Farbton programmatisch einstellen:

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

und Sie können diesen Farbfilter löschen:

imgExample.clearColorFilter();

Beispiel:

MLRoundedImageView.java

Kopieren und fügen Sie folgende Klasse in Ihr Paket ein:

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

Verwenden Sie diese Klasse in XML mit dem Paketnamen anstelle von ImageView

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