Suche…


Einführung

ImageView ( android.widget.ImageView ) ist eine Ansicht zum Anzeigen und Bearbeiten von Bildressourcen wie Drawables und Bitmaps.

Einige Effekte, die in diesem Thema behandelt werden, können auf das Bild angewendet werden. Die Bildquelle kann in XML - Datei (eingestellt wird layout - Ordner) oder programmatisch in Java - Code.

Syntax

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

Parameter

Parameter Beschreibung
resId Name Ihrer Image-Datei im Ordner res (normalerweise im drawable )

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

Geben Sie hier die Bildbeschreibung ein

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).

Center

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

Bild zentrieren größer als imageView

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:

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

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.

Mitte innen 1

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

Mitte innen 2

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

nach oben passen

nach links passen

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

nach unten passen

passend nach rechts

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)

Geben Sie hier die Bildbeschreibung ein

Gleiche Breite und Höhe.

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

  1. 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.

Geben Sie hier die Bildbeschreibung ein

  1. 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.

Geben Sie hier die Bildbeschreibung ein

  1. matrix : Beim Zeichnen mit der Bildmatrix skalieren.

Geben Sie hier die Bildbeschreibung ein

  1. fitXY : fitXY das Bild mit FILL .

Geben Sie hier die Bildbeschreibung ein

  1. fitStart : fitStart das Bild mit START .

Geben Sie hier die Bildbeschreibung ein

  1. fitCenter : fitCenter das Bild mit CENTER .

Geben Sie hier die Bildbeschreibung ein

  1. fitEnd : fitEnd das Bild mit END .

Geben Sie hier die Bildbeschreibung ein

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:

Geben Sie hier die Bildbeschreibung ein

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


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow