it-swarm.com.de

Passen Sie das Bild mit Picasso auf volle Breite und feste Höhe an

Ich habe ein vertikales LinearLayout, bei dem eines der Elemente eine ImageView ist, die mit Picasso geladen wird. Ich muss die Breite des Bildes auf die gesamte Breite des Geräts erhöhen und den mittleren Teil des Bildes um eine festgelegte Höhe (150 dB) beschneiden. Ich habe derzeit folgenden Code:

Picasso.with(getActivity()) 
    .load(imageUrl) 
    .placeholder(R.drawable.placeholder) 
    .error(R.drawable.error) 
    .resize(screenWidth, imageHeight)
    .centerInside() 
    .into(imageView);

Welche Werte sollte ich in screenWidth und imageHeight (= 150dp) eingeben?

151

Du suchst nach:

.fit().centerCrop()

Was bedeuten diese:

  • fit - Warten Sie, bis die ImageView gemessen wurde, und passen Sie die Größe des Bildes an, damit es genau der Größe entspricht.
  • centerCrop - skalieren Sie das Bild unter Berücksichtigung des Seitenverhältnisses, bis es die gewünschte Größe erreicht. Beschneiden Sie entweder oben und unten oder links und rechts, damit es genau der Größe entspricht.
457
Jake Wharton

In diesem Blog werden die Funktionen zur Größenänderung und Anpassung von Picasso detailliert beschrieben: https://futurestud.io/tutorials/picasso-image-resizing-scaling-and-fit .

Bildgrößenänderung mit Größenänderung (x, y)

Im Allgemeinen ist es optimal, wenn Ihr Server oder Ihre API das Bild in genau den erforderlichen Dimensionen bereitstellt. Dies ist ein perfekter Kompromiss zwischen Bandbreite, Speicherverbrauch und Bildqualität.

Leider können Sie nicht immer Bilder in den perfekten Abmessungen anfordern. Wenn die Bilder eine ungewöhnliche Größe haben, können Sie mit dem Größenänderungsaufruf (horizontalSize, verticalSize) die Abmessungen Ihres Bildes in eine passendere Größe ändern. Dadurch wird das Bild verkleinert, bevor es in der ImageView angezeigt wird.

Picasso  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .resize(600, 200) // resizes the image to these dimensions (in pixel). does not respect aspect ratio
    .into(imageViewResize);

Verwendung von scaleDown ()

Wenn Sie die Option resize () verwenden, erhöht Picasso auch Ihr Bild. Da das Verkleinern eines kleinen Bildes ohne Verbesserung der Bildqualität die Rechenzeit vergeuden kann, rufen Sie scaleDown (true) auf, um die Größenänderung () nur anzuwenden, wenn das Originalbild größere Abmessungen als die Zielgröße hat.

Picasso  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .resize(6000, 2000)
    .onlyScaleDown() // the image will only be resized if it's bigger than 6000x2000 pixels.
    .into(imageViewResizeScaleDown);

Vermeiden gestreckter Bilder mit Skalierung

Wie bei jeder Bildmanipulation kann das Ändern der Größe von Bildern das Seitenverhältnis wirklich verzerren und die Bildanzeige beeinträchtigen. In den meisten Anwendungsfällen möchten Sie verhindern, dass dies geschieht. Picasso bietet Ihnen hier zwei Auswahlmöglichkeiten an, entweder call centerCrop () oder centerInside ().

CenterCrop

CenterCrop () ist eine Ausschneidetechnik, bei der das Bild so skaliert wird, dass es die angeforderten Grenzen der ImageView ausfüllt und dann das Extra schneidet. Die ImageView wird vollständig gefüllt, aber möglicherweise wird nicht das gesamte Bild angezeigt.

Picasso  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .resize(600, 200) // resizes the image to these dimensions (in pixel)
    .centerCrop() 
    .into(imageViewResizeCenterCrop);

CenterInside

CenterInside () ist eine Ausschneidetechnik, mit der das Bild so skaliert wird, dass beide Dimensionen den angeforderten Grenzen der ImageView entsprechen oder darunter liegen. Das Bild wird vollständig angezeigt, füllt jedoch möglicherweise nicht die gesamte Bildansicht aus.

Picasso  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .resize(600, 200)
    .centerInside() 
    .into(imageViewResizeCenterInside);

Last but not least: Picassos fit () Die besprochenen Optionen sollten Ihre Anforderungen an die Funktionalität hinsichtlich der Größenanpassung und Skalierung von Bildern abdecken. Es gibt eine letzte Hilfsfunktion von Picasso, die sehr nützlich sein kann: fit ().

Picasso  
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .fit()
    // call .centerInside() or .centerCrop() to avoid a stretched image
    .into(imageViewFit);

fit () misst die Dimensionen des Ziel-ImageView und verwendet intern resize (), um die Bildgröße auf die Dimensionen des ImageView zu reduzieren. Zu fit () gibt es zwei Dinge zu wissen. Zunächst kann der Aufruf von fit () die Bildanfrage verzögern, da Picasso warten muss, bis die Größe der ImageView gemessen werden kann. Zweitens können Sie nur fit () mit einer ImageView als Ziel verwenden (wir werden später andere Ziele betrachten).

Der Vorteil ist, dass das Bild eine möglichst geringe Auflösung hat, ohne dass die Qualität beeinträchtigt wird. Eine niedrigere Auflösung bedeutet, dass weniger Daten im Cache gespeichert werden. Dies kann die Auswirkungen von Bildern im Speicherbereich Ihrer App erheblich reduzieren. Zusammenfassend kann man sagen, dass fit () ein hervorragendes Werkzeug ist, wenn Sie eine geringere Speicherbelastung gegenüber etwas kürzeren Ladezeiten bevorzugen.

8

In manchen Fällen ist das fit () unbrauchbar. Bevor Sie warten, bis die Breiten- und Höhenmessung abgeschlossen ist. So können Sie globallayoutlistener verwenden. zum Beispiel;

imageView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
            public void onGlobalLayout() {
                Picasso.with(getActivity())
                        .load(imageUrl)
                        .placeholder(R.drawable.placeholder)
                        .error(R.drawable.error)
                        .resize(screenWidth, imageHeight)
                        .fit
                        .centerInside()
                        .into(imageView);
                view.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            }
        });
0
Umut ADALI